suneditor 2.46.2 → 3.0.0-alpha.1

package/README.md

@@ -1,14 +1,14 @@
 # SunEditor
-Vanilla javascript based WYSIWYG web editor, with no dependencies.
-SunEditor supports IE11 and all modern browsers with no dependencies and polyfill.
-Coded based on ES5 in supported by IE11.
+Vanilla javscript based WYSIWYG web editor.
+SunEditor supports all modern browsers except IE without any dependencies and polyfills.
 
-#### Demo : <a href="http://suneditor.com" target="_blank">suneditor.com</a>
+#### 🌤 Demo : <a href="http://suneditor.com" target="_blank">suneditor.com</a> 🌤
+
+⭐ If you would like to contribute, please refer to [guidelines](/CONTRIBUTING.md) and a list of [open tasks](https://github.com/jihong88/suneditor/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).⭐
 
 [![GitHub](https://img.shields.io/github/license/jihong88/suneditor.svg?style=flat-square)](https://github.com/JiHong88/SunEditor/blob/master/LICENSE.txt)
 [![GitHub release](https://img.shields.io/github/release/jihong88/suneditor.svg?style=flat-square)](https://github.com/JiHong88/SunEditor/releases)
 [![npm version](https://img.shields.io/npm/v/suneditor.svg?style=flat-square)](https://www.npmjs.com/package/suneditor)
-[![bower version](https://img.shields.io/bower/v/suneditor.svg?style=flat-square)](https://github.com/JiHong88/SunEditor/releases/latest)
 [![](https://data.jsdelivr.com/v1/package/npm/suneditor/badge)](https://www.jsdelivr.com/package/npm/suneditor)
 [![npm](https://img.shields.io/npm/dt/suneditor.svg?style=flat-square)](https://www.npmjs.com/package/suneditor)
 ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/suneditor.svg?style=flat-square)
@@ -22,7 +22,7 @@ Coded based on ES5 in supported by IE11.
 
 ![WYSIWYG HTML Editor](http://suneditor.com/docs/screen-main-w.png?v=2700)
 
-## Table of contents
+## Table of content
 - [Browser Support](#browser-support)
 - [Install](#install)
 - [Getting Started](#getting-started)
@@ -30,7 +30,6 @@ Coded based on ES5 in supported by IE11.
 - [Use import statement](#use-import-statement)
     - [Load only what you want](#1-load-only-what-you-want)
     - [Load all plugins](#2-load-all-plugins)
-    - [Plugins can be used directly in the button list](#3-plugins-can-be-used-directly-in-the-button-list)
 - [Init function](#init-function)
 - [Use CodeMirror](#use-codemirror)
 - [Use KaTeX (math plugin)](#use-katex-math-plugin)
@@ -54,25 +53,21 @@ Coded based on ES5 in supported by IE11.
 
 | <img src="http://suneditor.com/docs/chrome-64.png" alt="Chrome" width="16px" height="16px" /> Chrome | <img src="http://suneditor.com/docs/mozilla-64.png" alt="Firefox" width="16px" height="16px" /> Firefox | <img src="http://suneditor.com/docs/opera-64.png" alt="Opera" width="16px" height="16px" /> Opera | <img src="http://suneditor.com/docs/safari-64.png" alt="Safari" width="16px" height="16px" /> Safari | <img src="http://suneditor.com/docs/edge-64.png" alt="Edge" width="16px" height="16px" /> Edge | <img src="http://suneditor.com/docs/explorer-64.png" alt="Explorer" width="16px" height="16px" /> Internet Explorer |
 |:---:|:---:|:---:|:---:|:---:|:---:|
-| Yes | Yes | Yes | Yes | Yes | 11+ |
+| Yes | Yes | Yes | Yes | Yes | 11 |
 
 ## Install
 #### Npm
 ``` sh
 $ npm install suneditor --save
 ```
-#### Bower
-``` sh
-$ bower install suneditor --save
-```
 #### CDN
 ``` html
 <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
-<!-- <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/assets/css/suneditor.css" rel="stylesheet"> -->
-<!-- <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/assets/css/suneditor-contents.css" rel="stylesheet"> -->
+<!-- <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/assets/suneditor.css" rel="stylesheet"> -->
+<!-- <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/assets/suneditor-content.css" rel="stylesheet"> -->
 <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
 <!-- languages (Basic Language: English/en) -->
-<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/lang/ko.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/langs/ko.js"></script>
 ```
 [jsdelivr/suneditor](https://www.jsdelivr.com/package/npm/suneditor)
 
@@ -97,19 +92,19 @@ const editor = SUNEDITOR.create((document.getElementById('sample') || 'sample'),
 });
 ```
 
-### 3. Contents display
+### 3. Content display
 ```java
 When you display a document created by suneditor
-You need to include "src/assets/css/suneditor-contents.css" or "dist/css/suneditor.min.css" file.
+You need to include "src/assets/suneditor-content.css" or "dist/css/suneditor.min.css" file.
 Then add "sun-editor-editable" to the class name of the Tag element that displays the content.
 If you are using RTL mode, you also need to add "se-rtl".
-In "suneditor-contents.css", you can define the style of all the tags created in suneditor.
+In "suneditor-content.css", you can define the style of all the tags created in suneditor.
 ```
 
 ## When inserting custom tags in the editor
 ```text
 - Empty tags without meaning or tags that do not fit the editor's format are modified or deleted.
-    Tags with the class name "se-component" or "__se__tag" of the top-level tag will not be deleted.
+    Tags with the class name "se-component" or "__se__block" of the top-level tag will not be deleted.
         "se-component" is the component type of the editor.
         Class name for wrapper tags such as images and videos.
 ```
@@ -119,19 +114,19 @@ In "suneditor-contents.css", you can define the style of all the tags created in
 ### 1. Load only what you want
 ```javascript
 import 'suneditor/dist/css/suneditor.min.css'
-// import 'suneditor/assets/css/suneditor.css'
-// import 'suneditor/assets/css/suneditor-contents.css'
+// import 'suneditor/assets/suneditor.css'
+// import 'suneditor/assets/suneditor-content.css'
 import suneditor from 'suneditor'
 
 // How to import plugins
-import image from 'suneditor/src/plugins/dialog/link'
-import list from 'suneditor/src/plugins/submenu/list'
+import image from 'suneditor/src/plugins/modal/link'
+import list from 'suneditor/src/plugins/dropdown/list'
 import {font, video} from 'suneditor/src/plugins'
 
 // How to import language files (default: en)
-import lang from 'suneditor/src/lang'
-import {ko} from 'suneditor/src/lang'
-import de from 'suneditor/src/lang/de'
+import lang from 'suneditor/src/langs'
+import {ko} from 'suneditor/src/langs'
+import de from 'suneditor/src/langs/de'
 
 suneditor.create('sample', {
     plugins: [font, video, image, list],
@@ -155,44 +150,19 @@ suneditor.create('sample', {
         ['font', 'fontSize', 'formatBlock'],
         ['paragraphStyle', 'blockquote'],
         ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
-        ['fontColor', 'hiliteColor', 'textStyle'],
+        ['fontColor', 'backgroundColor', 'textStyle'],
         ['removeFormat'],
         '/', // Line break
         ['outdent', 'indent'],
-        ['align', 'horizontalRule', 'list', 'lineHeight'],
+        ['align', 'horizontalLine', 'list', 'lineHeight'],
         ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
         /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
         ['fullScreen', 'showBlocks', 'codeView'],
         ['preview', 'print'],
-        ['save', 'template'],
+        ['save', 'template', 'layout'],
         /** ['dir', 'dir_ltr', 'dir_rtl'] */ // "dir": Toggle text direction, "dir_ltr": Right to Left, "dir_rtl": Left to Right
     ]
 })
-
-// You can also load what you want
-suneditor.create('sample', {
-    plugins: [plugins.font],
-    // Plugins can be used directly in the button list
-    buttonList: [
-        ['font', plugins.image]
-    ]
-})
-```
-
-### 3. Plugins can be used directly in the button list
-```javascript
-import 'suneditor/dist/css/suneditor.min.css'
-import suneditor from 'suneditor'
-import {align, font, fontSize, fontColor, hiliteColor, 
-        horizontalRule, image, template} from 'suneditor/src/plugins'
-
-suneditor.create('sample', {
-    buttonList: [
-        ['undo', 'redo', 'removeFormat'],
-        [align, font, fontSize, fontColor, hiliteColor],
-        [horizontalRule, image, template]
-    ],
-})
 ```
 
 ## Init function
@@ -215,14 +185,14 @@ const initEditor = suneditor.init({
         'font', 'fontSize', 'formatBlock',
         'paragraphStyle', 'blockquote',
         'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',
-        'fontColor', 'hiliteColor', 'textStyle',
+        'fontColor', 'backgroundColor', 'textStyle',
         'removeFormat',
         'outdent', 'indent',
-        'align', 'horizontalRule', 'list', 'lineHeight',
+        'align', 'horizontalLine', 'list', 'lineHeight',
         'table', 'link', 'image', 'video', 'audio', /** 'math', */ // You must add the 'katex' library at options to use the 'math' plugin.
         /** 'imageGallery', */ // You must add the "imageGalleryUrl".
         'fullScreen', 'showBlocks', 'codeView',
-        'preview', 'print', 'save', 'template',
+        'preview', 'print', 'save', 'template', 'layout',
         /** 'dir', 'dir_ltr', 'dir_rtl' */ // "dir": Toggle text direction, "dir_ltr": Right to Left, "dir_rtl": Left to Right
         ]
     ]
@@ -340,10 +310,10 @@ let editor = suneditor.create('sample', {
 })
 
 // if you would like to have this triggered when pressing @
-editor.core.callPlugin('mention');
+editor.core.registerPlugin('mention');
 editor.onKeyDown = e => {
   if (e.key === '@') {
-    editor.core.context.mention.open();
+    editor.core.mention.open();
     e.preventDefault();
     e.stopPropagation();
   }
@@ -359,21 +329,21 @@ let newMentions = editor.core.getMentions();
 plugins: [
     /** command */
     blockquote,
-    /** Submenu */
+    /** Dropdown */
     align,
     font,
     fontColor,
     fontSize,
     formatBlock,
-    hiliteColor,
-    horizontalRule,
+    backgroundColor,
+    horizontalLine,
     lineHeight,
     list,
     paragraphStyle,
     table,
     template,
     textStyle,
-    /** Dialog */
+    /** Modal */
     image,
     link,
     video,
@@ -393,89 +363,88 @@ plugins: [
 // Values
 strictMode      : Option to disable clean mode, which checks the styles, classes, etc. of the editor content.   default : false {Boolean}
 lang            : language object.   default : en {Object}
-defaultTag      : Specifies default tag name of the editor.     default: 'p' {String}
-textTags        : You can change the tag of the default text button.   default: { bold: 'STRONG', underline: 'U', italic: 'EM', strike: 'DEL' }
+defaultLine      : Specifies default tag name of the editor.     default: 'p' {string}
+convertTextTags        : You can change the tag of the default text button.   default: { bold: 'STRONG', underline: 'U', italic: 'EM', strike: 'DEL' }
                   ex) {
                       bold: 'b',
                       strike: 's'
                   }
 value           : Initial value(html string) of the edit area.
-                  If not, the value of the "target textarea".   default: null {String}
-allowedClassNames  : Specifies the allowed class name, It can be specified in the form of a regular expression.
-                     Appended before the "default" value. (`${option}|${defaultValue}`)     default: '^se-|__se__|katex';
-historyStackDelayTime : When recording the history stack, this is the delay time(miliseconds) since the last input.  default: 400 {Number}
-frameAttrbutes  : Specifies the properties of the editing area DIV.     default: {} {Object}
+                  If not, the value of the "target textarea".   default: null {string}
+historyStackDelayTime : When recording the history stack, this is the delay time(miliseconds) since the last input.  default: 400 {number}
+editableFrameAttributes  : Specifies the properties of the editing area DIV.     default: {} {Object}
                   ex)  {
                     "spellcheck": false
                   }
+allowedClassNames  : Specifies the allowed class name, It can be specified in the form of a regular expression.
+                     Appended before the "default" value. (`${option}|${defaultValue}`)     default: '^se-|__se__|katex';
 
 // Whitelist, Blacklist -----------------------------------------------------------------------------------------
 // (You can use regular expression syntax.)
-// _defaultTagsWhitelist : 'br|p|div|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary'
-addTagsWhitelist      : Add tags to the default tags whitelist of editor.   default: '' {String}
+// __defaultElementWhitelist : 'br|p|div|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary'
+elementWhitelist      : Add tags to the default tags whitelist of editor.   default: '' {string}
                         ex) 'mark|canvas|label|select|option|input|//' // "//" This means HTML comments.
                         ex) '*' // This means all tags are allowed. (Not available on "blacklist")
-tagsBlacklist         : Blacklist of the editor default tags.               default: null {String}
+elementBlacklist         : Blacklist of the editor default tags.               default: null {string}
                         ex) 'h1|h2'
-// _editorTagsWhitelist  : _defaultTagsWhitelist + addTagsWhitelist - tagsBlacklist
-pasteTagsWhitelist    : Whitelist of tags when pasting.                     default: _editorTagsWhitelist {String}
-                        ex) 'p|h1|h2|h3'
-                        ex) '*' // This means all tags are allowed. (Not available on "blacklist")
-pasteTagsBlacklist    : Blacklist of tags when pasting.                     default: null {String}
-                        ex) 'h1|h2'
-attributesWhitelist   : Add attributes whitelist of tags that should be kept undeleted from the editor.   default: null {Object}
+attributeWhitelist   : Add attributes whitelist of tags that should be kept undeleted from the editor.   default: null {Object}
                         // -- Fixed whitelist --
                         // Native attributes: 'contenteditable|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls'
-                        // Editor attributes: 'data-format|data-size|data-file-size|data-file-name|data-origin|data-align|data-image-link|data-rotate|data-proportion|data-percentage|origin-size|data-exp|data-font-size'
+                        // Editor attributes: 'data-se-*'
                         ex) {
-                            'all': 'style|data-.+', // Apply to all tags
+                            '*': 'style|data-.+', // Apply to all tags
                             'input': 'checked|name' // Apply to input tag
                             '???': '*' // "*" === all attributes
                         }
-attributesBlacklist   : Add attribute blacklist of tags that should be deleted in editor.   default: null {Object}
+attributeBlacklist   : Add attribute blacklist of tags that should be deleted in editor.   default: null {Object}
                         ex) {
-                            'all': 'id', // Apply to all tags
+                            '*': 'id', // Apply to all tags
                             'input': 'style' // Apply to input tag
                             '???': '*' // "*" === all attributes
                         }
+tagStyles        : Add the allowable style items for each tag.      default: {'table|td|th':'border|border-[a-z]+|background-color|text-align|float'}
+                      ex) {
+                          'h1': 'id', // Apply to h1 tag
+                        }
+spanStyles    : Add the span tag style
 // Layout-------------------------------------------------------------------------------------------------------
-mode            : The mode of the editor ('classic', 'inline', 'balloon', 'balloon-always'). default: 'classic' {String}
+mode            : The mode of the editor ('classic', 'inline', 'balloon', 'balloon-always'). default: 'classic' {string}
 rtl             : If true, the editor is set to RTL(Right To Left) mode.   default: false {Boolean}
 lineAttrReset   : Deletes other attributes except for the property set at the time of line break.
-                  If there is no value, no all attribute is deleted.    default: '' {String}
+                  If there is no value, no all attribute is deleted.    default: '' {string}
                   ex) 'class|style': Attributes other than "class" and "style" are deleted at line break.
                       '*': All attributes are deleted at line break.
-toolbarWidth    : The width of the toolbar. Applies only when the editor mode is 
+toolbar_width    : The width of the toolbar. Applies only when the editor mode is 
                   'inline' or 'balloon' mode.     default: 'auto' {Number|String}
-toolbarContainer: A custom HTML selector placing the toolbar inside.
+toolbar_container: A custom HTML selector placing the toolbar inside.
                   The class name of the element must be 'sun-editor'.
                   Element or querySelector argument.     default: null {Element|String}
                   ex) document.querySelector('#id') || '#id'
-stickyToolbar   : Top offset value of "sticky toolbar".
+toolbar_sticky   : Top offset value of "sticky toolbar".
                   Set to 0, '0px', '50px'...
                   If set to -1 or false or null to turn off.        default: 0 {Number|String|Boolean}
-hideToolbar     : The toolbar is rendered hidden.                   default: false {Boolean}
+toolbar_hide     : The toolbar is rendered hidden.                   default: false {Boolean}
 fullScreenOffset: Top offset value of "full Screen".
                   Set to 0, '0px', '50px'...     default: 0 {Number|String}
 iframe          : Content will be placed in an iframe and isolated from the rest of the page.  default: false {Boolean}
-fullPage        : Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration.  default: false {Boolean}
-iframeAttributes  : Attributes of the iframe.                       default: null {Object}
+iframe_fullPage        : Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration.  default: false {Boolean}
+iframe_attributes  : Attributes of the iframe.                       default: null {Object}
                     ex) {'scrolling': 'no'}
-iframeCSSFileName : Name or Array of the CSS file to apply inside the iframe.
+iframe_cssFileName : Name or Array of the CSS file to apply inside the iframe.
                     You can also use regular expressions.
                     Applied by searching by filename in the link tag of document,
                     or put the URL value (".css" can be omitted).   default: 'suneditor' {Array|String}
                     ex) '.+' or ['suneditor', 'http://suneditor.com/sample/css/sample.css', '.+\\.min\\.css']
 previewTemplate : A template of the "preview".
-                  The {{contents}} part in the HTML string is replaced with the contents of the editor. default: null {String}
-                  ex) "<div style='width:auto; max-width:1080px; margin:auto;'><h1>Preview Template</h1> {{contents}} <div>_Footer_</div></div>"
+                  The {content} part in the HTML string is replaced with the content of the editor. default: null {string}
+                  ex) "<div style='width:auto; max-width:1080px; margin:auto;'><h1>Preview Template</h1> {content} <div>_Footer_</div></div>"
 printTemplate   : A template of the "print".
-                  The {{contents}} part in the HTML string is replaced with the contents of the editor. default: null {String}
-                  ex) "<div style='width:auto; max-width:1080px; margin:auto;'><h1>Print Template</h1> {{contents}} <div>_Footer_</div></div>"
-codeMirror      : If you put the CodeMirror object as an option, you can do Codeview using CodeMirror. default: null {Object}
+                  The {content} part in the HTML string is replaced with the content of the editor. default: null {string}
+                  ex) "<div style='width:auto; max-width:1080px; margin:auto;'><h1>Print Template</h1> {content} <div>_Footer_</div></div>"
+codeMirror     : https://codemirror.net/try/
+codeMirror     : If you put the CodeMirror object as an option, you can do Codeview using CodeMirror. default: null {Object}
                   Use version 5.x.x // https://github.com/codemirror/CodeMirror
-                  ex) codeMirror: CodeMirror // Default option
-                      codeMirror: { // Custom option
+                      codeMirror5: { // Custom option
                         src: CodeMirror,
                         options: {
                             /** default options **
@@ -488,7 +457,6 @@ codeMirror      : If you put the CodeMirror object as an option, you can do Code
                       }
 katex           : Required library for math plugins.               default: null {Object}
                   Use version 0.x.x // https://github.com/KaTeX/KaTeX
-                  ex) katex: katex // Default option
                       katex: { // Custom option
                         src: katex,
                         options: {
@@ -505,31 +473,26 @@ mathFontSize    : Math plugin font size list.                       default: [{.
                     {text: '2.5', value: '2.5em'}
                   ]
 
-// Display-------------------------------------------------------------------------------------------------------
-position        : The position property of suneditor.               default: null {String}
-display         : The display property of suneditor.                default: 'block' {String}
-popupDisplay    : Size of background area when activating dialog window ('full'||'local') default: 'full' {String}
-
-// Bottom resizing bar-------------------------------------------------------------------------------------------
-resizingBar     : Show the bottom resizing bar.
+// Statusbar-------------------------------------------------------------------------------------------
+statusbar     : Show the bottom resizing bar.
                   If 'height' value is 'auto', it will not be resized. default: true {Boolean}
-showPathLabel   : Displays the current node structure to resizingBar.  default: true {Boolean}
-resizeEnable  : Enable/disable resize function of bottom resizing bar.   default: true {Boolean}
-resizingBarContainer: A custom HTML selector placing the resizing bar inside.
+statusbar_showPathLabel   : Displays the current node structure to statusbar.  default: true {Boolean}
+statusbar_resizeEnable  : Enable/disable resize function of bottom resizing bar.   default: true {Boolean}
+statusbar_container: A custom HTML selector placing the resizing bar inside.
                       The class name of the element must be 'sun-editor'.
                       Element or querySelector argument.     default: null {Element|String}
                       ex) document.querySelector('#id') || '#id'
 
 // Character count-----------------------------------------------------------------------------------------------
 charCounter     : Shows the number of characters in the editor.     
-                  If the maxCharCount option has a value, it becomes true. default: false {Boolean}
-charCounterType : Defines the calculation method of the "charCounter" option.
+                  If the charCounter_max option has a value, it becomes true. default: false {boolean}
+charCounter_type : Defines the calculation method of the "charCounter" option.
                   'char': Characters length.
                   'byte': Binary data size of characters.
-                  'byte-html': Binary data size of the full HTML string.   default: 'char' {String}
-charCounterLabel: Text to be displayed in the "charCounter" area of the bottom bar.
-                  Screen ex) 'charCounterLabel : 20/200'.           default: null {String}
-maxCharCount    : The maximum number of characters allowed to be inserted into the editor. default: null {Number}
+                  'byte-html': Binary data size of the full HTML string.   default: 'char' {string}
+charCounter_label: Text to be displayed in the "charCounter" area of the bottom bar.
+                  Screen ex) 'charCounter_label : 20/200'.           default: null {string}
+charCounter_max    : The maximum number of characters allowed to be inserted into the editor. default: null {number}
 
 // Width size----------------------------------------------------------------------------------------------------
 width           : The width size of the editor.                     default: clientWidth||'100%' {Number|String}
@@ -546,10 +509,10 @@ maxHeight       : The max-height size of the editor.
                   Used when 'height' value is 'auto'.               default: null {Number|String}
 
 // Editing area -------------------------------------------------------------------------------------------------
-className       : Add a "class" to the editing area[.sun-editor-editable].    default: '' {String}
-defaultStyle    : You can define the style of the editing area[.sun-editor-editable].
-                  It affects the entire editing area.               default: '' {String}
-                  ('z-index', 'position' and 'width' properties apply to the top div.)
+className       : Add a "class" to the editing area[.sun-editor-editable].    default: '' {string}
+editorStyle    : You can define the style of the editing area[.sun-editor-editable].
+                  It affects the entire editing area.               default: '' {string}
+                  ('z-index', 'position', 'display', 'width' properties apply to the top div.)
                   ex) 'font-family: cursive; font-size: 10px;'
 
 // Defining menu items-------------------------------------------------------------------------------------------
@@ -562,21 +525,21 @@ fontSize        : Change default font-size array.                   default: [..
                   Default value: [
                     8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72
                   ]
-fontSizeUnit    : The font size unit.                               default: 'px' {String}
+fontSizeUnit    : The font size unit.                               default: 'px' {string}
 alignItems      : A list of drop-down options for the 'align' plugin.   default: rtl === true ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'] {Array}
 formats         : Change default formatBlock array.                 default: [...] {Array}
                   Default value: [
                     'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
-                    // "blockquote": range format, "pre": free format, "Other tags": replace format
+                    // "blockquote": block, "pre": brBlock, "Other tags": line
                   ],
                   Custom: [{
                     tag: 'div', // Tag name
                     name: 'Custom div' || null, // default: tag name
-                    command: 'replace' || 'range' || 'free', // default: "replace"
-                    class: '__se__format__replace_xxx' || '__se__format__range_xxx' || '__se__format__free_xxx' || '__se__format__free__closure_xxx'
-                    // Class names must always begin with "__se__format__(replace, range, free)_"
+                    command: 'line' || 'br-line' || 'block', // default: "replace"
+                    class: '__se__format__line_xxx' || '__se__format__br_line_xxx' || '__se__format__block_xxx' || '__se__format__br_line_closure_xxx' || '__se__format__block_closure_xxx'
+                    // Class names must always begin with "__se__format__(line, br_line, block)_"
                   }]
-colorList       : Change default color array of color picker.       default: [..[..]..] {Array}
+colorList_font, colorList_background    : Change default color array of color picker.       default: [..[..]..] {Array}
                   Default value: [
                     '#ff0000', '#ff5e00', '#ffe400', '#abf200', '#00d8ff', '#0055ff', '#6600ff', '#ff00dd', '#000000',
                     '#ffd8d8', '#fae0d4', '#faf4c0', '#e4f7ba', '#d4f4fa', '#d9e5ff', '#e8d9ff', '#ffd9fa', '#f1f1f1',
@@ -625,7 +588,7 @@ paragraphStyles : You can apply custom class to format.
                           class: '__se__customClass'
                       }
                   ]
-textStyles      : You can apply custom style or class to selected text.
+textStyles      : You can apply custom class to selected text.
                   ex(using a class)) '.sun-editor-editable .__se__customClass'
                                      '.sun-editor .__se__customClass' // If you want to apply styles to menu items as well
                   Default value: [
@@ -634,42 +597,28 @@ textStyles      : You can apply custom style or class to selected text.
                         class: '__se__t-code',
                         tag: 'code',
                     },
-                    {
-                        name: 'Translucent', // Text style name
-                        style: 'opacity: 0.5;', // Style query
-                        tag: 'span', // Style tag name (default: span)
-                        _class: '' // You can control the style of the tags displayed in the menu by putting a class on the button of the menu.
-                    },
                     {
                         name: 'Shadow',
                         class: '__se__t-shadow', // Class names (Class names must always begin with "__se__")
                         tag: 'span'
                     }
                   ]
-                  ex) [
-                      'Code', // The default value is called by name only and the name is called in the language file.
-                      {
-                          name: 'Emphasis',
-                          style: '-webkit-text-emphasis: filled;',
-                          tag: 'span'
-                      }
-                  ]
 
 // Image---------------------------------------------------------------------------------------------------------
 imageResizing   : Can resize the image.                               default: true {Boolean}
 imageHeightShow : Choose whether the image height input is visible.   default: true {Boolean}
 imageAlignShow  : Choose whether the image align radio buttons are visible.       default: true {Boolean}
-imageWidth      : The default width size of the image frame.          default: 'auto' {String}
-imageHeight     : The default height size of the image frame.         default: 'auto' {String}
+imageWidth      : The default width size of the image frame.          default: 'auto' {string}
+imageHeight     : The default height size of the image frame.         default: 'auto' {string}
 imageSizeOnlyPercentage : If true, image size can only be scaled by percentage.   default: false {Boolean}
 imageRotation   : Choose whether to image rotation buttons display.
                   When "imageSizeOnlyPercentage" is "true" or  or "imageHeightShow" is "false" the default value is false.                       
-                  If you want the button to be visible, put it a true.     default: true {Boolean}
-imageFileInput  : Choose whether to create a file input tag in the image upload window.  default: true {Boolean}
+                  If you want the button to be visible, put it a true.     default: true {boolean}
+imageFileInput  : Choose whether to create a file input tag in the image upload window.  default: true {boolean}
 imageUrlInput   : Choose whether to create a image url input tag in the image upload window.
-                  If the value of imageFileInput is false, it will be unconditionally.   default: true {Boolean}
+                  If the value of imageFileInput is false, it will be unconditionally.   default: true {boolean}
 imageUploadHeader : Http Header when uploading images.              default: null {Object}
-imageUploadUrl  : The image upload to server mapping address.       default: null {String}
+imageUploadUrl  : The image upload to server mapping address.       default: null {string}
                   (When not used the "imageUploadUrl" option, image is enters base64 data)
                   ex) "/editor/uploadImage"
                   request format: {
@@ -687,14 +636,14 @@ imageUploadUrl  : The image upload to server mapping address.       default: nul
                             ]
                         }
 imageUploadSizeLimit: The size of the total uploadable images (in bytes).
-                      Invokes the "onImageUploadError" method.  default: null {Number}
-imageMultipleFile: If true, multiple images can be selected.    default: false {Boolean}
-imageAccept      : Define the "accept" attribute of the input.  default: "*" {String}
+                      Invokes the "onImageUploadError" method.  default: null {number}
+imageMultipleFile: If true, multiple images can be selected.    default: false {boolean}
+imageAccept      : Define the "accept" attribute of the input.  default: "*" {string}
                    ex) "*" or ".jpg, .png .."
 // Image - image gallery
 imageGalleryUrl     : The url of the image gallery, if you use the image gallery.
                       When "imageUrlInput" is true, an image gallery button is created in the image modal.
-                      You can also use it by adding "imageGallery" to the button list.   default: null {String}
+                      You can also use it by adding "imageGallery" to the button list.   default: null {string}
                       ex) "/editor/getGallery"
                       response format: {
                             "result": [
@@ -717,12 +666,12 @@ videoResizing   : Can resize the video (iframe, video).
 videoHeightShow : Choose whether the video height input is visible.    default: true {Boolean}
 videoAlignShow  : Choose whether the video align radio buttons are visible.       default: true {Boolean}
 videoRatioShow  : Choose whether the video ratio options is visible.   default: true {Boolean}
-videoWidth      : The default width size of the video frame.           default: '100%' {String}
-videoHeight     : The default height size of the video frame.          default: '56.25%' {String}
+videoWidth      : The default width size of the video frame.           default: '100%' {string}
+videoHeight     : The default height size of the video frame.          default: '56.25%' {string}
 videoSizeOnlyPercentage : If true, video size can only be scaled by percentage.   default: false {Boolean}
 videoRotation   : Choose whether to video rotation buttons display.
                   When "videoSizeOnlyPercentage" is "true" or "videoHeightShow" is "false" the default value is false.
-                  If you want the button to be visible, put it a true.     default: true {Boolean}
+                  If you want the button to be visible, put it a true.     default: true {boolean}
 videoRatio      : The default aspect ratio of the video.
                   Up to four decimal places are allowed.             default: 0.5625 (16:9) {Float}
 videoRatioList  : Video ratio selection options.
@@ -735,15 +684,15 @@ videoRatioList  : Video ratio selection options.
                     {name: 'Classic Film 3:2', value: 0.6666},
                     {name: 'HD', value: 0.5625}
                   ]
-youtubeQuery    : The query string of a YouTube embedded URL.        default: '' {String}
+youtubeQuery    : The query string of a YouTube embedded URL.        default: '' {string}
                   It takes precedence over the value user entered.
                   ex) 'autoplay=1&mute=1&enablejsapi=1&controls=0&rel=0&modestbranding=1'
                     // https://developers.google.com/youtube/player_parameters
-videoFileInput  : Choose whether to create a file input tag in the video upload window.  default: false {Boolean}
+videoFileInput  : Choose whether to create a file input tag in the video upload window.  default: false {boolean}
 videoUrlInput   : Choose whether to create a video url input tag in the video upload window.
-                  If the value of videoFileInput is false, it will be unconditionally.   default: true {Boolean}
+                  If the value of videoFileInput is false, it will be unconditionally.   default: true {boolean}
 videoUploadHeader : Http Header when uploading videos.              default: null {Object}
-videoUploadUrl  : The video upload to server mapping address.       default: null {String}
+videoUploadUrl  : The video upload to server mapping address.       default: null {string}
                   ex) "/editor/uploadVideo"
                   request format: {
                             "file-0": File,
@@ -761,23 +710,23 @@ videoUploadUrl  : The video upload to server mapping address.       default: nul
                             ]
                         }
 videoUploadSizeLimit: The size of the total uploadable videos (in bytes).
-                      Invokes the "onVideoUploadError" method.  default: null {Number}
-videoMultipleFile: If true, multiple videos can be selected.    default: false {Boolean}
+                      Invokes the "onVideoUploadError" method.  default: null {number}
+videoMultipleFile: If true, multiple videos can be selected.    default: false {boolean}
 videoTagAttrs    : Define "Attributes" of the video tag.                      default: null {Object} 
                    ex) { poster: "http://suneditor.com/docs/loading.gif", autoplay: true }
 videoIframeAttrs : Define "Attributes" of the iframe tag. (Youtube, Vimeo).   default: null {Object}
                    ex) { style: "border: 2px solid red;" }
-videoAccept      : Define the "accept" attribute of the input.  default: "*" {String}
+videoAccept      : Define the "accept" attribute of the input.  default: "*" {string}
                    ex) "*" or ".mp4, .avi .."
 
 // Audio----------------------------------------------------------------------------------------------------------
-audioWidth      : The default width size of the audio frame.        default: '300px' {String}
-audioHeight     : The default height size of the audio frame.       default: '54px' {String}
-audioFileInput  : Choose whether to create a file input tag in the audio upload window.  default: false {Boolean}
+audioWidth      : The default width size of the audio frame.        default: '300px' {string}
+audioHeight     : The default height size of the audio frame.       default: '54px' {string}
+audioFileInput  : Choose whether to create a file input tag in the audio upload window.  default: false {boolean}
 audioUrlInput   : Choose whether to create a audio url input tag in the audio upload window.
-                  If the value of audioFileInput is false, it will be unconditionally.   default: true {Boolean}
+                  If the value of audioFileInput is false, it will be unconditionally.   default: true {boolean}
 audioUploadHeader : Http Header when uploading audios.              default: null {Object}
-audioUploadUrl  : The audio upload to server mapping address.       default: null {String}
+audioUploadUrl  : The audio upload to server mapping address.       default: null {string}
                   ex) "/editor/uploadAudio"
                   request format: {
                             "file-0": File,
@@ -795,21 +744,22 @@ audioUploadUrl  : The audio upload to server mapping address.       default: nul
                             ]
                         }
 audioUploadSizeLimit: The size of the total uploadable audios (in bytes).
-                      Invokes the "onAudioUploadError" method.  default: null {Number}
-audioMultipleFile: If true, multiple audios can be selected.    default: false {Boolean}
+                      Invokes the "onAudioUploadError" method.  default: null {number}
+audioMultipleFile: If true, multiple audios can be selected.    default: false {boolean}
 audioTagAttrs    : Define "Attributes" of the audio tag.        default: null {Object} 
                    ex) { controlslist: "nodownload", autoplay: true }
-videoAccept      : Define the "accept" attribute of the input.  default: "*" {String}
+videoAccept      : Define the "accept" attribute of the input.  default: "*" {string}
                    ex) "*" or ".mp3, .wav .."
 
 // Table----------------------------------------------------------------------------------------------------------
-tableCellControllerPosition : Define position to the table cell controller('cell', 'top'). default: 'cell' {String}
+tableCellControllerPosition : Define position to the table cell controller('cell', 'top'). default: 'cell' {string}
 
+// Url input
+defaultUrlProtocol    : Default protocol for the links. ('link', 'image', 'video', 'audio')
+                  This applies to all plugins that enter the internet url.   default: null {string}
+                  
 // Link-----------------------------------------------------------------------------------------------------------
 linkTargetNewWindow : Default checked value of the "Open in new window" checkbox.   default: false {Boolean}
-linkProtocol    : Default protocol for the links. ('link', 'image', 'video', 'audio')
-                  This applies to all plugins that enter the internet url.   default: null {String}
-linkRel         : Defines "rel" attribute list of anchor tag.   default: [] {Array}
                   // https://www.w3schools.com/tags/att_a_rel.asp
                   ex) [
                     'author',
@@ -835,28 +785,29 @@ linkRelDefault  : Defines default "rel" attributes of anchor tag.   default: {}
                     linkRelDefault: {
                         check_new_window: 'only:noreferrer noopener'
                     }
+linkRel         : Defines "rel" attribute list of anchor tag.   default: [] {Array}
 linkNoPrefix   : If true, disables the automatic prefixing of the host URL to the value of the link. default: false {Boolean}
 
 // HR----------------------------------------------------------------------------------------------------
 hrItems         : Defines the hr items.
                   "class" or "style" must be specified.
                   default: [
-                      {name: lang.toolbar.hr_solid, class: '__se__solid'},
-                      {name: lang.toolbar.hr_dashed, class: '__se__dashed'},
-                      {name: lang.toolbar.hr_dotted, class: '__se__dotted'}
+                      {name: lang.hr_solid, class: '__se__solid'},
+                      {name: lang.hr_dashed, class: '__se__dashed'},
+                      {name: lang.hr_dotted, class: '__se__dotted'}
                   ]
                   ex) [ {name: "Outset", style: "border-style: outset;"} ]
 
 
 // Key actions----------------------------------------------------------------------------------------------------
-tabDisable      : If true, disables the interaction of the editor and tab key.  default: false {Boolean}
+tabDisable      : If true, disables the interaction of the editor and tab key.  default: false {boolean}
 shortcutsDisable: You can disable shortcuts.    default: [] {Array}
                   ex) ['bold', 'strike', 'underline', 'italic', 'undo', 'indent', 'save']
-shortcutsHint   : If false, hide the shortcuts hint.    default: true {Boolean}
+shortcutsHint   : If false, hide the shortcuts hint.    default: true {boolean}
 
 // Defining save button-------------------------------------------------------------------------------------------
 callBackSave    : Callback functions that is called when the Save button is clicked. 
-                  Arguments - (contents, isChanged).                            default: functions.save {Function}
+                  Arguments - (content, isChanged).                            default: editorInstance.save {Function}
 
 // Templates Array------------------------------------------------------------------------------------------------
 templates       : If you use a template plugin, add it.
@@ -871,11 +822,23 @@ templates       : If you use a template plugin, add it.
                         html: '<p>HTML source2</p>'
                     }
                   ]
+layouts       : If you use a layout plugin, add it.
+                  Defines a list of templates.                       default: null {Array} 
+                  ex) [
+                    {
+                        name: 'Template-1',
+                        html: '<p>HTML source1</p>'
+                    },
+                    {
+                        name: 'Template-2',
+                        html: '<p>HTML source2</p>'
+                    }
+                  ]
 
 // ETC------------------------------------------------------------------------------------------------------------
 __allowedScriptTag  : Allows script tags.                            default: false {Boolean}
-placeholder     : The placeholder text.                              default: null {String}
-mediaAutoSelect : Activate the media[image, video, audio] selection status immediately after inserting the media tag.  default: true {Boolean}
+placeholder     : The placeholder text.                              default: null {string}
+mediaAutoSelect : Activate the media[image, video, audio] selection status immediately after inserting the media tag.  default: true {boolean}
 icons           : You can redefine icons.                            default: null {Object}
                   ex) {
                       bold: '<span class="se-icon-text">B</span>',
@@ -890,15 +853,15 @@ buttonList      : Defines button list to array {Array}
                     // ['font', 'fontSize', 'formatBlock'],
                     // ['paragraphStyle', 'blockquote'],
                     ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
-                    // ['fontColor', 'hiliteColor', 'textStyle'],
+                    // ['fontColor', 'backgroundColor', 'textStyle'],
                     ['removeFormat'],
                     ['outdent', 'indent'],
-                    // ['align', 'horizontalRule', 'list', 'lineHeight'],
+                    // ['align', 'horizontalLine', 'list', 'lineHeight'],
                     // ['table', 'link', 'image', 'video', 'math'], // You must add the 'katex' library at options to use the 'math' plugin.
                     // ['imageGallery'], // You must add the "imageGalleryUrl".
                     ['fullScreen', 'showBlocks', 'codeView'],
                     ['preview', 'print'],
-                    // ['save', 'template'],
+                    // ['save', 'template', 'layout'],
                     // ['dir', 'dir_ltr', 'dir_rtl'],
                     // '/', Line break
                   ]
@@ -926,23 +889,24 @@ buttonList      : Defines button list to array {Array}
 
 ----------------- ex) More button: --------------------------------------------------------------------------------
                   // The more button is defined as a string starting with a colon.(":").
-                  // :Identifier - Title attribute - Button's innerHTML
+                  // :Title - Button's innerHTML
                   /**
-                   * "Identifier": The button's identifier. Please specify uniquely.
-                   * "Title attribute": Title attribute of the button to be displayed as a tooltip.
+                   * "Title": Title attribute of the button to be displayed as a tooltip.
+                   * * lang.[options.lang.key] -> Use the text of the "lang" option.
+                   * * xxx -> Text
                    * "Button's innerHTML": Define the button's "innerHTML".
-                   * default.xxx -> Use the attributes of "defaultIcons".
-                   * (more_text, more_paragraph, more_plus, more_horizontal, more_vertical)
-                   * text.xxx -> Use the text.
-                   * xxx -> HTML
+                   * * default.[defaultIcon] -> Use the attributes of "defaultIcons".
+                   * * * default.[more_text, more_paragraph, more_plus, more_horizontal, more_vertical]
+                   * * text.[xxx] -> Use the text.
+                   * * xxx -> HTML
                    */
                   [
                     ['undo', 'redo'],
-                    [':t-More Text-default.more_text', 'bold', 'underline', 'italic'],
-                    [':p-More Paragraph-default.more_paragraph', 'font', 'formatBlock', 'align', 'list'],
-                    [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video'],
-                    [':v-View-text.View', 'fullScreen', 'codeView', 'print'],
-                    ['-right', ':o-More Others-<i class="xxx"></i>', 'save', 'template'], // Used with alignment
+                    [':lang.option_lang_text-default.more_text', 'bold', 'underline', 'italic'],
+                    [':More Paragraph-default.more_paragraph', 'font', 'formatBlock', 'align', 'list'],
+                    [':More Rich-default.more_plus', 'table', 'link', 'image', 'video'],
+                    [':View-text.View', 'fullScreen', 'codeView', 'print'],
+                    ['-right', ':More Others-<i class="xxx"></i>', 'save', 'template', 'layout'], // Used with alignment
                   ]
                   
 ----------------- ex) Responsive setting: -------------------------------------------------------------------------
@@ -955,637 +919,42 @@ buttonList      : Defines button list to array {Array}
                     ['font', 'fontSize', 'formatBlock'],
                     ['paragraphStyle', 'blockquote'],
                     ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
-                    ['fontColor', 'hiliteColor', 'textStyle'],
+                    ['fontColor', 'backgroundColor', 'textStyle'],
                     ['removeFormat'],
                     ['outdent', 'indent'],
-                    ['align', 'horizontalRule', 'list', 'lineHeight'],
+                    ['align', 'horizontalLine', 'list', 'lineHeight'],
                     ['table', 'link', 'image', 'video', 'audio', 'math'],
                     ['imageGallery'],
                     ['fullScreen', 'showBlocks', 'codeView'],
                     ['preview', 'print'],
-                    ['save', 'template'],
+                    ['save', 'template', 'layout'],
                     ['-left', '#fix', 'dir_ltr', 'dir_rtl'],
                     // (min-width:992px)
                     ['%992', [
                         ['undo', 'redo'],
-                        [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                        [':More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                         ['bold', 'underline', 'italic', 'strike'],
-                        [':t-More Text-default.more_text', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
+                        [':More Text-default.more_text', 'subscript', 'superscript', 'fontColor', 'backgroundColor', 'textStyle'],
                         ['removeFormat'],
                         ['outdent', 'indent'],
-                        ['align', 'horizontalRule', 'list', 'lineHeight'],
+                        ['align', 'horizontalLine', 'list', 'lineHeight'],
                         ['-right', 'dir'],
-                        ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
-                        ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
+                        ['-right', ':More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template', 'layout'],
+                        ['-right', ':More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
                     ]],
                     // (min-width:768px)
                     ['%768', [
                         ['undo', 'redo'],
-                        [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
-                        [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
-                        [':e-More Line-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'lineHeight'],
-                        [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
+                        [':More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                        [':More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'backgroundColor', 'textStyle', 'removeFormat'],
+                        [':More Line-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalLine', 'list', 'lineHeight'],
+                        [':More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
                         ['-right', 'dir'],
-                        ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
+                        ['-right', ':More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template', 'layout']
                     ]]
                   ]
                   
 ```
 
-## Functions
-```javascript
-import suneditor from 'suneditor'
-
-const editor = suneditor.create('example');
-
-editor.core; // core object (The core object contains "util" and "functions".)
-editor.util; // util object
-
-// Reset the buttons on the toolbar. (Editor is not reloaded)
-// You cannot set a new plugin for the button.
-editor.setToolbarButtons([
-    [':moreText-More Text-default.more_horizontal', 'bold', 'underline', 'strike', 'subscript', 'superscript'],
-    ['undo', 'redo']
-]);
-
-// Add or reset option property. (Editor is reloaded)
-editor.setOptions({
-    minHeight: '300px',
-    buttonList: [
-        ['fontColor', 'hiliteColor']
-    ],
-    colorList: [
-        ['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown']
-    ]
-});
-
-// Set "options.defaultStyle" style.
-// Define the style of the edit area
-// It can also be defined with the "setOptions" method, but the "setDefaultStyle" method does not render the editor again.
-editor.setDefaultStyle('font-family: cursive; font-size: 10px;');
-
-// Open a notice area
-editor.noticeOpen('test notice');
-
-// Close a notice area
-editor.noticeClose();
-
-// Copies the contents of the suneditor into a [textarea]
-// * not working during enabled codeView mode
-editor.save();
-
-// Gets the suneditor's context object. Contains settings, plugins, and cached element objects
-editor.getContext();
-
-// Gets the contents of the suneditor
-// * not working during enabled codeView mode
-// onlyContents {Boolean}: Return only the contents of the body without headers when the "fullPage" option is true
-editor.getContents(onlyContents: Boolean);
-// Gets the current contents with containing parent div(div.sun-editor-editable).
-//  <div class="sun-editor-editable">{contents}</div>
-editor.getFullContents(onlyContents: Boolean);
-
-// Gets only the text of the suneditor contents
-// * not working during enabled codeView mode
-editor.getText();
-
-// Gets a list of images uploaded to the editor
-/** 
- * {
- *  element: image element
- *  src: imgage src
- *  index: data index
- *  name: file name
- *  size: file size
- *  select: select function
- *  delete: delete function
- * }
- **/
-editor.getImagesInfo();
-
-// Gets uploaded files(plugin using fileManager) information list.
-// image: [img], video: [video, iframe], audio: [audio]
-// When the argument value is 'image', it is the same function as "getImagesInfo".
-/** 
- * {
- *  element: image element
- *  src: imgage src
- *  index: data index
- *  name: file name
- *  size: file size
- *  select: select function
- *  delete: delete function
- * }
- * pluginName: Plugin name (image, video, audio)
- **/
-editor.getFilesInfo(pluginName);
-
-// Upload images using image plugin
-// document.getElementById('example_files_input').files
-editor.insertImage(FileList);
-
-// Inserts an HTML element or HTML string or plain string at the current cursor position
-/**
- * @param {Boolean} notCleaningData If true, inserts the HTML string without refining it with core.cleanHTML.
- * @param {Boolean} checkCharCount If true, if "options.maxCharCount" is exceeded when "element" is added, null is returned without addition.
- */
-editor.insertHTML('<img src="http://suneditor.com/sample/img/sunset.jpg">', true, true);
-
-// Change the contents of the suneditor
-editor.setContents('set contents');
-
-// Get the editor's number of characters or binary data size.
-// You can use the "charCounterType" option format.
-// If argument is no value, the currently set "charCounterType" option is used.
-editor.getCharCount((null || 'char' || 'byte' || 'byte-html'));
-
-// Add content to the suneditor
-editor.appendContents('append contents');
-
-// Switch to or off "ReadOnly" mode.
-editor.readOnly(true || false)
-
-// Disable the suneditor
-editor.disable();
-
-// Enable the suneditor
-editor.enable();
-
-// Hide the suneditor
-editor.hide();
-
-// Show the suneditor
-editor.show();
-    
-// Destroy the suneditor
-editor.destroy();
-
-// Toolbar methods
-// Disable the toolbar
-editor.toolbar.disable();
-
-// Enable the toolbar
-editor.toolbar.enable();
-
-// Hide the toolbar
-editor.toolbar.hide();
-
-// Show the toolbar
-editor.toolbar.show();
-
-// Event functions -------------------------------------------------------------------------------------
-// It can be redefined by receiving event object as parameter.
-// It is not called in exceptional cases and is called after the default event function has before finished.
-// e: event object, core: Core object
-editor.onScroll = function (e, core) { console.log('onScroll', e) }
-
-editor.onMouseDown = function (e, core) { console.log('onMouseDown', e) }
-
-editor.onClick = function (e, core) { console.log('onClick', e) }
-
-editor.onInput = function (e, core) { console.log('onInput', e) }
-
-editor.onKeyDown = function (e, core) { console.log('onKeyDown', e) }
-
-editor.onKeyUp = function (e, core) { console.log('onKeyUp', e) }
-
-editor.onFocus = function (e, core) { console.log('onFocus', e) }
-
-editor.onBlur = function (e, core) { console.log('onBlur', e) }
-
-// onchange event
-// contents: core.getContents(), Core object
-editor.onChange = function (contents, core) { console.log('onChange', contents) }
-
-// onload event
-// When reloaded with the "setOptions" method, the value of the "reload" argument is true.
-editor.onload = function (core, reload) {
-    console.log('onload-core', core)
-    console.log('onload-reload', reload)
-}
-
-// Clipboard event.
-// Called before the editor's default event action.
-// If it returns false, it stops without executing the rest of the action.
-/**
- * paste event
- * e: Event object
- * cleanData: HTML string modified for editor format
- * maxCharCount: maxChartCount option (true if max character is exceeded)
- * core: Core object
- */
-editor.onPaste = function (e, cleanData, maxCharCount, core) { console.log('onPaste', e) }
-
-// Copy event.
-// Called before the editor's default event action.
-// If it returns false, it stops without executing the rest of the action.
-/**
- * copy event
- * e: Event object
- * clipboardData: event.clipboardData
- * core: Core object
- */
-editor.onCopy = function (e, clipboardData, core) { console.log('onCopy', e) }
-
-// Cut event.
-// Called before the editor's default event action.
-// If it returns false, it stops without executing the rest of the action.
-/**
- * cut event
- * e: Event object
- * clipboardData: event.clipboardData
- * core: Core object
- */
-editor.onCut = function (e, clipboardData, core) { console.log('onCut', e) }
-
-// Drop event.
-// Called before the editor's default event action.
-// If it returns false, it stops without executing the rest of the action.
-/**
- * e: Event object
- * cleanData: HTML string modified for editor format
- * maxCharCount: maxChartCount option (true if max character is exceeded)
- * core: Core object
- */
-editor.onDrop = function (e, cleanData, maxCharCount, core) { console.log('onDrop', e) }
-
-// Save event
-// Called just after the save was executed.
-/**
- * contents Editor content
- * core: Core object
- */   
-editor.onSave = function (contents, core) {console.log(contents) };
-
-// Called before the image is uploaded
-// If true is returned, the internal upload process runs normally.
-// If false is returned, no image upload is performed.
-// If new fileList are returned,  replaced the previous fileList
-// If undefined is returned, it waits until "uploadHandler" is executed.
-/**
- * files: Files array
- * info: {
- * - linkValue: Link url value
- * - linkNewWindow: Open in new window Check Value
- * - inputWidth: Value of width input
- * - inputHeight: Value of height input
- * - align: Align Check Value
- * - isUpdate: Update image if true, create image if false
- * - element: If isUpdate is true, the currently selected image.
- * }
- * core: Core object,
- * uploadHandler: If undefined is returned, it waits until "uploadHandler" is executed.
- *                "uploadHandler" is an upload function with "core" and "info" bound. (plugin.upload.bind(core, info))
- *                [upload files] : uploadHandler(files or [new File(...),])
- *                [error]        : uploadHandler("Error message")
- *                [Just finish]  : uploadHandler()
- *                [directly register] : uploadHandler(response) // Same format as "imageUploadUrl" response
- *                                   ex) {
- *                                      // "errorMessage": "insert error message",
- *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
- *                                   }
- * return {Boolean|Array|undefined}
- */
-editor.onImageUploadBefore: function (files, info, core, uploadHandler) {
-    return Boolean || return (new FileList) || return undefined;
-}
-// Called before the video is uploaded
-// If true is returned, the internal upload process runs normally.
-// If false is returned, no video(iframe, video) upload is performed.
-// If new fileList are returned,  replaced the previous fileList
-// If undefined is returned, it waits until "uploadHandler" is executed.
-/** 
- * files: Files array
- * info: {
- * - inputWidth: Value of width input
- * - inputHeight: Value of height input
- * - align: Align Check Value
- * - isUpdate: Update video if true, create video if false
- * - element: If isUpdate is true, the currently selected video.
- * }
- * core: Core object,
- * uploadHandler: If undefined is returned, it waits until "uploadHandler" is executed.
- *                "uploadHandler" is an upload function with "core" and "info" bound. (plugin.upload.bind(core, info))
- *                [upload files] : uploadHandler(files or [new File(...),])
- *                [error]        : uploadHandler("Error message")
- *                [Just finish]  : uploadHandler()
- *                [directly register] : uploadHandler(response) // Same format as "videoUploadUrl" response
- *                                   ex) {
- *                                      // "errorMessage": "insert error message",
- *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
- *                                   }
- * return {Boolean|Array|undefined}
- */
-editor.onVideoUploadBefore: function (files, info, core, uploadHandler) {
-    return Boolean || return (new FileList) || return undefined;
-}
-// Called before the audio is uploaded
-// If true is returned, the internal upload process runs normally.
-// If false is returned, no audio upload is performed.
-// If new fileList are returned,  replaced the previous fileList
-// If undefined is returned, it waits until "uploadHandler" is executed.
-/** 
- * files: Files array
- * info: {
- * - isUpdate: Update audio if true, create audio if false
- * - currentaudio: If isUpdate is true, the currently selected audio.
- * }
- * core: Core object,
- * uploadHandler: If undefined is returned, it waits until "uploadHandler" is executed.
- *                "uploadHandler" is an upload function with "core" and "info" bound. (plugin.upload.bind(core, info))
- *                [upload files] : uploadHandler(files or [new File(...),])
- *                [error]        : uploadHandler("Error message")
- *                [Just finish]  : uploadHandler()
- *                [directly register] : uploadHandler(response) // Same format as "audioUploadUrl" response
- *                                   ex) {
- *                                      // "errorMessage": "insert error message",
- *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
- *                                   }
- * return {Boolean|Array|undefined}
- */
-editor.onAudioUploadBefore: function (files, info, core, uploadHandler) {
-    return Boolean || return (new FileList) || return undefined;
-}
-
-// Called when the image is uploaded, updated, deleted.
-/**
- * targetElement: Target element
- * index: Uploaded index (key value)
- * state: Upload status ('create', 'update', 'delete')
- * info: {
- * - index: data index
- * - name: file name
- * - size: file size
- * - select: select function
- * - delete: delete function
- * - element: Target element
- * - src: src attribute of tag
- * }
- * remainingFilesCount: Count of remaining files to upload (0 when added as a url)
- * core: Core object
-*/
-editor.onImageUpload = function (targetElement, index, state, info, remainingFilesCount, core) {
-    console.log(`targetElement:${targetElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
-    console.log(`info:${info}, remainingFilesCount:${remainingFilesCount}`)
-}
-// Called when the video(iframe, video) is is uploaded, updated, deleted
-// -- arguments is same "onImageUpload" --
-editor.onVideoUpload = function (targetElement, index, state, info, remainingFilesCount, core) {
-    console.log(`targetElement:${targetElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
-    console.log(`info:${info}, remainingFilesCount:${remainingFilesCount}`)
-}
-// Called when the audio is is uploaded, updated, deleted
-// -- arguments is same "onImageUpload" --
-editor.onAudioUpload = function (targetElement, index, state, info, remainingFilesCount, core) {
-    console.log(`targetElement:${targetElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
-    console.log(`info:${info}, remainingFilesCount:${remainingFilesCount}`)
-}
-
-// Called when the image is upload failed.
-// If you return false, the default notices are not called.
-/**
- * errorMessage: Error message
- * result: Response Object
- * core: Core object
- * return {Boolean}
-*/
-editor.onImageUploadError = function (errorMessage, result, core) {
-    alert(errorMessage)
-    return Boolean
-}
-// Called when the video(iframe, video) upload failed
-// -- arguments is same "onImageUploadError" --
-editor.onVideoUploadError = function (errorMessage, result, core) {
-    alert(errorMessage)
-    return Boolean
-}
-// Called when the audio upload failed
-// -- arguments is same "onImageUploadError" --
-editor.onAudioUploadError = function (errorMessage, result, core) {
-    alert(errorMessage)
-    return Boolean
-}
-
-// Called when the editor is resized using the bottom bar
-// height, prevHeight are number
-editor.onResizeEditor = function (height, prevHeight, core, resizeObserverEntry) {
-    console.log(`height: ${height}, prevHeight: ${prevHeight}`, resizeObserverEntry)
-    // "resizeObserverEntry" is not provided in IE Browser. 
-}
-
-// Called after the "setToolbarButtons" invocation
-// Can be used to tweak buttons properties (useful for custom buttons)
-/**
- * buttonList: buttonList array 
- * core: Core object
- */
-editor.onSetToolbarButtons = function (buttonList, core) {
-    console.log(`buttonList: ${buttonList}`)
-}
-
-// It replaces the default callback function of the image upload
-/**
- * xmlHttp: xmlHttpRequest object
- * info: Input information
- * - linkValue: Link url value
- * - linkNewWindow: Open in new window Check Value
- * - inputWidth: Value of width input
- * - inputHeight: Value of height input
- * - align: Align Check Value
- * - isUpdate: Update image if true, create image if false
- * - element: If isUpdate is true, the currently selected image.
- * core: Core object
- */
-editor.imageUploadHandler = function (xmlHttp, info, core) {
-    // Editor code
-    const response = JSON.parse(xmlHttp.responseText);
-    if (response.errorMessage) {
-        this.plugins.image.error.call(this, response.errorMessage, response);
-    } else {
-        this.plugins.image.register.call(this, info, response);
-    }
-}
-/**
- * @description It replaces the default callback function of the video upload
- * xmlHttp: xmlHttpRequest object
- * info: Input information
- * - inputWidth: Value of width input
- * - inputHeight: Value of height input
- * - align: Align Check Value
- * - isUpdate: Update video if true, create video if false
- * - element: If isUpdate is true, the currently selected video.
- * core: Core object
- */
-editor.videoUploadHandler = function (xmlHttp, info, core) {
-    // Editor code
-    const response = JSON.parse(xmlHttp.responseText);
-    if (response.errorMessage) {
-        this.plugins.video.error.call(this, response.errorMessage, response);
-    } else {
-        this.plugins.video.register.call(this, info, response);
-    }
-}
-
-/**
- * @description It replaces the default callback function of the audio upload
- * xmlHttp xmlHttpRequest object
- * info Input information
- * - isUpdate: Update audio if true, create audio if false
- * - element: If isUpdate is true, the currently selected audio.
- * core Core object
- */
-editor.audioUploadHandler = function (xmlHttp, info, core) {
-    // Editor code
-    const response = JSON.parse(xmlHttp.responseText);
-    if (response.errorMessage) {
-        this.plugins.audio.error.call(this, response.errorMessage, response);
-    } else {
-        this.plugins.audio.register.call(this, info, response);
-    }
-}
-
-// An event when toggling between code view and wysiwyg view.
-/**
- * isCodeView: Whether the current code view mode
- * core: Core object
- */
-editor.toggleCodeView = function (isCodeView, core) {
-    console.log('isCodeView', isCodeView);
-}
-
-// An event when toggling full screen.
-/**
- * isFullScreen: Whether the current full screen mode
- * core: Core object
- */
-editor.toggleFullScreen = function (isFullScreen, core) {
-    console.log('isFullScreen', isFullScreen);
-}
-
-// Called just before the inline toolbar is positioned and displayed on the screen.
-/**
- * toolbar: Toolbar Element
- * context: The editor's context object (editor.getContext()|core.context)
- * core Core object
-*/
-editor.showInline = function (toolbar, context, core) {
-    console.log('toolbar', toolbar);
-    console.log('context', context);
-}
-
-// Called just after the controller is positioned and displayed on the screen.
-// controller - editing elements displayed on the screen [image resizing, table editor, link editor..]]
-/**
- * name: The name of the plugin that called the controller
- * controllers: Array of Controller elements
- * core: Core object
-*/
-editor.showController = function (name, controllers, core) {
-    console.log('plugin name', name);
-    console.log('controller elements', controllers);
-}
-```
-
-## Plugins list
-> The plugin and the button have the same name.
-
-<table>
-    <thead>
-        <tr>
-            <th align="left">Name</th>
-            <th align="left">Type</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td align="left">blockquote</td>
-            <td align="left"><strong>command</strong></td>
-        </tr>
-        <tr>
-            <td align="left">image</td>
-            <td align="left" rowspan="5"><strong>dialog</strong></td>
-        </tr>
-        <tr>
-            <td align="left">link</td>
-        </tr>
-        <tr>
-            <td align="left">video</td>
-        </tr>
-        <tr>
-            <td align="left">audio</td>
-        </tr>
-        <tr>
-            <td align="left">math</td>
-        </tr>
-        <tr>
-            <td align="left">align</td>
-            <td align="left" rowspan="13"><strong>submenu</strong></td>
-        </tr>
-        <tr>
-            <td align="left">font</td>
-        </tr>
-        <tr>
-            <td align="left">fontColor</td>
-        </tr>
-        <tr>
-            <td align="left">fontSize</td>
-        </tr>
-        <tr>
-            <td align="left">formatBlock</td>
-        </tr>
-        <tr>
-            <td align="left">hiliteColor</td>
-        </tr>
-        <tr>
-            <td align="left">horizontalRule</td>
-        </tr>
-        <tr>
-            <td align="left">lineHeight</td>
-        </tr>
-        <tr>
-            <td align="left">list</td>
-        </tr>
-        <tr>
-            <td align="left">paragraphStyle</td>
-        </tr>
-        <tr>
-            <td align="left">table</td>
-        </tr>
-        <tr>
-            <td align="left">template</td>
-        </tr>
-        <tr>
-            <td align="left">textStyle</td>
-        </tr>
-        <tr>
-            <td align="left">imageGallery</td>
-            <td align="left"><strong>fileBrowser</strong></td>
-        </tr>
-    </tbody>
-</table>
-
-## Examples
-[Examples](http://suneditor.com/sample/html/examples.html)
-
-## Options template
-[Options template](http://suneditor.com/sample/html/options.html)
-
-## Custom plugins
-[Custom plugins](http://suneditor.com/sample/html/customPlugins.html)
-
-## Document
-[Document](http://suneditor.com/sample/html/document.html)
-
-## Other libraries using SunEditor
-<a id="lib-suneditor-react"></a>[suneditor-react](https://github.com/mkhstar/suneditor-react) ([@mkhstar](https://github.com/mkhstar)) - Pure React Component for SunEditor.
-
-<a id="lib-angular-suneditor"></a>[angular-suneditor](https://github.com/BauViso/angular-suneditor) ([@BauViso](https://github.com/BauViso)) - Angular module for the SunEditor WYSIWYG Editor.
-
-<a id="lib-livewire-alpine"></a>[Livewire & Alpine.JS](https://github.com/JiHong88/SunEditor/issues/789#issuecomment-1121317703) ([@kaju74](https://github.com/kaju74)) - Using SunEditor with Livewire & Alpine.JS
-
-<a id="lib-pluxml"></a>[Plugin for Pluxml](https://forum.pluxml.org/discussion/comment/59339) ([@sudwebdesign](https://github.com/sudwebdesign)) - Plugin for Pluxml.
-
-<a id="lib-aem-suneditor"></a>[AEM-SunEditor](https://blogs.perficientdigital.com/2019/08/13/suneditor-an-alternative-to-the-aem-rte) ([@ahmed-musallam](https://github.com/ahmed-musallam/AEM-SunEditor)) - Enables using SunEditor in AEM dialogs as an RTE replacement.
-    
 ## License
 Suneditor may be freely distributed under the MIT license.