Page 1 of 1

Summernote - textarea GUI - how do you post data?

Posted: Mon May 09, 2016 9:20 am
by simonmlewis
http://summernote.org/getting-started/
Trying to use this for posting data for users on phones too, as it's responsive.
Trouble is, I don't see how it captures the data to post it to a variable. Unlike, for example, tinymce.

Any ideas?

Code: Select all

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="/js/summernote/summernote.css" rel="stylesheet">
  <script src="/js/summernote/summernote.js"></script>


<div id='summernote'>$row->description</div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote({
          minHeight: 200,
  maxHeight: 450,
    toolbar: [
    ['style', ['bold', 'italic', 'underline']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
  ],
        });
    });
  </script>

Re: Summernote - textarea GUI - how do you post data?

Posted: Mon May 09, 2016 9:57 am
by Celauran
Change the div to a textarea, give it a name, wrap it in a form, and you're done.

Re: Summernote - textarea GUI - how do you post data?

Posted: Mon May 09, 2016 10:01 am
by simonmlewis
Goodness, simple as that! Thanks a mill.

Re: Summernote - textarea GUI - how do you post data?

Posted: Tue May 10, 2016 2:56 pm
by simonmlewis
Any ideas why it defaults to have the Bold button on?

Re: Summernote - textarea GUI - how do you post data?

Posted: Tue May 10, 2016 3:08 pm
by Celauran
Doesn't do that for me. What does your configuration look like?

Re: Summernote - textarea GUI - how do you post data?

Posted: Tue May 10, 2016 3:21 pm
by simonmlewis
The only thing over and above the standard install is this code, as we didn't want the user to enter a different font, and break the design of the site's branding.

Code: Select all

  <script>
    $(document).ready(function() {
        $('#summernote').summernote({
          minHeight: 200,
  maxHeight: 450,
    toolbar: [
    ['style', ['bold', 'italic', 'underline']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
  ],
        });
    });
  </script>

Re: Summernote - textarea GUI - how do you post data?

Posted: Tue May 10, 2016 3:29 pm
by Celauran
There must be something else at play.

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    <!-- include summernote css/js-->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
  </head>
  <body>
    <form method="post" action="">
      <div class="form-group">
        <textarea id="summernote" name="summernote"></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
    <script>
    $(document).ready(function() {
        $('#summernote').summernote({
        minHeight: 200,
          maxHeight: 450,
          toolbar: [
            ['style', ['bold', 'italic', 'underline']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
          ],
      });
    });
    </script>
  </body>
</html>
That's what I've got and bold is most certainly not enabled by default.