This time I will share jQuery Plugin and tutorial about Simple Extensible WYSIWYG Editor For Web – summernote, hope it will help you in programming stack.
summernote is a simple yet customizable, extensible, interactive WYSIWYG rich text editor for the web.
Features:
- i18n support.
- Custom editor buttons.
- Works with Bootstrap framework.
- Compatible with 3rd frameworks & languages: Angular, PHP, etc.
- Switches between editor and code view modes.
- Autocomplete in the editor.
- Plugin system.
- Easy to use.
- Cross browser.
3rd Modules:
Basic Usage:
1. To use the editor, include the following JavaScript and CSS files on the page.
02 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
05 |
< link rel = "stylesheet" href = "/path/to/dist/summernote-bs4.css" /> |
06 |
< script src = "/path/to/dist/summernote-bs4.js" ></ script > |
09 |
< link rel = "stylesheet" href = "/path/to/dist/summernote.css" /> |
10 |
< script src = "/path/to/dist/summernote.js" ></ script > |
13 |
< link rel = "stylesheet" href = "/path/to/dist/summernote-lite.css" /> |
14 |
< script src = "/path/to/dist/summernote-lite.js" ></ script > |
2. Include a language file of your chocie on the page. All supported languages:
- summernote-ar-AR.js
- summernote-bg-BG.js
- summernote-ca-ES.js
- summernote-cs-CZ.js
- summernote-da-DK.js
- summernote-de-DE.js
- summernote-el-GR.js
- summernote-es-ES.js
- summernote-es-EU.js
- summernote-fa-IR.js
- summernote-fi-FI.js
- summernote-fr-FR.js
- summernote-gl-ES.js
- summernote-he-IL.js
- summernote-hr-HR.js
- summernote-hu-HU.js
- summernote-id-ID.js
- summernote-it-IT.js
- summernote-ja-JP.js
- summernote-ko-KR.js
- summernote-lt-LT.js
- summernote-lt-LV.js
- summernote-mn-MN.js
- summernote-nb-NO.js
- summernote-nl-NL.js
- summernote-pl-PL.js
- summernote-pt-BR.js
- summernote-pt-PT.js
- summernote-ro-RO.js
- summernote-ru-RU.js
- summernote-sk-SK.js
- summernote-sl-SI.js
- summernote-sr-RS-Latin.js
- summernote-sr-RS.js
- summernote-sv-SE.js
- summernote-ta-IN.js
- summernote-th-TH.js
- summernote-tr-TR.js
- summernote-uk-UA.js
- summernote-uz-UZ.js
- summernote-vi-VN.js
- summernote-zh-CN.js
- summernote-zh-TW.js
1 |
< script src = "/path/to/dist/lang/summernote-es-ES.js" ></ script > |
3. Create a textarea or any other container element to hold the summernote editor.
1 |
< div class = "summernote" >< p >jQueryScript.Net</ p ></ div > |
4. Attach the function to the placeholder element and done.
1 |
$( '.summernote' ).summernote({ |
5. Create an inline editor attached to the text selection using the Air mode.
1 |
$( '.summernote' ).summernote({ |
6. Apply an autocomplete functionality to the editor using the hint
option.
01 |
$( '.summernote' ).summernote({ |
03 |
mentions: [ 'jayden' , 'sam' , 'alvin' , 'david' ], |
05 |
search: function (keyword, callback) { |
06 |
callback($.grep( this .mentions, function (item) { |
07 |
return item.indexOf(keyword) == 0; |
10 |
content: function (item) { |
7. This is a full list of editor buttons displayed in the toolbar. Feel free to add/remove buttons as per your needs.
- picture
- link
- video
- table
- hr
- fontname
- fontsize
- fontsizeunit
- color
- forecolor
- backcolor
- bold
- italic
- underline
- strikethrough
- superscript
- subscript
- clear
- style
- ol
- ul
- paragraph
- height
- fullscreen
- codeview
- undo
- redo
- help
01 |
$( '.summernote' ).summernote({ |
04 |
[ 'font' , [ 'bold' , 'underline' , 'clear' ]], |
05 |
[ 'fontname' , [ 'fontname' ]], |
07 |
[ 'para' , [ 'ul' , 'ol' , 'paragraph' ]], |
09 |
[ 'insert' , [ 'link' , 'picture' , 'video' ]], |
10 |
[ 'view' , [ 'fullscreen' , 'codeview' , 'help' ]], |
8. Full plugin options & callback functions to customize the summernote editor.
003 |
'editor' : Editor_Editor, |
004 |
'clipboard' : Clipboard_Clipboard, |
005 |
'dropzone' : Dropzone_Dropzone, |
006 |
'codeview' : Codeview_CodeView, |
007 |
'statusbar' : Statusbar_Statusbar, |
008 |
'fullscreen' : Fullscreen_Fullscreen, |
009 |
'handle' : Handle_Handle, |
010 |
'hintPopover' : HintPopover_HintPopover, |
011 |
'autoLink' : AutoLink_AutoLink, |
012 |
'autoSync' : AutoSync_AutoSync, |
013 |
'autoReplace' : AutoReplace_AutoReplace, |
014 |
'placeholder' : Placeholder_Placeholder, |
015 |
'buttons' : Buttons_Buttons, |
016 |
'toolbar' : Toolbar_Toolbar, |
017 |
'linkDialog' : LinkDialog_LinkDialog, |
018 |
'linkPopover' : LinkPopover_LinkPopover, |
019 |
'imageDialog' : ImageDialog_ImageDialog, |
020 |
'imagePopover' : ImagePopover_ImagePopover, |
021 |
'tablePopover' : TablePopover_TablePopover, |
022 |
'videoDialog' : VideoDialog_VideoDialog, |
023 |
'helpDialog' : HelpDialog_HelpDialog, |
024 |
'airPopover' : AirPopover_AirPopover |
028 |
followingToolbar: false , |
029 |
toolbarPosition: 'top' , |
032 |
toolbar: [[ 'style' , [ 'style' ]], [ 'font' , [ 'bold' , 'underline' , 'clear' ]], [ Share this:
|