jquery-based Bootstrap online text editor plug-in Summernote

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.