2.29.0

JiHong88 · May 8, 2020 · d7d834c · d7d834c
2 parents b7b3a1b + 9865010
commit d7d834c
Show file tree

Hide file tree

Showing 78 changed files with 5,757 additions and 1,858 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,8 +4,8 @@
 # project files
 .vscode/**
 .idea/**
-out
-gen
+.out/**
+.gen/**
 
 # modules
 node_modules/**

diff --git a/.npmignore b/.npmignore
@@ -24,4 +24,5 @@ test/
 karma.conf.js
 bower.json
 webpack.*.js
+tsconfig.json
 package-lock.json
diff --git a/README.md b/README.md
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.28.4",
+  "version": "2.29.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.28.4",
+  "version": "2.29.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

diff --git a/sample/css/sample.css b/sample/css/sample.css
@@ -34,7 +34,7 @@ footer {
  }
 
  /** image list */
- .image-list {
+ .component-list {
     display: flex;
     box-sizing: border-box;
     position: relative;
@@ -75,7 +75,7 @@ footer {
     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 }
 
-.image-list .files-text {
+.component-list .files-text {
     display: inline-block;
     margin: 0 -12px!important;
     padding: 0 12px!important;
@@ -93,7 +93,7 @@ footer {
     background: 0 0;
 }
 
-.image-list .files-input {
+.component-list .files-input {
     position: absolute;
     width: 112px;
     left: 14px;
@@ -106,40 +106,40 @@ footer {
     cursor: pointer;
 }
 
-.image-list * {
+.component-list * {
     font-size: 13px;
     box-sizing: border-box;
 }
 
-.image-list button {
+.component-list button {
     margin: 0 !important;
 }
 
-.image-list .file-list-info {
+.component-list .file-list-info {
     float: left;
     white-space: nowrap;
     padding: 10px;
     background: #f5f5f5;
     border: 1px solid #ccc;
 }
 
-.image-list .file-list-info span {
+.component-list .file-list-info span {
     display: block;
     width: 100%;
     margin: 12px 0;
 }
 
-.image-list .file-list-info .total-size {
+.component-list .file-list-info .total-size {
     color: #333;
 }
 
-.image-list .file-list {
+.component-list .file-list {
     padding: 0 0 0 0;
     margin: 0 0 0 10px;
     border: none;
 }
 
-.image-list .file-list ul {
+.component-list .file-list ul {
     margin: 0;
     padding: 0;
     height: auto;
@@ -148,7 +148,7 @@ footer {
     border: 1px solid #ccc;
 }
 
-.image-list .file-list ul li {
+.component-list .file-list ul li {
     position: relative;
     display: inline-block;
     margin: 3px;
@@ -157,26 +157,26 @@ footer {
     border: 3px solid #fff;
 }
 
-.image-list .file-list ul li .image-wrapper {
+.component-list .file-list ul li .image-wrapper {
     width: 54px;
     height: 54px;;
 }
 
-.image-list .file-list ul li.checked {
+.component-list .file-list ul li.checked {
     border: 3px solid #dc3545;
 }
 
-.image-list .file-list ul li img {
+.component-list .file-list ul li img {
     width: 100%;
     height: auto;
 }
 
-.image-list .file-list ul li .image-size {
+.component-list .file-list ul li .image-size {
     color: #666;
     font-size: 10px;
 }
 
-.image-list .file-list ul li .image-check {
+.component-list .file-list ul li .image-check {
     position: absolute;
     height: 12px;
     width: 12px;;
@@ -191,15 +191,15 @@ footer {
     background-color: #dc3545;
 }
 
-.image-list .file-list ul li.checked .image-check {
+.component-list .file-list ul li.checked .image-check {
     display: block;
 }
 
-.image-list .file-list ul li:not(.checked) .image-check {
+.component-list .file-list ul li:not(.checked) .image-check {
     display: none;
 }
 
-.image-list .file-list ul li .image-check svg {
+.component-list .file-list ul li .image-check svg {
     display: inline-block;
     font-size: 10px;
     height: 1em;
@@ -212,21 +212,21 @@ footer {
 }
 
 /** video */
-.image-list .video-file-list {
+.component-list .component-file-list {
     width: 100%;
     padding: 0 0 0 0;
     margin: 0 0 0 10px;
     border: none;
 }
-.image-list .video-file-list ul {
+.component-list .component-file-list ul {
     margin: 0;
     padding: 0;
     height: auto;
     width: 100%;
     background-color: #f5f5f5;
     border: 1px solid #ccc;
 }
-.image-list .video-file-list ul li {
+.component-list .component-file-list ul li {
     position: relative;
     display: inline-block;
     width: 100%;
@@ -235,11 +235,11 @@ footer {
     border: 0;
     overflow: hidden;
 }
-.image-list .video-file-list ul li button{
+.component-list .component-file-list ul li button{
     width: 30px;
     height: 24px;
     padding: 0;
 }
-.image-list .video-file-list ul li a{
+.component-list .component-file-list ul li a{
     color: #333;
 }
diff --git a/sample/html/customPlugins.html b/sample/html/customPlugins.html
diff --git a/sample/html/examples.html b/sample/html/examples.html
diff --git a/sample/html/options.html b/sample/html/options.html
@@ -87,6 +87,7 @@ <h4 style="color: #b94a48;">--Layout</h4>
                 <option value="en" selected>en</option>
                 <option value="es">es</option>
                 <option value="fr">fr</option>
+                <option value="it">it</option>
                 <option value="ja">ja</option>
                 <option value="ko">ko</option>
                 <option value="pt_br">pt_br</option>
@@ -223,7 +224,7 @@ <h4 style="color: #b94a48;">--Image</h4>
             <label><input type="radio" id="radio_imageRotation_2" name="radio_imageRotation" value="%">&nbsp;&nbsp;false</label>
             <br><br>
             <label><input type="checkbox" id="imageUploadHeader">&nbsp;&nbsp;imageUploadHeader</label>
-            <textarea id="imageUploadHeader_value" placeholder='{"Access-Control-Allow-Origin": "*"}' style="width: 300px; vertical-align: top;"></textarea>
+            <textarea id="imageUploadHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
             <br><br>
             <label><input type="checkbox" id="imageUploadUrl">&nbsp;&nbsp;imageUploadUrl</label>
             <input type="text" id="imageUploadUrl_value" placeholder="Server upload URL" style="width: 200px">
@@ -233,10 +234,10 @@ <h4 style="color: #b94a48;">--Image</h4>
 
             <br>
             <h4 style="color: #b94a48;">--Video</h4>
-            <label><input type="checkbox" id="videoResizing" checked>&nbsp;&nbsp;videoResizing</label>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <label><input type="checkbox" id="videoHeightShow" checked>&nbsp;&nbsp;videoHeightShow</label>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="videoResizing" checked>&nbsp;&nbsp;videoResizing</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="videoFileInput">&nbsp;&nbsp;videoFileInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="videoUrlInput" checked>&nbsp;&nbsp;videoUrlInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="videoHeightShow" checked>&nbsp;&nbsp;videoHeightShow</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <label><input type="checkbox" id="videoRatioShow" checked>&nbsp;&nbsp;videoRatioShow</label>
             <br><br>
             <label><input type="checkbox" id="videoWidth">&nbsp;&nbsp;videoWidth</label>
@@ -261,8 +262,45 @@ <h4 style="color: #b94a48;">--Video</h4>
             <br><br>
             <label><input type="checkbox" id="youtubeQuery">&nbsp;&nbsp;youtubeQuery</label>
             <input type="text" id="youtubeQuery_value" placeholder="String.. (autoplay=1&mute=1)" style="width:220px">
+            <br><br>
+            <label><input type="checkbox" id="videoUploadHeader">&nbsp;&nbsp;videoUploadHeader</label>
+            <textarea id="videoUploadHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
+            <br><br>
+            <label><input type="checkbox" id="videoUploadUrl">&nbsp;&nbsp;videoUploadUrl</label>
+            <input type="text" id="videoUploadUrl_value" placeholder="Server upload URL" style="width: 200px">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="videoUploadSizeLimit">&nbsp;&nbsp;videoUploadSizeLimit</label>
+            <input type="text" id="videoUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
+
+            <br>
+            <h4 style="color: #b94a48;">--Audio</h4>
+            <label><input type="checkbox" id="audioFileInput">&nbsp;&nbsp;audioFileInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="audioUrlInput" checked>&nbsp;&nbsp;audioUrlInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <br><br>
+            <label><input type="checkbox" id="audioWidth">&nbsp;&nbsp;audioWidth</label>
+            <input type="text" id="audioWidth_value" placeholder="String.. (300px)">
+            <br><br>
+            <label><input type="checkbox" id="audioHeight">&nbsp;&nbsp;audioHeight</label>
+            <input type="text" id="audioHeight_value" placeholder="String.. (54px)">
+            <br><br>
+            <label><input type="checkbox" id="audioUploadHeader">&nbsp;&nbsp;audioUploadHeader</label>
+            <textarea id="audioUploadHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
+            <br><br>
+            <label><input type="checkbox" id="audioUploadUrl">&nbsp;&nbsp;audioUploadUrl</label>
+            <input type="text" id="audioUploadUrl_value" placeholder="Server upload URL" style="width: 200px">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <label><input type="checkbox" id="audioUploadSizeLimit">&nbsp;&nbsp;audioUploadSizeLimit</label>
+            <input type="text" id="audioUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
+
+            <br>
+            <h4 style="color: #b94a48;">--Table</h4>
+            <label><input type="checkbox" id="tableCellControllerPosition">&nbsp;&nbsp;tableCellControllerPosition</label>
+            <input type="text" id="tableCellControllerPosition_value" placeholder="String.. (cell, top)">
 
             <br>
+            <h4 style="color: #b94a48;">--Key actions</h4>
+            <label><input type="checkbox" id="tabDisable">&nbsp;&nbsp;tabDisable</label><br>
+
             <h4 style="color: #b94a48;">--Defining save button</h4>
             <label><input type="checkbox" id="callBackSave">&nbsp;&nbsp;callBackSave</label><br>
             <span>function (contents) { alert(contents) }</span>
@@ -296,7 +334,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 class="image-list">
+        <div class="component-list">
             <div class="file-list-info">
                 <span>Attached files</span>
                 <span class="xefu-btn">
@@ -353,6 +391,7 @@ <h2 class="sub-title">Applied options</h2>
 <script src="../../src/lang/en.js"></script>
 <script src="../../src/lang/es.js"></script>
 <script src="../../src/lang/fr.js"></script>
+<script src="../../src/lang/it.js"></script>
 <script src="../../src/lang/ja.js"></script>
 <script src="../../src/lang/ko.js"></script>
 <script src="../../src/lang/pt_br.js"></script>
@@ -436,6 +475,8 @@ <h2 class="sub-title">Applied options</h2>
         imageUploadSizeLimit: document.getElementById('imageUploadSizeLimit').checked ? document.getElementById('imageUploadSizeLimit_value').value : undefined,
         videoResizing: document.getElementById('videoResizing').checked ? undefined : false,
         videoHeightShow: document.getElementById('videoHeightShow').checked ? undefined : false,
+        videoFileInput: document.getElementById('videoFileInput').checked ? undefined : false,
+        videoUrlInput: document.getElementById('videoUrlInput').checked ? undefined : false,
         videoRatioShow: document.getElementById('videoRatioShow').checked ? undefined : false,
         videoWidth: document.getElementById('videoWidth').checked ? document.getElementById('videoWidth_value').value : undefined,
         videoHeight: document.getElementById('videoHeight').checked ? document.getElementById('videoHeight_value').value : undefined,
@@ -446,6 +487,18 @@ <h2 class="sub-title">Applied options</h2>
             {name: 'Classic Film 3:2', value: 0.6666}, {name: 'HD', value: 0.5625}
         ],
         youtubeQuery: document.getElementById('youtubeQuery').checked ? document.getElementById('youtubeQuery_value').value : undefined,
+        videoUploadHeader: document.getElementById('videoUploadHeader').checked ? JSON.parse(document.getElementById('videoUploadHeader_value').value) : undefined,
+        videoUploadUrl: document.getElementById('videoUploadUrl').checked ? document.getElementById('videoUploadUrl_value').value : undefined,
+        videoUploadSizeLimit: document.getElementById('videoUploadSizeLimit').checked ? document.getElementById('videoUploadSizeLimit_value').value : undefined,
+        audioFileInput: document.getElementById('audioFileInput').checked ? true : undefined,
+        audioUrlInput: document.getElementById('audioUrlInput').checked ? undefined : false,
+        audioWidth: document.getElementById('audioWidth').checked ? document.getElementById('audioWidth_value').value : undefined,
+        audioHeight: document.getElementById('audioHeight').checked ? document.getElementById('audioHeight_value').value : undefined,
+        audioUploadHeader: document.getElementById('audioUploadHeader').checked ? JSON.parse(document.getElementById('audioUploadHeader_value').value) : undefined,
+        audioUploadUrl: document.getElementById('audioUploadUrl').checked ? document.getElementById('audioUploadUrl_value').value : undefined,
+        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,
         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,
@@ -462,7 +515,7 @@ <h2 class="sub-title">Applied options</h2>
             'removeFormat',
             'outdent', 'indent',
             'align', 'horizontalRule', 'list', 'lineHeight',
-            'table', 'link', 'image', 'video', 'math',
+            'table', 'link', 'image', 'video', 'audio', 'math',
             'fullScreen', 'showBlocks', 'codeView',
             'preview', 'print', 'save', 'template']
         ],