wysiwyg editor summernote - Free Download Simple Extensible WYSIWYG Editor For Web - summernote

Free Download Simple Extensible WYSIWYG Editor For Web – summernote

Posted on

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.

wysiwyg editor summernote - Free Download Simple Extensible WYSIWYG Editor For Web - summernote
File Size: 1.91 MB
Views Total: 8316
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

01 <!-- jQuery is required -->
02 <script src="/path/to/cdn/jquery.min.js"></script>
03  
04 <!-- For <a href="https://www.jqueryscript.net/tags.php?/bootstrap 4/">Bootstrap 4</a> -->
05 <link rel="stylesheet" href="/path/to/dist/summernote-bs4.css" />
06 <script src="/path/to/dist/summernote-bs4.js"></script>
07  
08 <!-- For Bootstrap 3 -->
09 <link rel="stylesheet" href="/path/to/dist/summernote.css" />
10 <script src="/path/to/dist/summernote.js"></script>
11  
12 <!-- Without any framework -->
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({
2   // options here
3 });

5. Create an inline editor attached to the text selection using the Air mode.

1 $('.summernote').summernote({
2   airMode: true
3 });

6. Apply an autocomplete functionality to the editor using the hint option.

01 $('.summernote').summernote({
02   hint: {
03     mentions: ['jayden', 'sam', 'alvin', 'david'],
04     match: /B@(w*)$/,
05     search: function (keyword, callback) {
06       callback($.grep(this.mentions, function (item) {
07         return item.indexOf(keyword) == 0;
08       }));
09     },
10     content: function (item) {
11       return '@' + item;
12     }   
13   }
14 });

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({
02   toolbar: [
03     ['style', ['style']],
04     ['font', ['bold', 'underline', 'clear']],
05     ['fontname', ['fontname']],
06     ['color', ['color']],
07     ['para', ['ul', 'ol', 'paragraph']],
08     ['table', ['table']],
09     ['insert', ['link', 'picture', 'video']],
10     ['view', ['fullscreen', 'codeview', 'help']],
11   ],
12 });

8. Full plugin options & callback functions to customize the summernote editor.

001 editing: true,
002 modules: {
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
025 },
026 buttons: {},
027 lang: 'en-US',
028 followingToolbar: false,
029 toolbarPosition: 'top',
030 otherStaticBar: '',
031 // toolbar