fix: #292 #297 #299 #302

improve the HTML consistency check, paste behavior, add: core-nativeFocus, util-isTextStyleElement, improved: cleanHTML, convertContentsForEditor, improved: insertNode, removeNode, insertHTML
JiHong88 · Mar 29, 2020 · 918ec86 · 918ec86
1 parent 3b5d34d
commit 918ec86
Show file tree

Hide file tree

Showing 9 changed files with 337 additions and 133 deletions.
diff --git a/sample/html/out/document-editor.html b/sample/html/out/document-editor.html
@@ -942,6 +942,14 @@ <h5>Parameters:</h5>
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="nativeFocus"><span class="type-signature"></span>nativeFocus<span class="signature">()</span><span
+                    class="type-signature"></span></h4>
+            <div class="description">
+                Focus to wysiwyg area using "native focus function"
+            </div>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="focus"><span class="type-signature"></span>focus<span class="signature">()</span><span
                     class="type-signature"></span></h4>
             <div class="description">
@@ -1968,6 +1976,7 @@ <h3>core</h3>
         <li><a href="document-editor.html#controllersOn">controllersOn</a></li>
         <li><a href="document-editor.html#controllersOff">controllersOff</a></li>
         <li><a href="document-editor.html#execCommand">execCommand</a></li>
+        <li><a href="document-editor.html#nativeFocus">nativeFocus</a></li>
         <li><a href="document-editor.html#focus">focus</a></li>
         <li><a href="document-editor.html#focusEdge">focusEdge</a></li>
         <li><a href="document-editor.html#setRange">setRange</a></li>

diff --git a/sample/html/out/document-util.html b/sample/html/out/document-util.html
@@ -335,6 +335,34 @@ <h5>Parameters:</h5>
             <dl class="details"></dl>
 
 
+            <h4 class="name" id="isTextStyleElement"><span class="type-signature"></span>isTextStyleElement<span class="signature">(element)</span><span
+                    class="type-signature"> &rarr; {Boolean}</span></h4>
+            <div class="description">
+                It is judged whether it is a node related to the text style.<br>
+                (strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label)
+            </div>
+            <h5>Parameters:</h5>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>element</code></td>
+                    <td class="type">
+                        <span class="param-type">Element</span>
+                    </td>
+                    <td class="description last">The element to check</td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
+
             <h4 class="name" id="isFormatElement"><span class="type-signature"></span>isFormatElement<span class="signature">(element)</span><span
                     class="type-signature"> &rarr; {Boolean}</span></h4>
             <div class="description">
@@ -2111,6 +2139,7 @@ <h3>util</h3>
         <li><a href="document-util.html#getAttributesToString">getAttributesToString</a></li>
         <li><a href="document-util.html#getByteLength">getByteLength</a></li>
         <li><a href="document-util.html#isWysiwygDiv">isWysiwygDiv</a></li>
+        <li><a href="document-util.html#isTextStyleElement">isTextStyleElement</a></li>
         <li><a href="document-util.html#isFormatElement">isFormatElement</a></li>
         <li><a href="document-util.html#isRangeFormatElement">isRangeFormatElement</a></li>
         <li><a href="document-util.html#isFreeFormatElement">isFreeFormatElement</a></li>

diff --git a/src/assets/css/suneditor.css b/src/assets/css/suneditor.css
@@ -100,6 +100,9 @@
 .sun-editor .se-btn-primary:hover, .sun-editor .se-btn-primary:focus {color:#000; background-color:#80bdff; border-color:#3f9dff; outline:0 none;}
 .sun-editor .se-btn-primary:active {color:#fff; background-color:#3f9dff; border-color:#4592ff; -webkit-box-shadow:inset 0 3px 5px #4592ff; box-shadow:inset 0 3px 5px #4592ff;}
 
+/** --- Input focus effect */
+.sun-editor input:focus, .sun-editor select:focus, .sun-editor textarea:focus  {border-color:#80bdff !important; border-width:1px; border-style:solid; outline:0; -webkit-box-shadow:0 0 0 0.2rem #c7deff; box-shadow:0 0 0 0.2rem #c7deff;}
+
 /* se-btn button active*/
 .sun-editor .se-btn:enabled.active {color:#4592ff; outline:0 none;}
 .sun-editor .se-btn:enabled.active:hover, .sun-editor .se-btn:enabled.active:focus {background-color:#e1e1e1; border-color:#d1d1d1; outline:0 none;}
@@ -203,7 +206,6 @@
 /* submenu layer - form group (color selector) */
 .sun-editor .se-submenu-form-group {display:flex; width:100%; height:auto; padding:4px;}
 .sun-editor .se-submenu-form-group input {flex:auto; display:inline-block; width:auto; height:33px; color:#555; font-size:12px; margin:1px 0 1px 0; padding:0; border-radius:0.25rem; border:1px solid #ccc;}
-.sun-editor .se-submenu-form-group input:focus {border-color:#80bdff; outline:0; -webkit-box-shadow:0 0 0 0.2rem #c7deff; box-shadow:0 0 0 0.2rem #c7deff;}
 .sun-editor .se-submenu-form-group button {float:right; width:34px; height:34px; margin:0 0 0 4px !important;}
 .sun-editor .se-submenu-form-group button.se-btn {border:1px solid #ccc;}
 .sun-editor .se-submenu-form-group > div {position:relative;}
@@ -263,7 +265,6 @@
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-select {display:inline-block; width:auto; height:34px; font-size:14px; text-align:center; line-height:1.42857143; color:#000; border:1px solid #ccc; border-radius:4px; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-control {display:inline-block; width:70px; height:34px; font-size:14px; text-align:center; line-height:1.42857143; color:#000; border:1px solid #ccc; border-radius:4px; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-form {display:block; width:100%; height:34px; font-size:14px; line-height:1.42857143; padding:0 4px; color:#000; border:1px solid #ccc; border-radius:4px; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
-.sun-editor .se-dialog .se-dialog-inner .se-dialog-form input:focus, .sun-editor .se-dialog .se-dialog-inner .se-dialog-form select:focus, .sun-editor .se-dialog .se-dialog-inner .se-dialog-form textarea:focus  {border-color:#80bdff; outline:0; -webkit-box-shadow:0 0 0 0.2rem #c7deff; box-shadow:0 0 0 0.2rem #c7deff;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-video-ratio {width:70px; margin-left:4px;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form a {color:#004cff;}
 /* dialog - revert button */
@@ -284,7 +285,7 @@
 
 /** --- controller ---------------------------------------------------------- */
 .sun-editor .se-controller .se-arrow.se-arrow-up {border-bottom-color:rgba(0, 0, 0, .25);}
-.sun-editor .se-controller {position:absolute; display:none; overflow:visible; z-index:4; border:1px solid rgba(0, 0, 0, .25); border-radius:4px; text-align:start; text-decoration:none; text-shadow:none; text-transform:none; letter-spacing:normal; word-break:normal; word-spacing:normal; word-wrap:normal; white-space:normal; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .2); box-shadow:0 5px 10px rgba(0, 0, 0, .2); line-break:auto;}
+.sun-editor .se-controller {position:absolute; display:none; overflow:visible; z-index:5; border:1px solid rgba(0, 0, 0, .25); border-radius:4px; text-align:start; text-decoration:none; text-shadow:none; text-transform:none; letter-spacing:normal; word-break:normal; word-spacing:normal; word-wrap:normal; white-space:normal; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .2); box-shadow:0 5px 10px rgba(0, 0, 0, .2); line-break:auto;}
 
 /* controller - button group */
 .sun-editor .se-controller .se-btn-group {position:relative; display:flex; vertical-align:middle; padding:2px; top:0; left:0;}