2.28.0

JiHong88 · Mar 22, 2020 · 1633c2f · 1633c2f
2 parents 87852d3 + b86432b
commit 1633c2f
Show file tree

Hide file tree

Showing 31 changed files with 527 additions and 224 deletions.
diff --git a/README.md b/README.md
@@ -374,8 +374,14 @@ popupDisplay    : Size of background area when activating dialog window ('full'|
 resizingBar     : 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}
+
+// 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.
+                  ('char': character length, 'byte': binary data length)      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}
 
 // Width size----------------------------------------------------------------------------------------------------
@@ -572,6 +578,12 @@ templates       : If you use a template plugin, add it.
 
 // ETC------------------------------------------------------------------------------------------------------------
 placeholder     : The placeholder text.                              default: null {String}
+icons           : You can redefine icons.                            default: null {Object}
+                  ex) {
+                      bold: '<span class="se-icon-text">B</span>',
+                      table: '<i class="xx xxx></i>',
+                      insert_row_above: '<svg></svg>'
+                  }
 
 // Buttons--------------------------------------------------------------------------------------------------------
 buttonList      : Defines button list to array {Array}
@@ -695,6 +707,8 @@ 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) }

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.27.1",
+  "version": "2.28.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

diff --git a/dist/css/suneditor.min.css b/dist/css/suneditor.min.css
diff --git a/dist/suneditor.min.js b/dist/suneditor.min.js
diff --git a/index.d.ts b/index.d.ts
@@ -103,10 +103,22 @@ declare module 'suneditor' {
      * Displays the current node structure to resizingBar
      */
     showPathLabel?: boolean;
+    /**
+     * Character count
+     * ===============
+     */
     /**
      * Shows the number of characters in the editor
      */
     charCounter?: boolean;
+    /**
+     * Defines the calculation method of the "charCounter" option
+     */
+    charCounterType?: String;
+    /**
+     * Text to be displayed in the "charCounter" area of the bottom bar.
+     */
+    charCounterLabel?: String;
     /**
      * The maximum number of characters allowed to be inserted into the editor
      */
@@ -292,6 +304,10 @@ declare module 'suneditor' {
      * The placeholder text
      */
     placeholder?: string;
+    /**
+     * You can redefine icons.
+     */
+    icons?: Record<string, string>;
   }
 
   export type FormatTagName =

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "sideEffects": [
     "./src/assets/css/*.css"
   ],
-  "version": "2.27.1",
+  "version": "2.28.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

diff --git a/sample/html/customPlugins.html b/sample/html/customPlugins.html
@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="../css/sample.css" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.8.2/css/all.min.css">
+    <!-- suneditor -->
+    <link href="../../dist/css/suneditor.min.css" rel="stylesheet">
     <style>
         .accordion {
             background-color: #ffebc1;
@@ -148,7 +150,7 @@
                 <span class="pl-c">// https://icon-icons.com</span>
                 <span class="pl-c">// https://materialdesignicons.com</span>
                 <span class="pl-c">// https://material.io/resources/icons/?style=baseline</span>
-                <span class="pl-c1">innerHTML</span>:<span class="pl-s">'&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:24px;height:24px;"&gt;&lt;path d="M0 0h24v24H0z" fill="none"/&gt;&lt;path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/&gt;&lt;/svg&gt;'</span>
+                <span class="pl-c1">innerHTML</span>:<span class="pl-s">'&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:24px;height:24px;"&gt;&lt;path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/&gt;&lt;/svg&gt;'</span>
                 <span class="pl-ent">// --- Icon class (This icon uses Font Awesome)</span>
                 <span class="pl-c">// https://fontawesome.com/, https://www.jsdelivr.com/package/npm/@fortawesome/fontawesome-free</span>
                 <span class="pl-c">// &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.8.2/css/all.min.css"&gt;</span>
@@ -567,7 +569,7 @@
                 <span class="pl-c1">buttonClass</span>:<span class="pl-s">''</span><span class="pl-kos">,</span> 
                 <span class="pl-c1">title</span>:<span class="pl-s">'Custom plugin of the submenu'</span><span class="pl-kos">,</span> 
                 <span class="pl-c1">dataDisplay</span>:<span class="pl-s">'submenu'</span><span class="pl-kos">,</span>
-                <span class="pl-c1">innerHTML</span>:<span class="pl-s">'&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path d="M0 0h24v24H0z" fill="none"/&gt;&lt;path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/&gt;&lt;/svg&gt;'</span>
+                <span class="pl-c1">innerHTML</span>:<span class="pl-s">'&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/&gt;&lt;/svg&gt;'</span>
             <span class="pl-kos">}</span>
         <span class="pl-kos">]</span>
     <span class="pl-kos">]</span>
@@ -921,7 +923,6 @@
 
 <script src="../js/common.js"></script>
 <!-- suneditor -->
-<link href="../../dist/css/suneditor.min.css" rel="stylesheet">
 <script src="../../dist/suneditor.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/plugins/modules/dialog.js"></script>
 <script>
@@ -1595,7 +1596,7 @@
                     buttonClass:'', 
                     title:'custom_container', 
                     dataDisplay:'container',
-                    innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:24px;height:24px;"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
+                    innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:24px;height:24px;"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
                 }
             ]
         ]
@@ -1635,7 +1636,7 @@
                     buttonClass:'', 
                     title:'Custom plugin of the submenu', 
                     dataDisplay:'submenu',
-                    innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
+                    innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
                 },
                 'codeView'
             ]

diff --git a/sample/html/examples.html b/sample/html/examples.html
@@ -11,6 +11,12 @@
     <link rel="stylesheet" href="../css/bootstrap.css" media="all">
     <link rel="stylesheet" href="../css/sample.css" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
+    <!-- suneditor -->
+    <link href="../../dist/css/suneditor.min.css" rel="stylesheet">
+    <!-- codeMirror -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
+    <!-- KaTeX -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
 </head>
 <body>
 <nav class="navbar navbar-inverse">
@@ -488,6 +494,8 @@
 
 <span class="pl-smi">editor</span>.<span class="pl-en">onMouseDown</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">e</span>, <span class="pl-smi">core</span>) { <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">'</span>onMouseDown<span class="pl-pds">'</span></span>, e) }
 
+<span class="pl-smi">editor</span>.<span class="pl-en">onInput</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">e</span>, <span class="pl-smi">core</span>) { <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">'</span>onInput<span class="pl-pds">'</span></span>, e) }
+
 <span class="pl-smi">editor</span>.<span class="pl-en">onKeyDown</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">e</span>, <span class="pl-smi">core</span>) { <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">'</span>onKeyDown<span class="pl-pds">'</span></span>, e) }
 
 <span class="pl-smi">editor</span>.<span class="pl-en">onKeyUp</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">e</span>, <span class="pl-smi">core</span>) { <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">'</span>onKeyUp<span class="pl-pds">'</span></span>, e) }
@@ -585,10 +593,8 @@
 
 <script src="../js/common.js"></script>
 <!-- suneditor -->
-<link href="../../dist/css/suneditor.min.css" rel="stylesheet">
 <script src="../../dist/suneditor.min.js"></script>
 <!-- codeMirror -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
@@ -838,6 +844,7 @@
         suneditor.onScroll = function (e) { console.log('onScroll', e); }
         suneditor.onMouseDown = function (e) { console.log('onMouseDown', e) }
         suneditor.onClick = function (e) { console.log('onClick', e) }
+        suneditor.onInput = function (e) { console.log('onInput', e) }
         suneditor.onKeyDown = function (e) { console.log('onKeyDown', e) }
         suneditor.onKeyUp = function (e) { console.log('onKeyUp', e) }
         suneditor.onDrop = function (e) { console.log('onDrop', e) }

diff --git a/sample/html/options.html b/sample/html/options.html
@@ -11,6 +11,13 @@
     <link rel="stylesheet" href="../css/bootstrap.css" media="all">
     <link rel="stylesheet" href="../css/sample.css" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
+    <!-- suneditor -->
+    <link href="../../dist/css/suneditor.min.css" rel="stylesheet">
+    <!-- codeMirror -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/lint.css">
+    <!-- KaTeX -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
     <style>
         .sun-editor-editable .__se__customClass, .sun-editor .__se__customClass {
             border: 1px solid #b1b1b1;
@@ -115,10 +122,22 @@ <h4 style="color: #b94a48;">--Display</h4>
             <br>
             <h4 style="color: #b94a48;">--Bottom resizing bar</h4>
             <label><input type="checkbox" id="resizingBar" checked>&nbsp;&nbsp;resizingBar</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <label><input type="checkbox" id="showPathLabel" checked>&nbsp;&nbsp;showPathLabel</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="showPathLabel" checked>&nbsp;&nbsp;showPathLabel</label>
+
+            <br>
+            <h4 style="color: #b94a48;">--Character count</h4>
             <label><input type="checkbox" id="charCounter">&nbsp;&nbsp;charCounter</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <label><input type="checkbox" id="maxCharCount">&nbsp;&nbsp;maxCharCount</label>
             <input type="text" id="maxCharCount_value" placeholder="Number">
+            <br><br>
+            <label><input type="checkbox" id="charCounterType">&nbsp;&nbsp;charCounterType</label>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="radio" id="radio_charCounterType_1" name="radio_charCounterType" value="char" checked>&nbsp;&nbsp;char</label>
+            &nbsp;&nbsp;&nbsp;
+            <label><input type="radio" id="radio_charCounterType_2" name="radio_charCounterType" value="byte">&nbsp;&nbsp;byte</label>
+            <br><br>
+            <label><input type="checkbox" id="charCounterLabel">&nbsp;&nbsp;charCounterLabel</label>
+            <input type="text" id="charCounterLabel_value" placeholder="String">
 
             <br>
             <h4 style="color: #b94a48;">--Size</h4>
@@ -258,7 +277,11 @@ <h4 style="color: #b94a48;">--Templates Array</h4>
             <h4 style="color: #b94a48;">--ETC</h4>
             <label><input type="checkbox" id="placeholder">&nbsp;&nbsp;placeholder</label>
             <input type="text" id="placeholder_value" placeholder="String" style="width: 200px">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <br><br>
+            <label><input type="checkbox" id="icons">&nbsp;&nbsp;icons</label><br>
+            <span>{</span><br>
+            <span>&nbsp;&nbsp;paragraph_style: '&lt;svg&gt;&lt;path d=".."/&gt;&lt;/svg&gt;'</span><br>
+            <span>}</span>
         </div>
         <br>
 
@@ -296,23 +319,19 @@ <h2 class="sub-title">Applied options</h2>
 
 <script src="../js/common.js"></script>
 <!-- suneditor -->
-<link href="../../dist/css/suneditor.min.css" rel="stylesheet">
 <script src="../../dist/suneditor.min.js"></script>
 <!-- codeMirror -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"></script>
 <!-- code mirror options display -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/lint.css">
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/edit/matchbrackets.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/edit/closebrackets.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/lint.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/json-lint.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/javascript/javascript.js"></script>
 <!-- KaTeX -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
 <script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
 <style>
 .CodeMirror {
@@ -370,6 +389,8 @@ <h2 class="sub-title">Applied options</h2>
         resizingBar: document.getElementById('resizingBar').checked ? undefined : false,
         showPathLabel: document.getElementById('showPathLabel').checked ? undefined : false,
         charCounter: document.getElementById('charCounter').checked ? true : undefined,
+        charCounterType: document.getElementById('charCounterType').checked ? (document.getElementById('radio_charCounterType_1').checked ? 'char' : 'byte') : undefined,
+        charCounterLabel: document.getElementById('charCounterLabel').checked ? document.getElementById('charCounterLabel_value').value : undefined,
         maxCharCount: document.getElementById('maxCharCount').checked ? document.getElementById('maxCharCount_value').value : undefined,
         display: document.getElementById('display').checked ? document.getElementById('display_value').value : undefined,
         width: document.getElementById('width').checked ? document.getElementById('width_value').value : undefined,
@@ -421,6 +442,7 @@ <h2 class="sub-title">Applied options</h2>
         textStyles: document.getElementById('textStyles').checked ? ['translucent', {name: 'Emphasis', style: '-webkit-text-emphasis: filled;', tag: 'span'}] : undefined,
         templates: document.getElementById('templates').checked ? [{name: 'Template-1', html: '<p>HTML source1</p>'},{name: 'Template-2', html: '<p>HTML source2</p>'}] : undefined,
         placeholder: document.getElementById('placeholder').checked ? document.getElementById('placeholder_value').value : undefined,
+        icons: document.getElementById('icons').checked ? { paragraph_style: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>' } : undefined,
         buttonList: [
             ['undo', 'redo',
             'font', 'fontSize', 'formatBlock',

diff --git a/sample/html/out/document-editor.html b/sample/html/out/document-editor.html
@@ -260,6 +260,20 @@ <h5 class="subsection-title">Properties:</h5>
                     </td>
                     <td class="description last">Element of the current tag navigation</td>
                 </tr>
+                <tr>
+                    <td class="name"><code>&nbsp;&nbsp;&nbsp;&nbsp;charWrapper</code></td>
+                    <td class="type">
+                        <span class="param-type">Element</span>
+                    </td>
+                    <td class="description last">Character counter wrapper tag</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>&nbsp;&nbsp;&nbsp;&nbsp;charCounter</code></td>
+                    <td class="type">
+                        <span class="param-type">Element</span>
+                    </td>
+                    <td class="description last">Character counter tag</td>
+                </tr>
                 <tr>
                     <td class="name"><code>&nbsp;&nbsp;&nbsp;&nbsp;editorArea</code></td>
                     <td class="type">