2.37.0

JiHong88 · Mar 17, 2021 · 95b39d3 · 95b39d3
2 parents 4a0c5c7 + 7bcc570
commit 95b39d3
Show file tree

Hide file tree

Showing 18 changed files with 405 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -393,15 +393,19 @@ historyStackDelayTime : When recording the history stack, this is the delay time
 
 // Whitelist--------------------------------------å---------------------------------------------------------
 // (You can use regular expression syntax.)
-// _defaultTagsWhitelist : 'br|p|div|pre|blockquote|h[1-6]|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'
+// _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'
 addTagsWhitelist      : Add tags to the default tags whitelist of editor.   default: '' {String}
                         ex) 'mark|canvas|label|select|option|input|//' // "//" This means HTML comments.
 // _editorTagsWhitelist  : _defaultTagsWhitelist + addTagsWhitelist
-pasteTagsWhitelist    : Whitelist of tags when pasting.   default: _editorTagsWhitelist {String}
-                        ex) 'p|h[1-6]'
+pasteTagsWhitelist    : Whitelist of tags when pasting.                     default: _editorTagsWhitelist {String}
+                        ex) 'p|h1|h2|h3'
+tagsBlacklist         : Blacklist of the editor default tags.               default: null {String}
+                        ex) 'h1|h2'
+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}
                         // -- Fixed whitelist --
-                        // Native attributes: 'contenteditable|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls'
+                        // Native attributes: 'contenteditable|id|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'
                         ex) {
                             'all': 'style|data-.+', // Apply to all tags
@@ -456,6 +460,13 @@ katex           : Required library for math plugins.               default: null
                             */
                         }
                       }
+mathFontSize    : Math plugin font size list.                       default: [{..}] {Array}
+                  Default value: [
+                    {text: '1', value: '1em', default: true},
+                    {text: '1.5', value: '1.5em'},
+                    {text: '2', value: '2em'},
+                    {text: '2.5', value: '2.5em'}
+                  ]
 
 // Display-------------------------------------------------------------------------------------------------------
 position        : The position property of suneditor.               default: null {String}
@@ -651,6 +662,7 @@ imageGalleryUrl     : The url of the image gallery, if you use the image gallery
                             ]
                         }
                       You can redefine the "plugins.imageGallery.drawItems" method.
+imageGalleryHeader: Http Header when get image gallery.         default: null {Object}
 
 // Video----------------------------------------------------------------------------------------------------------
 videoResizing   : Can resize the video (iframe, video).                         default: true {Boolean}

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.36.5",
+  "version": "2.37.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/package.json b/package.json
@@ -3,7 +3,7 @@
   "sideEffects": [
     "./src/assets/css/*.css"
   ],
-  "version": "2.36.5",
+  "version": "2.37.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

diff --git a/sample/html/options.html b/sample/html/options.html
@@ -80,7 +80,13 @@ <h4 style="color: #b94a48;">--Whitelist</h4>
             <input type="text" id="addTagsWhitelist_value" placeholder="String (mark|canvas|label|select|option|input)" style="width:320px">
             <br><br>
             <label><input type="checkbox" id="pasteTagsWhitelist">&nbsp;&nbsp;pasteTagsWhitelist</label>
-            <input type="text" id="pasteTagsWhitelist_value" placeholder="String (p|h[1-4])" style="width:320px">
+            <input type="text" id="pasteTagsWhitelist_value" placeholder="String (p|h1|h2|h3)" style="width:320px">
+            <br><br>
+            <label><input type="checkbox" id="tagsBlacklist">&nbsp;&nbsp;tagsBlacklist</label>
+            <input type="text" id="tagsBlacklist_value" placeholder="String (h1|h2)" style="width:320px">
+            <br><br>
+            <label><input type="checkbox" id="pasteTagsBlacklist">&nbsp;&nbsp;pasteTagsBlacklist</label>
+            <input type="text" id="pasteTagsBlacklist_value" placeholder="String (h1|h2)" style="width:320px">
             <br><br>
             <label><input type="checkbox" id="attributesWhitelist">&nbsp;&nbsp;attributesWhitelist</label><br>
             <span>{</span><br>
@@ -148,7 +154,12 @@ <h1>Preview Template</h1>
             </textarea>
             <br><br>
             <label><input type="checkbox" id="codeMirror">&nbsp;&nbsp;codeMirror</label> { codeMirror: CodeMirror }<br>
-            <label><input type="checkbox" id="katex" checked disabled>&nbsp;&nbsp;katex</label> { katex: katex } // Use "math" plugin
+            <label><input type="checkbox" id="katex" checked disabled>&nbsp;&nbsp;katex</label> { katex: katex } // Use "math" plugin<br>
+            <label><input type="checkbox" id="mathFontSize">&nbsp;&nbsp;mathFontSize</label>
+            <span>[</span><br>
+            <span>&nbsp;&nbsp;{text: '1', value: '1em'},</span><br>
+            <span>&nbsp;&nbsp;{text: '2', value: '2em', default: true}</span><br>
+            <span>]</span>
             <br><br>
 
             <br>
@@ -279,9 +290,11 @@ <h4 style="color: #b94a48;">--Image</h4>
             <label><input type="checkbox" id="imageAccept">&nbsp;&nbsp;imageAccept</label>
             <input type="text" id="imageAccept_value" placeholder='String( * or .jpg, .png...)'>
             <br>
-            <h4 style="color: #b94a48;">--Image - image gallery</h4>
+            <h4 style="color: #b94a48;">--image gallery</h4>
             <label><input type="checkbox" id="imageGalleryUrl" checked>&nbsp;&nbsp;imageGalleryUrl</label>
             <input type="text" id="imageGalleryUrl_value" placeholder="String(URL address)" style="width: 200px" value="https://etyswjpn79.execute-api.ap-northeast-1.amazonaws.com/suneditor-demo">
+            <label><input type="checkbox" id="imageGalleryHeader">&nbsp;&nbsp;imageGalleryHeader</label>
+            <textarea id="imageGalleryHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
 
             <br>
             <h4 style="color: #b94a48;">--Video</h4>
@@ -436,7 +449,7 @@ <h4 style="color: #b94a48;">--ETC</h4>
         <br>
 
         <button type="button" class="btn btn-md btn-primary" onclick="sun_create()">Create</button>
-        <textarea id="sample_editor" style="display: none;"></textarea>
+        <textarea id="sample_editor" style="display: none;"><h1>Insert into..</h1></textarea>
         <div id="custom_toolbar" class="sun-editor" style="margin-top: 20px;"></div>
 
         <div class="component-list">
@@ -540,6 +553,8 @@ <h2 class="sub-title">Applied options</h2>
         historyStackDelayTime: document.getElementById('historyStackDelayTime').checked ? document.getElementById('historyStackDelayTime_value').value * 1 : undefined,
         addTagsWhitelist: document.getElementById('addTagsWhitelist').checked ? document.getElementById('addTagsWhitelist_value').value : undefined,
         pasteTagsWhitelist: document.getElementById('pasteTagsWhitelist').checked ? document.getElementById('pasteTagsWhitelist_value').value : undefined,
+        tagsBlacklist: document.getElementById('tagsBlacklist').checked ? document.getElementById('tagsBlacklist_value').value : undefined,
+        pasteTagsBlacklist: document.getElementById('pasteTagsBlacklist').checked ? document.getElementById('pasteTagsBlacklist_value').value : undefined,
         attributesWhitelist: !document.getElementById('attributesWhitelist').checked ? undefined : {
             'all': 'style',
             'input': 'checked'
@@ -556,6 +571,7 @@ <h2 class="sub-title">Applied options</h2>
         previewTemplate: document.getElementById('previewTemplate').checked ? document.getElementById('previewTemplate_value').value.replace(/\n/g, '') : undefined,
         codeMirror: document.getElementById('codeMirror').checked ? CodeMirror : undefined,
         katex: katex,
+        mathFontSize: document.getElementById('mathFontSize').checked ? [{text: '1', value: '1em'}, {text: '2', value: '2em', default: true}] : undefined,
         position: document.getElementById('position').checked ? document.getElementById('position_value').value : undefined,
         popupDisplay: document.getElementById('popupDisplay').checked ? document.getElementById('popupDisplay_value').value : undefined,
         resizingBar: document.getElementById('resizingBar').checked ? undefined : false,
@@ -601,6 +617,7 @@ <h2 class="sub-title">Applied options</h2>
         imageUploadSizeLimit: document.getElementById('imageUploadSizeLimit').checked ? document.getElementById('imageUploadSizeLimit_value').value : undefined,
         imageAccept: document.getElementById('imageAccept').checked ? document.getElementById('imageAccept_value').value : undefined,
         imageGalleryUrl: document.getElementById('imageGalleryUrl').checked ? document.getElementById('imageGalleryUrl_value').value : undefined,
+        imageGalleryHeader: document.getElementById('imageGalleryHeader').checked ? JSON.parse(document.getElementById('imageGalleryHeader_value').value) : undefined,
         videoResizing: document.getElementById('videoResizing').checked ? undefined : false,
         videoHeightShow: document.getElementById('videoHeightShow').checked ? undefined : false,
         videoFileInput: document.getElementById('videoFileInput').checked ? undefined : false,

diff --git a/src/assets/css/suneditor.css b/src/assets/css/suneditor.css
@@ -337,6 +337,7 @@
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-select.se-math-size {width:6em; height:28px; margin-left:1em;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview {font-size:13px;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview > span {display:inline-block; -webkit-box-shadow:0 0 0 0.1rem #c7deff; box-shadow:0 0 0 0.1rem #c7deff;}
+.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview > span * {direction:ltr;}
 /* dialog - modal - link preview */
 .sun-editor .se-dialog .se-dialog-inner .se-link-preview {display:block; height:auto; max-height:18px; font-size:13px; font-weight:normal; font-family:inherit; color:#666; background-color:transparent; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:pre;}
 /* dialog - modal - anchor module */
@@ -401,6 +402,12 @@
 .sun-editor .se-controller-link .link-content {padding:0; margin:0;}
 .sun-editor .se-controller-link .link-content a {display:inline-block; color:#4592ff; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; margin-left:5px;}
 
+/* --- select list ---------------------------------------------------------- */
+.sun-editor .se-select-list {position:absolute; display:none; width:auto; max-width:100%; background-color:#fff; padding:0; margin:0; border:1px solid #bababa; -webkit-box-shadow:0 3px 9px rgba(0, 0, 0, .5); box-shadow:0 3px 9px rgba(0, 0, 0, .5); outline:0 none;}
+.sun-editor .se-select-list .se-select-item {line-height:28px; min-height:28px; font-size:13px; padding:0 5px; margin:2px 0; cursor:pointer;}
+.sun-editor .se-select-list.__se_select-menu-mouse-move .se-select-item:hover, .sun-editor .se-select-list:not(.__se_select-menu-mouse-move) .se-select-item.active {background-color:#e1e1e1;}
+.sun-editor .se-dialog-form-files .se-select-list {width:100%;}
+
 /* --- browser ---------------------------------------------------------- */
 .sun-editor .se-file-browser {position:absolute; display:none; top:0; left:0; width:100%; height:100%; z-index:2147483647;}
 .sun-editor .se-file-browser label, .sun-editor .se-file-browser input, .sun-editor .se-file-browser button {font-size:14px; line-height:1.5; color:#111; margin:0;}

diff --git a/src/lib/constructor.js b/src/lib/constructor.js
@@ -397,9 +397,10 @@ export default {
         options.value = typeof options.value === 'string' ? options.value : null;
         options.historyStackDelayTime = typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400;
         /** Whitelist */
-        options._defaultTagsWhitelist = typeof options._defaultTagsWhitelist === 'string' ? options._defaultTagsWhitelist : 'br|p|div|pre|blockquote|h[1-6]|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path';
-        options._editorTagsWhitelist = options._defaultTagsWhitelist + (typeof options.addTagsWhitelist === 'string' && options.addTagsWhitelist.length > 0 ? '|' + options.addTagsWhitelist : '');
-        options.pasteTagsWhitelist = typeof options.pasteTagsWhitelist === 'string' ? options.pasteTagsWhitelist : options._editorTagsWhitelist;
+        const whitelist = 'br|p|div|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path';
+        options._defaultTagsWhitelist = typeof options._defaultTagsWhitelist === 'string' ? options._defaultTagsWhitelist : whitelist;
+        options._editorTagsWhitelist = this._setWhitelist(options._defaultTagsWhitelist + (typeof options.addTagsWhitelist === 'string' && options.addTagsWhitelist.length > 0 ? '|' + options.addTagsWhitelist : ''), options.tagsBlacklist);
+        options.pasteTagsWhitelist = this._setWhitelist(typeof options.pasteTagsWhitelist === 'string' ? options.pasteTagsWhitelist : options._editorTagsWhitelist, options.pasteTagsBlacklist);
         options.attributesWhitelist = (!options.attributesWhitelist || typeof options.attributesWhitelist !== 'object') ? null : options.attributesWhitelist;
         /** Layout */
         options.mode = options.mode || 'classic'; // classic, inline, balloon, balloon-always
@@ -418,6 +419,12 @@ export default {
         options.codeMirror = options.codeMirror ? options.codeMirror.src ? options.codeMirror : {src: options.codeMirror} : null;
         /** katex object (Math plugin) */
         options.katex = options.katex ? options.katex.src ? options.katex : {src: options.katex} : null;
+        options.mathFontSize = !!options.mathFontSize ? options.mathFontSize : [
+            {text: '1', value: '1em'},
+            {text: '1.5', value: '1.5em'},
+            {text: '2', value: '2em'},
+            {text: '2.5', value: '2.5em'}
+        ];
         /** Display */
         options.position = typeof options.position === 'string' ? options.position : null;
         options.display = options.display || (element.style.display === 'none' || !element.style.display ? 'block' : element.style.display);
@@ -466,6 +473,7 @@ export default {
         options.imageAccept = (typeof options.imageAccept !== 'string' || options.imageAccept.trim() === "*") ? 'image/*' : options.imageAccept.trim() || 'image/*';
         /** Image - image gallery */
         options.imageGalleryUrl = typeof options.imageGalleryUrl === 'string' ? options.imageGalleryUrl : null;
+        options.imageGalleryHeader = options.imageGalleryHeader || null;
         /** Video */
         options.videoResizing = options.videoResizing === undefined ? true : options.videoResizing;
         options.videoHeightShow = options.videoHeightShow === undefined ? true : !!options.videoHeightShow;
@@ -550,6 +558,17 @@ export default {
         options._editorStyles = util._setDefaultOptionStyle(options, options.defaultStyle);
     },
 
+    _setWhitelist: function (whitelist, blacklist) {
+        if (typeof blacklist !== 'string') return whitelist;
+        blacklist = blacklist.split('|');
+        whitelist = whitelist.split('|');
+        for (let i = 0, len = blacklist.length, index; i < len; i++) {
+            index = whitelist.indexOf(blacklist[i]);
+            if (index > -1) whitelist.splice(index, 1);
+        }
+        return whitelist.join('|');
+    },
+
     /**
      * @description Suneditor's Default button list
      * @param {Object} options options

diff --git a/src/lib/core.js b/src/lib/core.js
@@ -1057,7 +1057,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @returns {Node}
          */
         getSelectionNode: function () {
-            if (util.isWysiwygDiv(this._variable._selectionNode)) this._editorRange();
+            if (!context.element.wysiwyg.contains(this._variable._selectionNode)) this._editorRange();
             if (!this._variable._selectionNode) {
                 const selectionNode = util.getChildElement(context.element.wysiwyg.firstChild, function (current) { return current.childNodes.length === 0 || current.nodeType === 3; }, false);
                 if (!selectionNode) {
@@ -4913,7 +4913,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         checkCharCount: function (element, charCounterType) {
             if (options.maxCharCount) {
                 const countType = charCounterType || options.charCounterType;
-                const length = this.getCharLength((typeof element === 'string' ? element : this._charTypeHTML ? element.outerHTML : element.textContent), countType);
+                const length = this.getCharLength((typeof element === 'string' ? element : (this._charTypeHTML && element.nodeType === 1) ? element.outerHTML : element.textContent), countType);
                 if (length > 0 && length + functions.getCharCount(countType) > options.maxCharCount) {
                     this._callCounterBlink();
                     return false;
@@ -5034,7 +5034,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             this._disallowedTextTagsRegExp = disallowTextTags.length === 0 ? null : new wRegExp('(<\\/?)(' + disallowTextTags.join('|') + ')\\b\\s*(?:[^>^<]+)?\\s*(?=>)', 'gi');
 
             // set whitelist
-            const defaultAttr = 'contenteditable|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls|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';
+            const defaultAttr = 'contenteditable|id|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls|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';
             this._allowHTMLComments = options._editorTagsWhitelist.indexOf('//') > -1;
             this._htmlCheckWhitelistRegExp = new wRegExp('^(' + options._editorTagsWhitelist.replace('|//', '') + ')$', 'i');
             this.editorTagsWhitelistRegExp = util.createTagsWhitelist(options._editorTagsWhitelist.replace('|//', '|<!--|-->'));