jquery-based Bootstrap online text editor plug-in Summernote

Summernote is a jquery-based bootstrap super simple WYSIWYG online editor. Summernote is very lightweight, only 30KB in size, supports Safari,chrome,firefox, Opera, Internet Explorer 9 + (IE8 support is coming soon).

Characteristics:

The world's best WYSIWYG online editor

Extremely easy to install

Open source

Customizing the initial options

Support shortcut keys

Suitable for various back-end program speech

How to use

: http://www.yyyweb.com/demo/inner-show/summernote.html

Unzip the downloaded Summernote file and put the extracted files into the project, as shown below:

Then in the interface you need to invoke the core file, Summernote need a few JS library support, so you have to introduce other libraries

<!--include libries (JQuery, Bootstrap, fontawesome)--><script src="//code.jquery.com/jquery-1.9.1.min.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!--include summernote Css/js--><link href="Summernote.css"/><script src="Summernote.min.js"></script>

To write HTML, simply add a DIV element to the body and write the ID

<div id="summernote">hello summernote</div>

Write JS Initialization plugin

$ (document). Ready (function () {        $ ('#summernote'). Summernote () ;    });

Final code

<! DOCTYPE html>"en">"Text/javascript"Src="//code.jquery.com/jquery-1.9.1.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"Rel="stylesheet"> <script type="Text/javascript"Src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"Rel="stylesheet"> <link href="~/js/summernote/dist/summernote.css"Rel="stylesheet"/> <script type="Text/javascript"Src="~/js/summernote/dist/summernote.min.js"></script>"Summernote">hello summernote</div> <script type="Text/javascript">$ (document). Ready (function () {$ ('#summernote'). Summernote ();    }); </script></body>
Api
Initialize Summernote
$ ('. Summernote'). Summernote ();
Class with parameters.
Set 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 area after initializing summernote});  
After setting the height, if the content height exceeds the set height will appear the scroll bar, if does not have the setting height then has been down broke away. When you set focus to true, the focus is positioned in the editor when you open the page.
Customize toolbars
$('. Summernote'). Summernote ({toolbar: [//[GroupName, [button list]]          ['style', ['Bold','Italic','Underline','Clear']],    ['Font', ['Strikethrough']],    ['fontsize', ['fontsize']],    ['Color', ['Color']],    ['para', ['ul','ol','paragraph']],    ['Height', ['Height']],  ]});
Preset parameters

 
 

  
  
 
   
 
    
type
 
    
Button ID
 
    
Method
 
   
 
  
  
  
 
   
 
    
Insert
 
    
Picture
 
    
Insert a picture
 
   
 
   
 
    
Link
 
    
Insert a hyperlink
 
   
 
   
 
    
Video
 
    
Insert a video
 
   
 
   
 
    
Table
 
    
Insert a table
 
   
 
   
 
    
hr
 
    
Insert a horizontal rule
 
   
 
   
 
    
Style
 
    
Style
 
    
Format selected Block
 
   
 
   
 
    
FontName
 
    
Set Font Family
 
   
 
   
 
    
FontSize
 
    
Set Font Size
 
   
 
   
 
    
Color
 
    
Set Foreground and background color
 
   
 
   
 
    
Bold
 
    
Toggle weight
 
   
 
   
 
    
Italic
 
    
Toggle Italic
 
   
 
   
 
    
Underline
 
    
Toggle Underline
 
   
 
   
 
    
Strikethrough
 
    
Toggle Strikethrough
 
   
 
   
 
    
Clear
 
    
Clearing all styles
 
   
 
   
 
    
Layout
 
    
Ul
 
    
Make an un-ordered list
 
   
 
   
 
    
Ol
 
    
Make an ordered list
 
   
 
   
 
    
Paragraph
 
    
Set text Alignment
 
   
 
   
 
    
Height
 
    
Set Height of text
 
   
 
   
 
    
Misc
 
    
Fullscreen
 
    
Toggle fullscreen editing mode
 
   
 
   
 
    
CodeView
 
    
Toggle WYSIWYG and HTML editing mode
 
   
 
   
 
    
Undo
 
    
Undo
 
   
 
   
 
    
Redo
 
    
Redo
 
   
 
   
 
    
Help
 
    
Show Help Dialog
 
   
 
  
 
 
Minimalist mode Air-mode
$('. Summernote'). Summernote ({airpopover: [['Color', ['Color']],    ['Font', ['Bold','Underline','Clear']],    ['para', ['ul','paragraph']],    ['Table', ['Table']],    ['Insert', ['Link',' Picture']]  ]});
Release Summernote
$ ('. Summernote'). Destroy ();
Value and Assignment
// Take value var sHTML = $ ('. Summernote'). code (); // when multiple summernote on the same page, take the second value var sHTML = $ ('. Summernote'). EQ (1). code (); // assign a value of $ ('. Summernote'). code (SHTML);
Event
OnInit
$ ('#summernote'). Summernote ({  oninit:function () {    console.log('  Summernote is launched');  });
OnEnter
$ ('#summernote'). Summernote ({  onenter:function (e) {    Console.log ('enter/return key pressed');}  );
Detailed documentation See: http://www.jqcool.net/bootstrap-summernote.html
 JQuery-based bootstrap online text editor plug-in summernote