2.30.0

JiHong88 · Jun 9, 2020 · af9db38 · af9db38
2 parents d7d834c + e2177e5
commit af9db38
Show file tree

Hide file tree

Showing 68 changed files with 2,299 additions and 490 deletions.
diff --git a/README.md b/README.md
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.29.0",
+  "version": "2.30.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.29.0",
+  "version": "2.30.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [
@@ -59,7 +59,7 @@
     "url-loader": "^1.1.2",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2"
   },
   "scripts": {

diff --git a/sample/html/customPlugins.html b/sample/html/customPlugins.html
@@ -1187,6 +1187,7 @@
 
     <span class="pl-c">/**</span>
 <span class="pl-c">     * <span class="pl-k">@Override</span> core, fileManager, resizing</span>
+<span class="pl-c">     * <span class="pl-k">@description</span> It is called from core.selectComponent.</span>
 <span class="pl-c">     * <span class="pl-k">@param</span> {<span class="pl-smi">Element</span>} element Target element</span>
 <span class="pl-c">     */</span>
     <span class="pl-en">select</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
@@ -2413,6 +2414,7 @@
 
         /**
          * @Override core, fileManager, resizing
+         * @description It is called from core.selectComponent.
          * @param {Element} element Target element
          */
         select: function (element) {

diff --git a/sample/html/options.html b/sample/html/options.html
@@ -91,13 +91,16 @@ <h4 style="color: #b94a48;">--Layout</h4>
                 <option value="ja">ja</option>
                 <option value="ko">ko</option>
                 <option value="pt_br">pt_br</option>
+                <option value="ro">ro</option>
                 <option value="ru">ru</option>
                 <option value="zh_cn">zh_cn</option>
             </select>
             <br><br>
             <label><input type="checkbox" id="toolbarWidth">&nbsp;&nbsp;toolbarWidth</label>
             <input type="text" id="toolbarWidth_value" placeholder="Number, ...px, ...%">
             <br><br>
+            <label><input type="checkbox" id="toolbarContainer">&nbsp;&nbsp;toolbarContainer</label> "#custom_toolbar"
+            <br><br>
             <label><input type="checkbox" id="stickyToolbar">&nbsp;&nbsp;stickyToolbar</label>
             <input type="text" id="stickyToolbar_value" placeholder="Number, ...px">
             <br><br>
@@ -231,6 +234,10 @@ <h4 style="color: #b94a48;">--Image</h4>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <label><input type="checkbox" id="imageUploadSizeLimit">&nbsp;&nbsp;imageUploadSizeLimit</label>
             <input type="text" id="imageUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
+            <br>
+            <h4 style="color: #b94a48;">--Image - 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">
 
             <br>
             <h4 style="color: #b94a48;">--Video</h4>
@@ -300,6 +307,8 @@ <h4 style="color: #b94a48;">--Table</h4>
             <br>
             <h4 style="color: #b94a48;">--Key actions</h4>
             <label><input type="checkbox" id="tabDisable">&nbsp;&nbsp;tabDisable</label><br>
+            <label><input type="checkbox" id="shortcutsDisable">&nbsp;&nbsp;shortcutsDisable</label> ['bold', 'strike', 'underline', 'italic', 'undo', 'indent']<br>
+            <label><input type="checkbox" id="shortcutsHint" checked>&nbsp;&nbsp;shortcutsHint</label><br>
 
             <h4 style="color: #b94a48;">--Defining save button</h4>
             <label><input type="checkbox" id="callBackSave">&nbsp;&nbsp;callBackSave</label><br>
@@ -333,6 +342,7 @@ <h4 style="color: #b94a48;">--ETC</h4>
 
         <button type="button" class="btn btn-md btn-primary" onclick="sun_create()">Create</button>
         <textarea id="sample_editor" style="display: none;"></textarea>
+        <div id="custom_toolbar" class="sun-editor" style="margin-top: 20px;"></div>
 
         <div class="component-list">
             <div class="file-list-info">
@@ -395,6 +405,7 @@ <h2 class="sub-title">Applied options</h2>
 <script src="../../src/lang/ja.js"></script>
 <script src="../../src/lang/ko.js"></script>
 <script src="../../src/lang/pt_br.js"></script>
+<script src="../../src/lang/ro.js"></script>
 <script src="../../src/lang/ru.js"></script>
 <script src="../../src/lang/zh_cn.js"></script>
 <script>
@@ -425,6 +436,7 @@ <h2 class="sub-title">Applied options</h2>
         },
         mode: modeSelect.options[modeSelect.selectedIndex].value,
         toolbarWidth: document.getElementById('toolbarWidth').checked ? document.getElementById('toolbarWidth_value').value : undefined,
+        toolbarContainer: document.getElementById('toolbarContainer').checked ? '#custom_toolbar' : undefined,
         stickyToolbar: document.getElementById('stickyToolbar').checked ? document.getElementById('stickyToolbar_value').value : undefined,
         iframe: document.getElementById('iframe').checked ? true : undefined,
         fullPage: document.getElementById('fullPage').checked? true : undefined,
@@ -473,6 +485,7 @@ <h2 class="sub-title">Applied options</h2>
         imageUploadHeader: document.getElementById('imageUploadHeader').checked ? JSON.parse(document.getElementById('imageUploadHeader_value').value) : undefined,
         imageUploadUrl: document.getElementById('imageUploadUrl').checked ? document.getElementById('imageUploadUrl_value').value : undefined,
         imageUploadSizeLimit: document.getElementById('imageUploadSizeLimit').checked ? document.getElementById('imageUploadSizeLimit_value').value : undefined,
+        imageGalleryUrl: document.getElementById('imageGalleryUrl').checked ? document.getElementById('imageGalleryUrl_value').value : undefined,
         videoResizing: document.getElementById('videoResizing').checked ? undefined : false,
         videoHeightShow: document.getElementById('videoHeightShow').checked ? undefined : false,
         videoFileInput: document.getElementById('videoFileInput').checked ? undefined : false,
@@ -499,6 +512,8 @@ <h2 class="sub-title">Applied options</h2>
         audioUploadSizeLimit: document.getElementById('audioUploadSizeLimit').checked ? document.getElementById('audioUploadSizeLimit_value').value : undefined,
         tableCellControllerPosition: document.getElementById('tableCellControllerPosition').checked ? document.getElementById('tableCellControllerPosition_value').value : undefined,
         tabDisable: document.getElementById('tabDisable').checked,
+        shortcutsDisable: document.getElementById('shortcutsDisable').checked ? ['bold', 'strike', 'underline', 'italic', 'undo', 'indent'] : undefined,
+        shortcutsHint: document.getElementById('shortcutsHint').checked ? undefined : false,
         callBackSave: document.getElementById('callBackSave').checked ? function (contents) { alert(contents) } : undefined,
         lineHeights: document.getElementById('lineHeights').checked ? [{text: 'Single', value: 1}, {text: 'Double', value: 2}] : undefined,
         paragraphStyles: document.getElementById('paragraphStyles').checked ? ['spaced', {name: 'Box', class: '__se__customClass'}] : undefined,
@@ -516,6 +531,7 @@ <h2 class="sub-title">Applied options</h2>
             'outdent', 'indent',
             'align', 'horizontalRule', 'list', 'lineHeight',
             'table', 'link', 'image', 'video', 'audio', 'math',
+            'imageGallery',
             'fullScreen', 'showBlocks', 'codeView',
             'preview', 'print', 'save', 'template']
         ],

diff --git a/sample/html/out/document-editor.html b/sample/html/out/document-editor.html
@@ -1220,10 +1220,8 @@ <h5>Parameters:</h5>
             <h4 class="name" id="insertComponent"><span class="type-signature"></span>insertComponent<span class="signature">(element, notHistoryPush)</span><span
                     class="type-signature"> &rarr; {Element}</span></h4>
             <div class="description">
-                The method to insert a element. (used elements : table, hr, image, video)<br>
-                This method is add the element next line and insert the new line.<br>
-                When used in a tag in "LI", it is inserted into the LI tag.<br>
-                Returns the first node of next line added.<br>
+                The method to insert a element and return. (used elements : table, hr, image, video)<br>
+                If "element" is "HR", insert and return the new line.
             </div>
             <h5>Parameters:</h5>
             <table class="params">

diff --git a/sample/html/out/document-module.html b/sample/html/out/document-module.html
@@ -29,8 +29,8 @@ <h2>Modules</h2>
                     <dd><span style="color: #f4b124;">+</span> These are modules that can be used in plugins.</dd>
                     <dd><span style="color: #f4b124;">+</span> For detailed usage, please refer to the code of the plugins using the module.</dd>
                     <dd><span style="color: #f4b124;">- dialog : </span> all dialog plugins (<a style="color:#ff5565" href="../customPlugins.html#dialog">example</a>)</dd>
-                    <dd><span style="color: #f4b124;">- component : </span> image, video</dd>
-                    <dd><span style="color: #f4b124;">- fileManager : </span> image, video</dd>
+                    <dd><span style="color: #f4b124;">- component : </span> image, video (<a style="color:#ff5565" href="../customPlugins.html#dialog_component_filemanager">example</a>)</dd>
+                    <dd><span style="color: #f4b124;">- fileManager : </span> image, video (<a style="color:#ff5565" href="../customPlugins.html#dialog_component_filemanager">example</a>)</dd>
                     <dd><span style="color: #f4b124;">- resizing : </span> image, video</dd>
                 </dl>
             </div>

diff --git a/sample/html/out/document-user.html b/sample/html/out/document-user.html
@@ -33,10 +33,37 @@ <h3 class="subsection-title" id="titleFunction">functions</h3>
             <div class="description">
             </div>
 
+            <h4 class="name" id="setToolbarButtons"><span class="type-signature"></span>setToolbarButtons<span
+                    class="signature">(buttonList)</span></h4>
+            <div class="description">
+                Reset the buttons on the toolbar. (Editor is not reloaded)<br>
+                You cannot set a new plugin for the button.
+            </div>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>buttonList</code></td>
+                    <td class="type">
+                        <span class="param-type">Array</span>
+                    </td>
+                    <td class="description last">Button list</td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="setOptions"><span class="type-signature"></span>setOptions<span
                     class="signature">(options)</span></h4>
             <div class="description">
-                Add or reset option property.
+                Add or reset option property. (Editor is reloaded)
             </div>
             <table class="params">
                 <thead>
@@ -59,6 +86,34 @@ <h4 class="name" id="setOptions"><span class="type-signature"></span>setOptions<
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="setDefaultStyle"><span class="type-signature"></span>setDefaultStyle<span
+                    class="signature">(style)</span></h4>
+            <div class="description">
+                Set "options.defaultStyle" style.<br>
+                Define the style of the edit area.<br>
+                It can also be defined with the "setOptions" method, but the "setDefaultStyle" method does not render the editor again.
+            </div>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>style</code></td>
+                    <td class="type">
+                        <span class="param-type">String</span>
+                    </td>
+                    <td class="description last">Style string</td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="noticeOpen"><span class="type-signature"></span>noticeOpen<span
                     class="signature">(message)</span></h4>
             <div class="description">
@@ -1399,6 +1454,72 @@ <h4 class="name" id="showInline"><span class="type-signature"></span>showInline<
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="toggleCodeView"><span class="type-signature"></span>toggleCodeView<span
+                    class="signature">(isCodeView, core)</span><span class="type-signature"></span></h4>
+            <div class="description">
+                An event when toggling between code view and wysiwyg view.
+            </div>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>isCodeView</code></td>
+                    <td class="type">
+                        <span class="param-type">Boolean</span>
+                    </td>
+                    <td class="description last">Whether the current code view mode</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>core</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last"><a href="document-editor.html">Core Object</a></td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
+
+            <h4 class="name" id="toggleFullScreen"><span class="type-signature"></span>toggleFullScreen<span
+                    class="signature">(isFullScreen, core)</span><span class="type-signature"></span></h4>
+            <div class="description">
+                An event when toggling full screen.
+            </div>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>isFullScreen</code></td>
+                    <td class="type">
+                        <span class="param-type">Boolean</span>
+                    </td>
+                    <td class="description last">Whether the current full screen mode</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>core</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last"><a href="document-editor.html">Core Object</a></td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="showController"><span class="type-signature"></span>showController<span
                     class="signature">(name, controllers, core)</span><span class="type-signature"></span></h4>
             <div class="description">
@@ -1449,7 +1570,9 @@ <h3><a href="index.html">Index</a></h3>
     <h3>Functions & Events</h3>
     <ul>
         <li><a href="document-user.html#titleFunction"><h4 class="subsection-title" style="font-size: 20px;">functions</h4></a></li>
+        <li><a href="document-user.html#setToolbarButtons">setToolbarButtons</a></li>
         <li><a href="document-user.html#setOptions">setOptions</a></li>
+        <li><a href="document-user.html#setDefaultStyle">setDefaultStyle</a></li>
         <li><a href="document-user.html#noticeOpen">noticeOpen</a></li>
         <li><a href="document-user.html#noticeClose">noticeClose</a></li>
         <li><a href="document-user.html#save">save</a></li>
@@ -1491,6 +1614,8 @@ <h3>Functions & Events</h3>
         <li><a href="document-user.html#onAudioUploadBefore">onAudioUploadBefore</a></li>
         <li><a href="document-user.html#onAudioUpload">onAudioUpload</a></li>
         <li><a href="document-user.html#onAudioUploadError">onAudioUploadError</a></li>
+        <li><a href="document-user.html#toggleCodeView">toggleCodeView</a></li>
+        <li><a href="document-user.html#toggleFullScreen">toggleFullScreen</a></li>
         <li><a href="document-user.html#showInline">showInline</a></li>
         <li><a href="document-user.html#showController">showController</a></li>
     </ul>

diff --git a/sample/html/out/document-util.html b/sample/html/out/document-util.html
@@ -478,7 +478,7 @@ <h5>Parameters:</h5>
             <h4 class="name" id="isMediaComponent"><span class="type-signature"></span>isMediaComponent<span class="signature">(element)</span><span
                     class="type-signature"> &rarr; {Boolean}</span></h4>
             <div class="description">
-                It is judged whether it is the component [img, iframe] cover(element className - ".se-component")
+                It is judged whether it is the component [img, iframe, video, audio] cover(element className - ".se-component")
             </div>
             <h5>Parameters:</h5>
             <table class="params">

diff --git a/sample/html/out/index.html b/sample/html/out/index.html
@@ -99,7 +99,7 @@ <h4 class="name" id="plugins">Plugins</h4>
                     </tr>
                     <tr>
                         <td align="left">image</td>
-                        <td align="left" rowspan="4"><strong>dialog</strong></td>
+                        <td align="left" rowspan="5"><strong>dialog</strong></td>
                     </tr>
                     <tr>
                         <td align="left">link</td>
@@ -153,6 +153,10 @@ <h4 class="name" id="plugins">Plugins</h4>
                     <tr>
                         <td align="left">textStyle</td>
                     </tr>
+                    <tr>
+                        <td align="left">imageGallery</td>
+                        <td align="left"><strong>fileBrowser</strong></td>
+                    </tr>
                 </tbody>
             </table>