npm - @lingxiteam/lcdp-ueditor-react - Versions diffs - 1.0.3-alpha.1 → 1.0.3-alpha.3 - Mend

@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.1 → 1.0.3-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/es/LcdpUeditor.d.ts +4 -0
package/es/LcdpUeditor.js +55 -37
package/es/const.js +4 -4
package/es/defaultConfig.json +76 -76
package/es/tools/UeditorResourceLoader.js +6 -6
package/es/tools/filterHtmlNode.js +7 -2
package/es/tools/loadScript.js +3 -3
package/lib/LcdpUeditor.d.ts +4 -0
package/lib/LcdpUeditor.js +14 -2
package/lib/defaultConfig.json +76 -76
package/lib/tools/filterHtmlNode.js +8 -4
package/package.json +35 -35
package/ueditor-resource/dialogs/anchor/anchor.html +62 -62
package/ueditor-resource/dialogs/attachment/attachment.css +2 -2
package/ueditor-resource/dialogs/attachment/attachment.html +61 -61
package/ueditor-resource/dialogs/audio/audio.css +2 -2
package/ueditor-resource/dialogs/audio/audio.html +93 -93
package/ueditor-resource/dialogs/background/background.css +2 -2
package/ueditor-resource/dialogs/background/background.html +59 -59
package/ueditor-resource/dialogs/contentimport/contentimport.html +176 -176
package/ueditor-resource/dialogs/emotion/emotion.css +2 -2
package/ueditor-resource/dialogs/emotion/emotion.html +70 -70
package/ueditor-resource/dialogs/formula/formula.html +98 -98
package/ueditor-resource/dialogs/help/help.css +2 -2
package/ueditor-resource/dialogs/help/help.html +82 -82
package/ueditor-resource/dialogs/image/image.css +2 -2
package/ueditor-resource/dialogs/image/image.html +144 -144
package/ueditor-resource/dialogs/insertframe/insertframe.html +135 -135
package/ueditor-resource/dialogs/link/link.html +148 -148
package/ueditor-resource/dialogs/preview/preview.html +45 -45
package/ueditor-resource/dialogs/scrawl/scrawl.css +2 -2
package/ueditor-resource/dialogs/scrawl/scrawl.html +95 -95
package/ueditor-resource/dialogs/searchreplace/searchreplace.html +144 -144
package/ueditor-resource/dialogs/spechars/spechars.html +42 -42
package/ueditor-resource/dialogs/table/edittable.css +2 -2
package/ueditor-resource/dialogs/table/edittable.html +69 -69
package/ueditor-resource/dialogs/table/edittd.html +62 -62
package/ueditor-resource/dialogs/table/edittip.html +33 -33
package/ueditor-resource/dialogs/template/template.css +2 -2
package/ueditor-resource/dialogs/template/template.html +26 -26
package/ueditor-resource/dialogs/video/video.css +2 -2
package/ueditor-resource/dialogs/video/video.html +114 -114
package/ueditor-resource/dialogs/wordimage/wordimage.html +221 -221
package/ueditor-resource/themes/default/css/ueditor.css +2 -2
package/ueditor-resource/themes/default/dialog.css +2 -2
package/ueditor-resource/themes/default/dialogbase.css +2 -2
package/ueditor-resource/themes/default/exts/ai.svg +12 -12
package/ueditor-resource/themes/default/exts/apk.svg +12 -12
package/ueditor-resource/themes/default/exts/chm.svg +12 -12
package/ueditor-resource/themes/default/exts/css.svg +12 -12
package/ueditor-resource/themes/default/exts/doc.svg +22 -22
package/ueditor-resource/themes/default/exts/docx.svg +22 -22
package/ueditor-resource/themes/default/exts/dwg.svg +16 -16
package/ueditor-resource/themes/default/exts/folder.svg +3 -3
package/ueditor-resource/themes/default/exts/gif.svg +14 -14
package/ueditor-resource/themes/default/exts/html.svg +12 -12
package/ueditor-resource/themes/default/exts/jpeg.svg +14 -14
package/ueditor-resource/themes/default/exts/jpg.svg +14 -14
package/ueditor-resource/themes/default/exts/log.svg +12 -12
package/ueditor-resource/themes/default/exts/mp3.svg +14 -14
package/ueditor-resource/themes/default/exts/mp4.svg +12 -12
package/ueditor-resource/themes/default/exts/pdf.svg +14 -14
package/ueditor-resource/themes/default/exts/png.svg +14 -14
package/ueditor-resource/themes/default/exts/ppt.svg +24 -24
package/ueditor-resource/themes/default/exts/pptx.svg +24 -24
package/ueditor-resource/themes/default/exts/psd.svg +12 -12
package/ueditor-resource/themes/default/exts/rar.svg +12 -12
package/ueditor-resource/themes/default/exts/svg.svg +12 -12
package/ueditor-resource/themes/default/exts/torrent.svg +14 -14
package/ueditor-resource/themes/default/exts/txt.svg +14 -14
package/ueditor-resource/themes/default/exts/unknown.svg +12 -12
package/ueditor-resource/themes/default/exts/xls.svg +25 -25
package/ueditor-resource/themes/default/exts/xlsx.svg +25 -25
package/ueditor-resource/themes/default/exts/zip.svg +12 -12
package/ueditor-resource/themes/iframe.css +2 -2
package/ueditor-resource/third-party/SyntaxHighlighter/shCoreDefault.css +2 -2
package/ueditor-resource/third-party/codemirror/codemirror.css +2 -2
package/ueditor-resource/third-party/webuploader/webuploader.css +2 -2
package/ueditor-resource/third-party/zeroclipboard/ZeroClipboard.js +1255 -1255
package/ueditor-resource/ueditor.all.js +3 -3

package/ueditor-resource/dialogs/searchreplace/searchreplace.html CHANGED Viewed

@@ -1,144 +1,144 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-    "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title></title>
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
-    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
-    <style type="text/css">
-        .warpper {
-            position: relative;
-            width: 380px;
-            height: 100%;
-            margin: 10px auto;
-        }
-        .tabbody {
-            height: 160px;
-        }
-        .tabbody table {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 3px;
-            line-height: 36px;
-        }
-        .tabbody .panel {
-            width: 373px;
-            height: 100%;
-            padding-left: 5px;
-            position: absolute;
-            background-color: #fff;
-        }
-        .tabbody input.int {
-            width: 190px;
-            height: 30px;
-            border: 1px solid #d7d7d7;
-            line-height: 21px;
-            border-radius: 3px;
-            outline: none;
-            padding: 0 5px;
-        }
-        .tabbody input.btn {
-            text-align: center;
-            line-height: 28px;
-            text-decoration: none;
-            height: 30px;
-            border: 1px solid #ccc;
-            background: #FFF;
-            border-radius: 3px;
-            padding: 0 5px;
-            font-size: 12px;
-            cursor: pointer;
-        }
-    </style>
-</head>
-<body>
-<div class="warpper" id="searchtab">
-    <div id="head" class="tabhead">
-        <span tabsrc="find" class="focus"><var id="lang_tab_search"></var></span>
-        <span tabsrc="replace"><var id="lang_tab_replace"></var></span>
-    </div>
-    <div class="tabbody">
-        <div class="panel" id="find">
-            <table>
-                <tr>
-                    <td width="80"><var id="lang_search1"></var>:</td>
-                    <td><input id="findtxt" type="text" class="int"/></td>
-                </tr>
-                <!--<tr>-->
-                <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg"></var></span></td>-->
-                <!--</tr>-->
-                <tr>
-                    <td><var id="lang_case_sensitive1"></var></td>
-                    <td>
-                        <input id="matchCase" type="checkbox"/>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <input id="nextFindBtn" type="button" class="btn"/>
-                        <input id="preFindBtn" type="button" class="btn"/>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        &nbsp;
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <span id="search-msg" style="color:red"></span>
-                    </td>
-                </tr>
-            </table>
-        </div>
-        <div class="panel" id="replace">
-            <table>
-                <tr>
-                    <td width="80"><var id="lang_search2"></var>:</td>
-                    <td><input id="findtxt1" type="text" class="int"/></td>
-                </tr>
-                <!--<tr>-->
-                <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg1"></var></span></td>-->
-                <!--</tr>-->
-                <tr>
-                    <td><var id="lang_replace"></var>:</td>
-                    <td><input id="replacetxt" type="text" class="int"/></td>
-                </tr>
-                <tr>
-                    <td><var id="lang_case_sensitive2"></var></td>
-                    <td>
-                        <input id="matchCase1" type="checkbox"/>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <input id="nextReplaceBtn" type="button" class="btn"/>
-                        <input id="preReplaceBtn" type="button" class="btn"/>
-                        <input id="repalceBtn" type="button" class="btn"/>
-                        <input id="repalceAllBtn" type="button" class="btn"/>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        &nbsp;
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <span id="replace-msg" style="color:red"></span>
-                    </td>
-                </tr>
-            </table>
-        </div>
-    </div>
-</div>
-<script type="text/javascript" src="searchreplace.js?54c26e9a"></script>
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
+    <style type="text/css">
+        .warpper {
+            position: relative;
+            width: 380px;
+            height: 100%;
+            margin: 10px auto;
+        }
+        .tabbody {
+            height: 160px;
+        }
+        .tabbody table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 3px;
+            line-height: 36px;
+        }
+        .tabbody .panel {
+            width: 373px;
+            height: 100%;
+            padding-left: 5px;
+            position: absolute;
+            background-color: #fff;
+        }
+        .tabbody input.int {
+            width: 190px;
+            height: 30px;
+            border: 1px solid #d7d7d7;
+            line-height: 21px;
+            border-radius: 3px;
+            outline: none;
+            padding: 0 5px;
+        }
+        .tabbody input.btn {
+            text-align: center;
+            line-height: 28px;
+            text-decoration: none;
+            height: 30px;
+            border: 1px solid #ccc;
+            background: #FFF;
+            border-radius: 3px;
+            padding: 0 5px;
+            font-size: 12px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+<div class="warpper" id="searchtab">
+    <div id="head" class="tabhead">
+        <span tabsrc="find" class="focus"><var id="lang_tab_search"></var></span>
+        <span tabsrc="replace"><var id="lang_tab_replace"></var></span>
+    </div>
+    <div class="tabbody">
+        <div class="panel" id="find">
+            <table>
+                <tr>
+                    <td width="80"><var id="lang_search1"></var>:</td>
+                    <td><input id="findtxt" type="text" class="int"/></td>
+                </tr>
+                <!--<tr>-->
+                <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg"></var></span></td>-->
+                <!--</tr>-->
+                <tr>
+                    <td><var id="lang_case_sensitive1"></var></td>
+                    <td>
+                        <input id="matchCase" type="checkbox"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input id="nextFindBtn" type="button" class="btn"/>
+                        <input id="preFindBtn" type="button" class="btn"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        &nbsp;
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <span id="search-msg" style="color:red"></span>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="panel" id="replace">
+            <table>
+                <tr>
+                    <td width="80"><var id="lang_search2"></var>:</td>
+                    <td><input id="findtxt1" type="text" class="int"/></td>
+                </tr>
+                <!--<tr>-->
+                <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg1"></var></span></td>-->
+                <!--</tr>-->
+                <tr>
+                    <td><var id="lang_replace"></var>:</td>
+                    <td><input id="replacetxt" type="text" class="int"/></td>
+                </tr>
+                <tr>
+                    <td><var id="lang_case_sensitive2"></var></td>
+                    <td>
+                        <input id="matchCase1" type="checkbox"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input id="nextReplaceBtn" type="button" class="btn"/>
+                        <input id="preReplaceBtn" type="button" class="btn"/>
+                        <input id="repalceBtn" type="button" class="btn"/>
+                        <input id="repalceAllBtn" type="button" class="btn"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        &nbsp;
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <span id="replace-msg" style="color:red"></span>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="searchreplace.js?54c26e9a"></script>
+</body>
+</html>

package/ueditor-resource/dialogs/spechars/spechars.html CHANGED Viewed

@@ -1,42 +1,42 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-    "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title></title>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
-    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
-    <style type="text/css">
-        html, body {
-            overflow: hidden;
-        }
-        #specharsTab {
-            width: 97%;
-            margin: 10px auto;
-            zoom: 1;
-            position: relative
-        }
-        .tabbody {
-            height: 447px;
-        }
-        .tabbody span {
-            margin: 5px 3px;
-            text-align: center;
-            display: inline-block;
-            width: 40px;
-            height: 16px;
-            line-height: 16px;
-            cursor: pointer;
-        }
-    </style>
-</head>
-<body>
-<div id="specharsTab">
-    <div id="tabHeads" class="tabhead"></div>
-    <div id="tabBodys" class="tabbody"></div>
-</div>
-<script type="text/javascript" src="spechars.js?78a9bbd0"></script>
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
+    <style type="text/css">
+        html, body {
+            overflow: hidden;
+        }
+        #specharsTab {
+            width: 97%;
+            margin: 10px auto;
+            zoom: 1;
+            position: relative
+        }
+        .tabbody {
+            height: 447px;
+        }
+        .tabbody span {
+            margin: 5px 3px;
+            text-align: center;
+            display: inline-block;
+            width: 40px;
+            height: 16px;
+            line-height: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+<div id="specharsTab">
+    <div id="tabHeads" class="tabhead"></div>
+    <div id="tabBodys" class="tabbody"></div>
+</div>
+<script type="text/javascript" src="spechars.js?78a9bbd0"></script>
+</body>
+</html>

package/ueditor-resource/dialogs/table/edittable.css CHANGED Viewed

@@ -1,3 +1,3 @@
-/*! UEditorPlus v2.0.0*/
+/*! UEditorPlus v2.0.0*/
 body{overflow:hidden;width:540px}.wrapper{margin:10px auto 0;font-size:12px;overflow:hidden;width:520px;height:315px}.clear{clear:both}.wrapper .left{float:left;margin-left:10px}.wrapper .right{float:right;border-left:2px dotted #EDEDED;padding-left:15px}.section{margin-bottom:15px;width:240px;overflow:hidden}.section h3{font-weight:700;padding:5px 0;margin-bottom:10px;border-bottom:1px solid #EDEDED;font-size:12px}.section ul{list-style:none;overflow:hidden;clear:both}.section li{float:left;width:120px}.section .tone{width:80px}.section .preview{width:220px}.section .preview table{text-align:center;vertical-align:middle;color:#666}.section .preview caption{font-weight:700}.section .preview td{border-width:1px;border-style:solid;height:22px}.section .preview th{border-style:solid;border-color:#DDD;border-width:2px 1px 1px;height:22px;background-color:#F7F7F7}

package/ueditor-resource/dialogs/table/edittable.html CHANGED Viewed

@@ -1,69 +1,69 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title></title>
-    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
-    <link rel="stylesheet" type="text/css" href="edittable.css?97f6eb5f">
-</head>
-<body>
-<div class="wrapper">
-    <div class="left">
-        <div class="section">
-            <h3><var id="lang_tableStyle"></var></h3>
-            <ul>
-                <li>
-                    <label onselectstart="return false"><input type="checkbox" id="J_title" name="style"/><var
-                        id="lang_insertTitle"></var></label>
-                </li>
-                <li>
-                    <label onselectstart="return false"><input type="checkbox" id="J_titleCol" name="style"/><var
-                        id="lang_insertTitleCol"></var></label>
-                </li>
-            </ul>
-            <ul>
-                <li>
-                    <label onselectstart="return false"><input type="checkbox" id="J_caption" name="style"/><var
-                        id="lang_insertCaption"></var></label>
-                </li>
-                <li>
-                    <label onselectstart="return false"><input type="checkbox" id="J_sorttable" name="style"/><var
-                        id="lang_orderbycontent"></var></label>
-                </li>
-            </ul>
-            <div class="clear"></div>
-        </div>
-        <div class="section">
-            <h3><var id="lang_tableSize"></var></h3>
-            <ul>
-                <li>
-                    <label><input type="radio" id="J_autoSizeContent" name="size"/><var id="lang_autoSizeContent"></var></label>
-                </li>
-                <li>
-                    <label><input type="radio" id="J_autoSizePage" name="size"/><var
-                        id="lang_autoSizePage"></var></label>
-                </li>
-            </ul>
-            <div class="clear"></div>
-        </div>
-        <div class="section">
-            <h3><var id="lang_borderStyle"></var></h3>
-            <ul>
-                <li>
-                    <span><var id="lang_color"></var></span>
-                    <input type="text" class="tone" id="J_tone" readonly='readonly'/>
-                </li>
-            </ul>
-            <div class="clear"></div>
-        </div>
-    </div>
-    <div class="right">
-        <div class="section">
-            <h3><var id="lang_example"></var></h3>
-            <div class="preview" id="J_preview">
-            </div>
-        </div>
-    </div>
-</div>
-<script type="text/javascript" src="edittable.js?69ed0ec5"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
+    <link rel="stylesheet" type="text/css" href="edittable.css?0582a5e4">
+</head>
+<body>
+<div class="wrapper">
+    <div class="left">
+        <div class="section">
+            <h3><var id="lang_tableStyle"></var></h3>
+            <ul>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_title" name="style"/><var
+                        id="lang_insertTitle"></var></label>
+                </li>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_titleCol" name="style"/><var
+                        id="lang_insertTitleCol"></var></label>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_caption" name="style"/><var
+                        id="lang_insertCaption"></var></label>
+                </li>
+                <li>
+                    <label onselectstart="return false"><input type="checkbox" id="J_sorttable" name="style"/><var
+                        id="lang_orderbycontent"></var></label>
+                </li>
+            </ul>
+            <div class="clear"></div>
+        </div>
+        <div class="section">
+            <h3><var id="lang_tableSize"></var></h3>
+            <ul>
+                <li>
+                    <label><input type="radio" id="J_autoSizeContent" name="size"/><var id="lang_autoSizeContent"></var></label>
+                </li>
+                <li>
+                    <label><input type="radio" id="J_autoSizePage" name="size"/><var
+                        id="lang_autoSizePage"></var></label>
+                </li>
+            </ul>
+            <div class="clear"></div>
+        </div>
+        <div class="section">
+            <h3><var id="lang_borderStyle"></var></h3>
+            <ul>
+                <li>
+                    <span><var id="lang_color"></var></span>
+                    <input type="text" class="tone" id="J_tone" readonly='readonly'/>
+                </li>
+            </ul>
+            <div class="clear"></div>
+        </div>
+    </div>
+    <div class="right">
+        <div class="section">
+            <h3><var id="lang_example"></var></h3>
+            <div class="preview" id="J_preview">
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="edittable.js?69ed0ec5"></script>
+</body>
+</html>

package/ueditor-resource/dialogs/table/edittd.html CHANGED Viewed

@@ -1,62 +1,62 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title></title>
-    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
-    <style type="text/css">
-        .section {
-            text-align: center;
-            margin-top: 10px;
-        }
-        .section input {
-            margin-left: 5px;
-            width: 70px;
-        }
-    </style>
-</head>
-<body>
-<div class="section">
-    <span><var id="lang_tdBkColor"></var></span>
-    <input type="text" id="J_tone"/>
-</div>
-<script type="text/javascript">
-    var tone = $G("J_tone"),
-        colorPiker = new UE.ui.ColorPicker({
-            editor: editor
-        }),
-        colorPop = new UE.ui.Popup({
-            editor: editor,
-            content: colorPiker
-        });
-    domUtils.on(tone, "click", function () {
-        colorPop.showAnchor(tone);
-    });
-    domUtils.on(document, 'mousedown', function () {
-        colorPop.hide();
-    });
-    colorPiker.addListener("pickcolor", function () {
-        tone.value = arguments[1];
-        colorPop.hide();
-    });
-    colorPiker.addListener("picknocolor", function () {
-        tone.value = "";
-        colorPop.hide();
-    });
-    dialog.onok = function () {
-        editor.execCommand("edittd", tone.value);
-    };
-    var start = editor.selection.getStart(),
-        cell = start && domUtils.findParentByTagName(start, ["td", "th"], true);
-    if (cell) {
-        var color = domUtils.getComputedStyle(cell, 'background-color');
-        if (/^#/.test(color)) {
-            tone.value = color
-        }
-    }
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <script type="text/javascript" src="../internal.js?04dbe7f0"></script>
+    <style type="text/css">
+        .section {
+            text-align: center;
+            margin-top: 10px;
+        }
+        .section input {
+            margin-left: 5px;
+            width: 70px;
+        }
+    </style>
+</head>
+<body>
+<div class="section">
+    <span><var id="lang_tdBkColor"></var></span>
+    <input type="text" id="J_tone"/>
+</div>
+<script type="text/javascript">
+    var tone = $G("J_tone"),
+        colorPiker = new UE.ui.ColorPicker({
+            editor: editor
+        }),
+        colorPop = new UE.ui.Popup({
+            editor: editor,
+            content: colorPiker
+        });
+    domUtils.on(tone, "click", function () {
+        colorPop.showAnchor(tone);
+    });
+    domUtils.on(document, 'mousedown', function () {
+        colorPop.hide();
+    });
+    colorPiker.addListener("pickcolor", function () {
+        tone.value = arguments[1];
+        colorPop.hide();
+    });
+    colorPiker.addListener("picknocolor", function () {
+        tone.value = "";
+        colorPop.hide();
+    });
+    dialog.onok = function () {
+        editor.execCommand("edittd", tone.value);
+    };
+    var start = editor.selection.getStart(),
+        cell = start && domUtils.findParentByTagName(start, ["td", "th"], true);
+    if (cell) {
+        var color = domUtils.getComputedStyle(cell, 'background-color');
+        if (/^#/.test(color)) {
+            tone.value = color
+        }
+    }
+</script>
+</body>
+</html>