2.32.0

JiHong88 · Jul 19, 2020 · f9b02f3 · f9b02f3
2 parents c291509 + b535707
commit f9b02f3
Show file tree

Hide file tree

Showing 17 changed files with 305 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -630,10 +630,14 @@ 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}
+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;" }
 
 // 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}
+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}
@@ -658,6 +662,8 @@ 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}
+audioTagAttrs    : Define "Attributes" of the audio tag.        default: null {Object} 
+                   ex) { controlslist: "nodownload", autoplay: true }
 
 // Table----------------------------------------------------------------------------------------------------------
 tableCellControllerPosition : Define position to the table cell controller('cell', 'top'). default: 'cell' {String}
@@ -957,16 +963,31 @@ editor.onload = function (core, reload) {
     console.log('onload-reload', reload)
 }
 
-// Paste event.
+// 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
+ * e: Event object
+ * clipboardData: event.clipboardData
+ * core: Core object
+ */
+editor.onCopy = function (e, clipboardData, core) { console.log('onCopy', e) }
+/**
+ * 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.

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.31.2",
+  "version": "2.32.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.31.2",
+  "version": "2.32.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

diff --git a/sample/html/examples.html b/sample/html/examples.html
@@ -932,6 +932,8 @@
         suneditor.onDrop = function (e) { console.log('onDrop', e) }
         suneditor.onChange = function (contents) { console.log('onChange', contents) }
         suneditor.onPaste = function (e, cleanData, maxCharCount, core) { console.log('onPaste', e, cleanData, maxCharCount) }
+        suneditor.onCopy = function (e, clipboardData, core) { console.log('onCopy', e, clipboardData) }
+        suneditor.onCut = function (e, clipboardData, core) { console.log('onCut', e, clipboardData) }
         suneditor.onFocus = function (contents) { console.log('onFocus', contents) }
         suneditor.onBlur = function (contents) { console.log('onBlur', contents) }
         suneditor.onImageUpload = function (targetElement, index, state, imageInfo, remainingFilesCount) { 

diff --git a/sample/html/options.html b/sample/html/options.html
@@ -287,6 +287,12 @@ <h4 style="color: #b94a48;">--Video</h4>
             <input type="text" id="videoUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
             <br><br>
             <label><input type="checkbox" id="videoMultipleFile">&nbsp;&nbsp;videoMultipleFile</label>
+            <br><br>
+            <label><input type="checkbox" id="videoTagAttrs">&nbsp;&nbsp;videoTagAttrs&nbsp; &nbsp; &nbsp; </label>
+            <textarea type="text" id="videoTagAttrs_value" placeholder='{"poster": "http://suneditor.com/docs/loading.gif", "autoplay": "true"}' style="width: 300px; height: 100px;; vertical-align: top;"></textarea>
+            <br><br>
+            <label><input type="checkbox" id="videoIframeAttrs">&nbsp;&nbsp;videoIframeAttrs</label>
+            <textarea type="text" id="videoIframeAttrs_value" placeholder='{"style": "border: 2px solid red;"}' style="width: 300px; height: 100px;; vertical-align: top;"></textarea>
 
             <br>
             <h4 style="color: #b94a48;">--Audio</h4>
@@ -309,6 +315,9 @@ <h4 style="color: #b94a48;">--Audio</h4>
             <input type="text" id="audioUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
             <br><br>
             <label><input type="checkbox" id="audioMultipleFile">&nbsp;&nbsp;audioMultipleFile</label>
+            <br><br>
+            <label><input type="checkbox" id="audioTagAttrs">&nbsp;&nbsp;audioTagAttrs</label>
+            <textarea type="text" id="audioTagAttrs_value" placeholder='{"controlslist": "nodownload", "autoplay": "true"}' style="width: 300px; height: 100px;; vertical-align: top;"></textarea>
 
             <br>
             <h4 style="color: #b94a48;">--Table</h4>
@@ -521,6 +530,8 @@ <h2 class="sub-title">Applied options</h2>
         videoUploadUrl: document.getElementById('videoUploadUrl').checked ? document.getElementById('videoUploadUrl_value').value : undefined,
         videoMultipleFile: document.getElementById('videoMultipleFile').checked ? true : undefined,
         videoUploadSizeLimit: document.getElementById('videoUploadSizeLimit').checked ? document.getElementById('videoUploadSizeLimit_value').value : undefined,
+        videoTagAttrs: document.getElementById('videoTagAttrs').checked ? JSON.parse(document.getElementById('videoTagAttrs_value').value) : undefined,
+        videoIframeAttrs: document.getElementById('videoIframeAttrs').checked ? JSON.parse(document.getElementById('videoIframeAttrs_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,
@@ -529,6 +540,7 @@ <h2 class="sub-title">Applied options</h2>
         audioUploadUrl: document.getElementById('audioUploadUrl').checked ? document.getElementById('audioUploadUrl_value').value : undefined,
         audioMultipleFile: document.getElementById('audioMultipleFile').checked ? true : undefined,
         audioUploadSizeLimit: document.getElementById('audioUploadSizeLimit').checked ? document.getElementById('audioUploadSizeLimit_value').value : undefined,
+        audioTagAttrs: document.getElementById('audioTagAttrs').checked ? JSON.parse(document.getElementById('audioTagAttrs_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,

diff --git a/sample/html/out/document-editor.html b/sample/html/out/document-editor.html
@@ -487,6 +487,14 @@ <h4 class="name" id="currentControllerTarget"><span class="type-signature"></spa
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="currentFileComponentInfo"><span class="type-signature"></span>currentFileComponentInfo<span
+                    class="type-signature"></span></h4>
+            <div class="description">
+                The file component object of current selected file tag (getFileComponent(): {target, component, pluginName})
+            </div>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="controllerFunction"><span class="type-signature"></span>controllerFunction<span
                     class="type-signature"></span></h4>
             <div class="description">
@@ -1359,7 +1367,7 @@ <h4 class="name" id="getFileComponent"><span class="type-signature"></span>getFi
                     class="type-signature"> &rarr; {Object}</span></h4>
             <div class="description">
                 Gets the file component and that plugin name<br>
-                return: {component, pluginName} | null
+                return: {target, component, pluginName} | null
             </div>
             <h5>Parameters:</h5>
             <table class="params">
@@ -2149,6 +2157,7 @@ <h3>core</h3>
         <li><a href="document-editor.html#controllerArray">controllerArray</a></li>
         <li><a href="document-editor.html#currentControllerName">currentControllerName</a></li>
         <li><a href="document-editor.html#currentControllerTarget">currentControllerTarget</a></li>
+        <li><a href="document-editor.html#currentFileComponentInfo">currentFileComponentInfo</a></li>
         <li><a href="document-editor.html#controllerFunction">controllerFunction</a></li>
         <li><a href="document-editor.html#codeViewDisabledButtons">codeViewDisabledButtons</a></li>
         <li><a href="document-editor.html#resizingDisabledButtons">resizingDisabledButtons</a></li>

diff --git a/sample/html/out/document-user.html b/sample/html/out/document-user.html
@@ -913,6 +913,90 @@ <h4 class="name" id="onPaste"><span class="type-signature"></span>onPaste<span
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="onCopy"><span class="type-signature"></span>onCopy<span
+                    class="signature">(event, clipboardData, core)</span><span class="type-signature"></span></h4>
+            <div class="description">
+                Copy event.<br>
+                Called before the editor's default event action.<br>
+                If it returns false, it stops without executing the rest of the action.
+            </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>event</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last">Event Object</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>clipboardData</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last">event.clipboardData</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="onCut"><span class="type-signature"></span>onCut<span
+                    class="signature">(event, clipboardData, core)</span><span class="type-signature"></span></h4>
+            <div class="description">
+                Cut event.<br>
+                Called before the editor's default event action.<br>
+                If it returns false, it stops without executing the rest of the action.
+            </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>event</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last">Event Object</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>clipboardData</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last">event.clipboardData</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="onImageUploadBefore"><span class="type-signature"></span>onImageUploadBefore<span
                     class="signature">(files, info, core, uploadHandler)</span><span class="type-signature"> &rarr; {Boolean|Array|undefined}</span></h4>
             <div class="description">
@@ -1767,6 +1851,8 @@ <h3>Functions & Events</h3>
         <li><a href="document-user.html#onFocus">onFocus</a></li>
         <li><a href="document-user.html#onBlur">onBlur</a></li>
         <li><a href="document-user.html#onPaste">onPaste</a></li>
+        <li><a href="document-user.html#onCopy">onCopy</a></li>
+        <li><a href="document-user.html#onCut">onCut</a></li>
         <li><a href="document-user.html#onImageUploadBefore">onImageUploadBefore</a></li>
         <li><a href="document-user.html#onImageUpload">onImageUpload</a></li>
         <li><a href="document-user.html#onImageUploadError">onImageUploadError</a></li>

diff --git a/src/assets/css/suneditor-contents.css b/src/assets/css/suneditor-contents.css
@@ -334,6 +334,10 @@
 .sun-editor-editable[contenteditable=true] .se-component {
     outline: 1px dashed #e1e1e1;
 }
+/** component copy effect */
+.sun-editor-editable[contenteditable=true] .se-component.se-component-copy {
+    -webkit-box-shadow:0 0 0 0.2rem #80bdff; box-shadow:0 0 0 0.2rem #3f9dff; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
 
 /** image, video .. */
 .sun-editor-editable img, .sun-editor-editable iframe, .sun-editor-editable video, .sun-editor-editable audio {

diff --git a/src/lib/constructor.js b/src/lib/constructor.js
@@ -455,6 +455,8 @@ export default {
         options.videoUploadUrl = typeof options.videoUploadUrl === 'string' ? options.videoUploadUrl : null;
         options.videoUploadSizeLimit = /\d+/.test(options.videoUploadSizeLimit) ? util.getNumber(options.videoUploadSizeLimit, 0) : null;
         options.videoMultipleFile = !!options.videoMultipleFile;
+        options.videoTagAttrs = options.videoTagAttrs || null;
+        options.videoIframeAttrs = options.videoIframeAttrs || null;
         /** Audio */
         options.audioWidth = !options.audioWidth ? '' : util.isNumber(options.audioWidth) ? options.audioWidth + 'px' : options.audioWidth;
         options.audioHeight = !options.audioHeight ? '' : util.isNumber(options.audioHeight) ? options.audioHeight + 'px' : options.audioHeight;
@@ -464,6 +466,7 @@ export default {
         options.audioUploadUrl = typeof options.audioUploadUrl === 'string' ? options.audioUploadUrl : null;
         options.audioUploadSizeLimit = /\d+/.test(options.audioUploadSizeLimit) ? util.getNumber(options.audioUploadSizeLimit, 0) : null;
         options.audioMultipleFile = !!options.audioMultipleFile;
+        options.audioTagAttrs = options.audioTagAttrs || null;
         /** Table */
         options.tableCellControllerPosition = typeof options.tableCellControllerPosition === 'string' ? options.tableCellControllerPosition.toLowerCase() : 'cell';
         /** Key actions */

diff --git a/src/lib/core.d.ts b/src/lib/core.d.ts
@@ -17,6 +17,7 @@ type fileInfo =  {
     element: Element;
     src: string;
 };
+type seledtedFileInfo = Record<string, string | Element>;
 
 interface Core {
     /**
@@ -109,6 +110,11 @@ interface Core {
      */
     currentControllerTarget: Element;
 
+    /**
+     * @description The file component object of current selected file tag (getFileComponent(): {target, component, pluginName})
+     */
+    currentFileComponentInfo: seledtedFileInfo;
+
     /**
      * @description An array of buttons whose class name is not "se-code-view-enabled"
      */
@@ -340,11 +346,11 @@ interface Core {
 
     /**
      * @description Gets the file component and that plugin name
-     * return: {component, pluginName} | null
+     * return: {target, component, pluginName} | null
      * @param element Target element (figure tag, component div, file tag)
      * @returns
      */
-    getFileComponent(element: Element): Record<string, string | Element> | null;
+    getFileComponent(element: Element): seledtedFileInfo | null;
 
     /**
      * @description The component(image, video) is selected and the resizing module is called.
@@ -593,6 +599,8 @@ export default class SunEditor {
     onChange: (contents: string, core: Core) => void;
     onBlur: (e: FocusEvent, core: Core) => void;
     onPaste: (e: Event, cleanData: string, maxCharCount: number, core: Core) => void;
+    onCopy: (e: Event, clipboardData: any, core: Core) => void;
+    onCut: (e: Event, clipboardData: any, core: Core) => void;
 
     /**
      * @description Called just before the inline toolbar is positioned and displayed on the screen.