Summernote Bootstrap 3 Demo

Summernote Bootstrap 3 Demo, Super Simple WYSIWYG editor on Bootstrap

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css">
<script src="https://rawgit.com/creativeprogramming/summernote-addclass/master/summernote-ext-addclass.js"></script>
<textarea id="summernote">Escrever aqui</textarea>
<h5 id="limite_vermelho" style="text-align:right;color:red"></h5>
<h5 id="limite_normal" style="text-align:right"></h5>

CSS

body {
  padding: 40px;
}

JavaScript

$('#summernote').on('summernote.keyup', function(e) {
        debugger;
        var text = $(this).next('.note-editor').find('.note-editable').text();
        var length = text.length;
        var num = 10 - length;

        if (length > 10) {
            $('#limite_normal').hide();
            $('#limite_vermelho').text(10 - length).show();
        }
        else{
            $('#limite_vermelho').hide();
            $('#limite_normal').text(10 - length).show();
        }

    });

$('#summernote').summernote({
  addclass: {
    debug: false,
    classTags: [{
      title: "Button",
      "value": "btn btn-success"
    }, "jumbotron", "lead", "img-rounded", "img-circle", "img-responsive", "btn", "btn btn-success", "btn btn-danger", "text-muted", "text-primary", "text-warning", "text-danger", "text-success", "table-bordered", "table-responsive", "alert", "alert alert-success", "alert alert-info", "alert alert-warning", "alert alert-danger", "visible-sm", "hidden-xs", "hidden-md", "hidden-lg", "hidden-print"]
  },
  height: 300,
  toolbar: [
    // [groupName, [list of button]]
    ['img', ['picture']],
    ['style', ['style', 'addclass', 'clear']],
    ['fontstyle', ['bold', 'italic', 'ul', 'ol', 'link', 'paragraph']],
    ['fontstyleextra', ['strikethrough', 'underline', 'hr', 'color', 'superscript', 'subscript']],
    ['extra', ['video', 'table', 'height']],
    ['misc', ['undo', 'redo', 'codeview', 'help']]


  ]
});