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