Summernote - textarea GUI - how do you post data?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Summernote - textarea GUI - how do you post data?

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Change the div to a textarea, give it a name, wrap it in a form, and you're done.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Goodness, simple as that! Thanks a mill.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Any ideas why it defaults to have the Bold button on?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Doesn't do that for me. What does your configuration look like?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
Post Reply