Rich-text editing plug-ins based on jquery and Bootstrap-summernote_ Rich Text editor

1, the use of HTML5 DOCTYPE 2, the introduction of jquery, Bootstrap, font-awesome files

<!--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.2/summernote.css "rel=" stylesheet ">
<script src=" http:// Cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js "></script>

3, add div to body, set id= "Summernote"; This target element will later be rendered as the Summernote editing tool.

<div id= "Summernote" ></div>

4, the document is ready to run the following script.

Initialize the plug-in
$ (function () {
    $ (' #summernote '). Summernote ();

5. Basic setting height and focus

$ (' #summernote '). Summernote ({
  height:300,                 //Set editor height
  minheight:null,             //Set minimum height  of editor
  Maxheight:null,             //Set maximum height of editor
  focus:true                  //Set focus to editable Initializing Summernote
});

Language

Lang: ' Zh-cn ',

customizing toolbars

Toolbar: [
    //[GroupName, [List of Button]]
    [' style ', [' bold ', ' italic ', ' underline ', ' clear ']],
    [' Font ', [' Strikethrough ', ' superscript ', ' subscript ']],
    [' fontsize ', [' fontsize ']],
    [' Color ', [' color ']],
    [ ' Para ', [' ul ', ' ol ', ' paragraph ']],
    [' Height ', [' height ']]
  ]

6, picture upload

Multi-Map Upload Demo

<! DOCTYPE html>  
 Official documents poking around here Yes U ェ *u