Summernote Bootstrap 3 Demo

Summernote Bootstrap 3 Demo, Super Simple WYSIWYG editor on Bootstrap

by bizamajig

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"><p><p></p><p class="text-primary alert-warning alert lead">Select the element in the editor and try to apply css styling</p>
<p class="hidden-print lead">fork me:&nbsp;<a href="https://github.com/creativeprogramming/summernote-addclass" class="btn btn-success">github</a></p><p class="hidden-print lead">[I'm hidden on print view]</p>
<p>
<a href="https://www.google.com" class="btn-danger btn">I'm a button link</a>&nbsp;(tip: better to create first the link then toggle the class)
</p>


<p class="hidden-print alert alert-info">Testing rounded img &nbsp;&nbsp;<img...

CSS

body { padding:40px; }

JavaScript

$('#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']]


    ]
});