@lingxiteam/lcdp-ueditor-react 1.0.0-alpha.1

package/ueditor-resource/dialogs/table/edittable.js

@@ -0,0 +1,241 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-12-19
+ * Time: 下午4:55
+ * To change this template use File | Settings | File Templates.
+ */
+(function () {
+    var title = $G("J_title"),
+        titleCol = $G("J_titleCol"),
+        caption = $G("J_caption"),
+        sorttable = $G("J_sorttable"),
+        autoSizeContent = $G("J_autoSizeContent"),
+        autoSizePage = $G("J_autoSizePage"),
+        tone = $G("J_tone"),
+        me,
+        preview = $G("J_preview");
+
+    var editTable = function () {
+        me = this;
+        me.init();
+    };
+    editTable.prototype = {
+        init: function () {
+            var colorPiker = new UE.ui.ColorPicker({
+                    editor: editor
+                }),
+                colorPop = new UE.ui.Popup({
+                    editor: editor,
+                    content: colorPiker
+                });
+
+            title.checked = editor.queryCommandState("inserttitle") == -1;
+            titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
+            caption.checked = editor.queryCommandState("insertcaption") == -1;
+            sorttable.checked = editor.queryCommandState("enablesort") == 1;
+
+            var enablesortState = editor.queryCommandState("enablesort"),
+                disablesortState = editor.queryCommandState("disablesort");
+
+            sorttable.checked = !!(enablesortState < 0 && disablesortState >= 0);
+            sorttable.disabled = !!(enablesortState < 0 && disablesortState < 0);
+            sorttable.title = enablesortState < 0 && disablesortState < 0 ? lang.errorMsg : '';
+
+            me.createTable(title.checked, titleCol.checked, caption.checked);
+            me.setAutoSize();
+            me.setColor(me.getColor());
+
+            domUtils.on(title, "click", me.titleHanler);
+            domUtils.on(titleCol, "click", me.titleColHanler);
+            domUtils.on(caption, "click", me.captionHanler);
+            domUtils.on(sorttable, "click", me.sorttableHanler);
+            domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
+            domUtils.on(autoSizePage, "click", me.autoSizePageHanler);
+
+            domUtils.on(tone, "click", function () {
+                colorPop.showAnchor(tone);
+            });
+            domUtils.on(document, 'mousedown', function () {
+                colorPop.hide();
+            });
+            colorPiker.addListener("pickcolor", function () {
+                me.setColor(arguments[1]);
+                colorPop.hide();
+            });
+            colorPiker.addListener("picknocolor", function () {
+                me.setColor("");
+                colorPop.hide();
+            });
+        },
+
+        createTable: function (hasTitle, hasTitleCol, hasCaption) {
+            var arr = [],
+                sortSpan = '<span>^</span>';
+            arr.push("<table id='J_example'>");
+            if (hasCaption) {
+                arr.push("<caption>" + lang.captionName + "</caption>")
+            }
+            if (hasTitle) {
+                arr.push("<tr>");
+                if (hasTitleCol) {
+                    arr.push("<th>" + lang.titleName + "</th>");
+                }
+                for (var j = 0; j < 5; j++) {
+                    arr.push("<th>" + lang.titleName + "</th>");
+                }
+                arr.push("</tr>");
+            }
+            for (var i = 0; i < 6; i++) {
+                arr.push("<tr>");
+                if (hasTitleCol) {
+                    arr.push("<th>" + lang.titleName + "</th>")
+                }
+                for (var k = 0; k < 5; k++) {
+                    arr.push("<td>" + lang.cellsName + "</td>")
+                }
+                arr.push("</tr>");
+            }
+            arr.push("</table>");
+            preview.innerHTML = arr.join("");
+            this.updateSortSpan();
+        },
+        titleHanler: function () {
+            var example = $G("J_example"),
+                frg = document.createDocumentFragment(),
+                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
+                colCount = example.rows[0].children.length;
+
+            if (title.checked) {
+                example.insertRow(0);
+                for (var i = 0, node; i < colCount; i++) {
+                    node = document.createElement("th");
+                    node.innerHTML = lang.titleName;
+                    frg.appendChild(node);
+                }
+                example.rows[0].appendChild(frg);
+
+            } else {
+                domUtils.remove(example.rows[0]);
+            }
+            me.setColor(color);
+            me.updateSortSpan();
+        },
+        titleColHanler: function () {
+            var example = $G("J_example"),
+                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
+                colArr = example.rows,
+                colCount = colArr.length;
+
+            if (titleCol.checked) {
+                for (var i = 0, node; i < colCount; i++) {
+                    node = document.createElement("th");
+                    node.innerHTML = lang.titleName;
+                    colArr[i].insertBefore(node, colArr[i].children[0]);
+                }
+            } else {
+                for (var i = 0; i < colCount; i++) {
+                    domUtils.remove(colArr[i].children[0]);
+                }
+            }
+            me.setColor(color);
+            me.updateSortSpan();
+        },
+        captionHanler: function () {
+            var example = $G("J_example");
+            if (caption.checked) {
+                var row = document.createElement('caption');
+                row.innerHTML = lang.captionName;
+                example.insertBefore(row, example.firstChild);
+            } else {
+                domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
+            }
+        },
+        sorttableHanler: function () {
+            me.updateSortSpan();
+        },
+        autoSizeContentHanler: function () {
+            var example = $G("J_example");
+            example.removeAttribute("width");
+        },
+        autoSizePageHanler: function () {
+            var example = $G("J_example");
+            var tds = example.getElementsByTagName(example, "td");
+            utils.each(tds, function (td) {
+                td.removeAttribute("width");
+            });
+            example.setAttribute('width', '100%');
+        },
+        updateSortSpan: function () {
+            var example = $G("J_example"),
+                row = example.rows[0];
+
+            var spans = domUtils.getElementsByTagName(example, "span");
+            utils.each(spans, function (span) {
+                span.parentNode.removeChild(span);
+            });
+            if (sorttable.checked) {
+                utils.each(row.cells, function (cell, i) {
+                    var span = document.createElement("span");
+                    span.innerHTML = "^";
+                    cell.appendChild(span);
+                });
+            }
+        },
+        getColor: function () {
+            var start = editor.selection.getStart(), color,
+                cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
+            color = cell && domUtils.getComputedStyle(cell, "border-color");
+            if (!color) color = "#DDDDDD";
+            return color;
+        },
+        setColor: function (color) {
+            var example = $G("J_example"),
+                arr = domUtils.getElementsByTagName(example, "td").concat(
+                    domUtils.getElementsByTagName(example, "th"),
+                    domUtils.getElementsByTagName(example, "caption")
+                );
+
+            tone.value = color;
+            utils.each(arr, function (node) {
+                node.style.borderColor = color;
+            });
+
+        },
+        setAutoSize: function () {
+            var me = this;
+            autoSizePage.checked = true;
+            me.autoSizePageHanler();
+        }
+    };
+
+    new editTable;
+
+    dialog.onok = function () {
+        editor.__hasEnterExecCommand = true;
+
+        var checks = {
+            title: "inserttitle deletetitle",
+            titleCol: "inserttitlecol deletetitlecol",
+            caption: "insertcaption deletecaption",
+            sorttable: "enablesort disablesort"
+        };
+        editor.fireEvent('saveScene');
+        for (var i in checks) {
+            var cmds = checks[i].split(" "),
+                input = $G("J_" + i);
+            if (input["checked"]) {
+                editor.queryCommandState(cmds[0]) != -1 && editor.execCommand(cmds[0]);
+            } else {
+                editor.queryCommandState(cmds[1]) != -1 && editor.execCommand(cmds[1]);
+            }
+        }
+
+        editor.execCommand("edittable", tone.value);
+        autoSizeContent.checked ? editor.execCommand('adaptbytext') : "";
+        autoSizePage.checked ? editor.execCommand("adaptbywindow") : "";
+        editor.fireEvent('saveScene');
+
+        editor.__hasEnterExecCommand = false;
+    };
+})();

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

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <script type="text/javascript" src="../internal.js?32939b8e"></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>

package/ueditor-resource/dialogs/table/edittip.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>表格删除提示</title>
+    <script type="text/javascript" src="../internal.js?32939b8e"></script>
+    <style type="text/css">
+        .section {
+            width: 200px;
+            margin: 10px auto 0;
+            font-size: 14px;
+        }
+
+        .item {
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+<div class="section">
+    <div class="item">
+        <label><input type="radio" id="J_delRow" name="cmd" checked/><var id="lang_delRow"></var></label>
+    </div>
+    <div class="item">
+        <label><input type="radio" id="J_delCol" name="cmd"/><var id="lang_delCol"></var></label>
+    </div>
+</div>
+<script type="text/javascript">
+    dialog.onok = function () {
+        $G("J_delRow").checked ? editor.execCommand("deleterow") : editor.execCommand("deletecol");
+    };
+</script>
+</body>
+</html>

package/ueditor-resource/dialogs/template/config.js

@@ -0,0 +1,42 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-8-8
+ * Time: 下午2:00
+ * To change this template use File | Settings | File Templates.
+ */
+var templates = [
+    {
+        "pre": "pre0.png",
+        'title': lang.blank,
+        'preHtml': '<p class="ue_t">&nbsp;欢迎使用UEditor！</p>',
+        "html": '<p class="ue_t">欢迎使用UEditor！</p>'
+
+    },
+    {
+        "pre": "pre1.png",
+        'title': lang.blog,
+        'preHtml': '<h1 label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">深入理解Range</span></h1><p style="text-align:center;"><strong class=" ">UEditor二次开发</strong></p><h3><span class=" " style="font-family:幼圆">什么是Range</span></h3><p style="text-indent:2em;">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 </p><br /><h3><span class=" " style="font-family:幼圆">Range能干什么</span></h3><p style="text-indent:2em;">在“开始”选项卡上，通过从快速样式库中为所选文本选择一种外观，您可以方便地更改文档中所选文本的格式。</p>',
+        "html": '<h1 class="ue_t" label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">[键入文档标题]</span></h1><p style="text-align:center;"><strong class="ue_t">[键入文档副标题]</strong></p><h3><span class="ue_t" style="font-family:幼圆">[标题 1]</span></h3><p class="ue_t"  style="text-indent:2em;">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><h3><span class="ue_t" style="font-family:幼圆">[标题 2]</span></h3><p class="ue_t"  style="text-indent:2em;">在“开始”选项卡上，通过从快速样式库中为所选文本选择一种外观，您可以方便地更改文档中所选文本的格式。 您还可以使用“开始”选项卡上的其他控件来直接设置文本格式。大多数控件都允许您选择是使用当前主题外观，还是使用某种直接指定的格式。 </p><h3><span class="ue_t" style="font-family:幼圆">[标题 3]</span></h3><p class="ue_t">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t"><br /></p>'
+
+    },
+    {
+        "pre": "pre2.png",
+        'title': lang.resume,
+        'preHtml': '<h1 label="Title left" name="tl" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;"><span style="color:#e36c09;" class=" ">WEB前端开发简历</span></h1><table width="100%" border="1" bordercolor="#95B3D7" style="border-collapse:collapse;"><tbody><tr><td width="100" style="text-align:center;"><p><span style="background-color:transparent;">插</span><br /></p><p>入</p><p>照</p><p>片</p></td><td><p><span style="background-color:transparent;"> 联系电话：</span><span class="ue_t" style="background-color:transparent;">[键入您的电话]</span><br /></p><p><span style="background-color:transparent;"> 电子邮件：</span><span class="ue_t" style="background-color:transparent;">[键入您的电子邮件地址]</span><br /></p><p><span style="background-color:transparent;"> 家庭住址：</span><span class="ue_t" style="background-color:transparent;">[键入您的地址]</span><br /></p></td></tr></tbody></table><h3><span style="color:#E36C09;font-size:20px;">目标职位</span></h3><p style="text-indent:2em;" class=" ">WEB前端研发工程师</p><h3><span style="color:#e36c09;font-size:20px;">学历</span></h3><p><span style="display:none;line-height:0px;" id="_baidu_bookmark_start_26"></span></p><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[起止时间]</span> <span class="ue_t">[学校名称] </span> <span class="ue_t">[所学专业]</span> <span class="ue_t">[所获学位]</span></p></li></ol><h3><span style="color:#e36c09;font-size:20px;" class="ue_t">工作经验</span></h3><p><br /></p>',
+        "html": '<h1 label="Title left" name="tl" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;"><span style="color:#e36c09;" class="ue_t">[此处键入简历标题]</span></h1><p><span style="color:#e36c09;"><br /></span></p><table width="100%" border="1" bordercolor="#95B3D7" style="border-collapse:collapse;"><tbody><tr><td width="200" style="text-align:center;" class="ue_t">【此处插入照片】</td><td><p><br /></p><p> 联系电话：<span class="ue_t">[键入您的电话]</span></p><p><br /></p><p> 电子邮件：<span class="ue_t">[键入您的电子邮件地址]</span></p><p><br /></p><p> 家庭住址：<span class="ue_t">[键入您的地址]</span></p><p><br /></p></td></tr></tbody></table><h3><span style="color:#e36c09;font-size:20px;">目标职位</span></h3><p style="text-indent:2em;" class="ue_t">[此处键入您的期望职位]</p><h3><span style="color:#e36c09;font-size:20px;">学历</span></h3><p><span style="display:none;line-height:0px;" id="_baidu_bookmark_start_26"></span></p><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入学校名称] </span> <span class="ue_t">[键入所学专业]</span> <span class="ue_t">[键入所获学位]</span></p></li><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入学校名称]</span> <span class="ue_t">[键入所学专业]</span> <span class="ue_t">[键入所获学位]</span></p></li></ol><h3><span style="color:#e36c09;font-size:20px;" class="ue_t">工作经验</span></h3><ol style="list-style-type:decimal;"><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入公司名称]</span> <span class="ue_t">[键入职位名称]</span> </p></li><ol style="list-style-type:lower-alpha;"><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li></ol><li><p><span class="ue_t">[键入起止时间]</span> <span class="ue_t">[键入公司名称]</span> <span class="ue_t">[键入职位名称]</span> </p></li><ol style="list-style-type:lower-alpha;"><li><p><span class="ue_t">[键入负责项目]</span> <span class="ue_t">[键入项目简介]</span></p></li></ol></ol><p><span style="color:#e36c09;font-size:20px;">掌握技能</span></p><p style="text-indent:2em;"> &nbsp;<span class="ue_t">[这里可以键入您所掌握的技能]</span><br /></p>'
+
+    },
+    {
+        "pre": "pre3.png",
+        'title': lang.richText,
+        'preHtml': '<h1 label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;" class="ue_t">[此处键入文章标题]</h1><p><img src="http://img.baidu.com/hi/youa/y_0034.gif" width="150" height="100" border="0" hspace="0" vspace="0" style="width:150px;height:100px;float:left;" />图文混排方法</p><p>图片居左，文字围绕图片排版</p><p>方法：在文字前面插入图片，设置居左对齐，然后即可在右边输入多行文</p><p><br /></p><p><img src="http://img.baidu.com/hi/youa/y_0040.gif" width="100" height="100" border="0" hspace="0" vspace="0" style="width:100px;height:100px;float:right;" /></p><p>还有没有什么其他的环绕方式呢？这里是居右环绕</p><p><br /></p><p>欢迎大家多多尝试，为UEditor提供更多高质量模板！</p>',
+        "html": '<p><br /></p><h1 label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;" class="ue_t">[此处键入文章标题]</h1><p><img src="http://img.baidu.com/hi/youa/y_0034.gif" width="300" height="200" border="0" hspace="0" vspace="0" style="width:300px;height:200px;float:left;" />图文混排方法</p><p>1. 图片居左，文字围绕图片排版</p><p>方法：在文字前面插入图片，设置居左对齐，然后即可在右边输入多行文本</p><p><br /></p><p>2. 图片居右，文字围绕图片排版</p><p>方法：在文字前面插入图片，设置居右对齐，然后即可在左边输入多行文本</p><p><br /></p><p>3. 图片居中环绕排版</p><p>方法：亲，这个真心没有办法。。。</p><p><br /></p><p><br /></p><p><img src="http://img.baidu.com/hi/youa/y_0040.gif" width="300" height="300" border="0" hspace="0" vspace="0" style="width:300px;height:300px;float:right;" /></p><p>还有没有什么其他的环绕方式呢？这里是居右环绕</p><p><br /></p><p>欢迎大家多多尝试，为UEditor提供更多高质量模板！</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p>占位</p><p><br /></p><p><br /></p>'
+    },
+    {
+        "pre": "pre4.png",
+        'title': lang.sciPapers,
+        'preHtml': '<h2 style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;text-align:center;" class="ue_t">[键入文章标题]</h2><p><strong><span style="font-size:12px;">摘要</span></strong><span style="font-size:12px;" class="ue_t">：这里可以输入很长很长很长很长很长很长很长很长很差的摘要</span></p><p style="line-height:1.5em;"><strong>标题 1</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以输入很多内容，可以图文混排，可以有列表等。</span></p><p style="line-height:1.5em;"><strong>标题 2</strong></p><ol style="list-style-type:lower-alpha;"><li><p class="ue_t">列表 1</p></li><li><p class="ue_t">列表 2</p></li><ol style="list-style-type:lower-roman;"><li><p class="ue_t">多级列表 1</p></li><li><p class="ue_t">多级列表 2</p></li></ol><li><p class="ue_t">列表 3<br /></p></li></ol><p style="line-height:1.5em;"><strong>标题 3</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个文字图文混排的</span></p><p style="text-indent:2em;"><br /></p>',
+        'html': '<h2 style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;margin:0px 0px 10px;text-align:center;" class="ue_t">[键入文章标题]</h2><p><strong><span style="font-size:12px;">摘要</span></strong><span style="font-size:12px;" class="ue_t">：这里可以输入很长很长很长很长很长很长很长很长很差的摘要</span></p><p style="line-height:1.5em;"><strong>标题 1</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以输入很多内容，可以图文混排，可以有列表等。</span></p><p style="line-height:1.5em;"><strong>标题 2</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个列表瞅瞅：</span></p><ol style="list-style-type:lower-alpha;"><li><p class="ue_t">列表 1</p></li><li><p class="ue_t">列表 2</p></li><ol style="list-style-type:lower-roman;"><li><p class="ue_t">多级列表 1</p></li><li><p class="ue_t">多级列表 2</p></li></ol><li><p class="ue_t">列表 3<br /></p></li></ol><p style="line-height:1.5em;"><strong>标题 3</strong></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">来个文字图文混排的</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">这里可以多行</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">右边是图片</span></p><p style="text-indent:2em;"><span style="font-size:14px;" class="ue_t">绝对没有问题的，不信你也可以试试看</span></p><p><br /></p>'
+    }
+];

package/ueditor-resource/dialogs/template/template.css

@@ -0,0 +1,99 @@
+.wrap {
+    padding: 5px;
+    font-size: 14px;
+}
+
+.left {
+    width: 425px;
+    float: left;
+}
+
+.right {
+    width: 160px;
+    border: 1px solid #ccc;
+    float: right;
+    padding: 5px;
+    margin-right: 5px;
+}
+
+.right .pre {
+    height: 332px;
+    overflow-y: auto;
+}
+
+.right .preitem {
+    border: white 1px solid;
+    margin: 5px 0;
+    padding: 2px 0;
+}
+
+.right .preitem:hover {
+    background-color: lemonChiffon;
+    cursor: pointer;
+    border: #ccc 1px solid;
+}
+
+.right .preitem img {
+    display: block;
+    margin: 0 auto;
+    width: 100px;
+}
+
+.clear {
+    clear: both;
+}
+
+.top {
+    height: 26px;
+    line-height: 26px;
+    padding: 5px;
+}
+
+.bottom {
+    height: 320px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.transparent {
+    background: url("images/bg.gif") repeat;
+}
+
+.bottom table tr td {
+    border: 1px dashed #ccc;
+}
+
+#colorPicker {
+    width: 17px;
+    height: 17px;
+    border: 1px solid #CCC;
+    display: inline-block;
+    border-radius: 3px;
+    box-shadow: 2px 2px 5px #D3D6DA;
+}
+
+.border_style1 {
+    padding: 2px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px #d3d6da;
+}
+
+p {
+    margin: 5px 0
+}
+
+table {
+    clear: both;
+    margin-bottom: 10px;
+    border-collapse: collapse;
+    word-break: break-all;
+}
+
+li {
+    clear: both
+}
+
+ol {
+    padding-left: 40px;
+}

package/ueditor-resource/dialogs/template/template.html

@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="../internal.js?32939b8e"></script>
+    <link rel="stylesheet" type="text/css" href="template.css?3b1e29d0">
+</head>
+<body>
+<div class="wrap">
+    <div class="left">
+        <div class="top">
+            <label><var id="lang_template_clear"></var>：<input id="issave" type="checkbox"></label>
+        </div>
+        <div class="bottom border_style1" id="preview"></div>
+    </div>
+    <fieldset class="right border_style1">
+        <legend><var id="lang_template_select"></var></legend>
+        <div class="pre" id="preitem"></div>
+    </fieldset>
+    <div class="clear"></div>
+</div>
+<script type="text/javascript" src="config.js?a9586d57"></script>
+<script type="text/javascript" src="template.js?c0277498"></script>
+</body>
+</html>

package/ueditor-resource/dialogs/template/template.js

@@ -0,0 +1,53 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-8-8
+ * Time: 下午2:09
+ * To change this template use File | Settings | File Templates.
+ */
+(function () {
+    var me = editor,
+        preview = $G("preview"),
+        preitem = $G("preitem"),
+        tmps = templates,
+        currentTmp;
+    var initPre = function () {
+        var str = "";
+        for (var i = 0, tmp; tmp = tmps[i++];) {
+            str += '<div class="preitem" onclick="pre(' + i + ')"><img src="' + "images/" + tmp.pre + '" ' + (tmp.title ? "alt=" + tmp.title + " title=" + tmp.title + "" : "") + '></div>';
+        }
+        preitem.innerHTML = str;
+    };
+    var pre = function (n) {
+        var tmp = tmps[n - 1];
+        currentTmp = tmp;
+        clearItem();
+        domUtils.setStyles(preitem.childNodes[n - 1], {
+            "background-color": "lemonChiffon",
+            "border": "#ccc 1px solid"
+        });
+        preview.innerHTML = tmp.preHtml ? tmp.preHtml : "";
+    };
+    var clearItem = function () {
+        var items = preitem.children;
+        for (var i = 0, item; item = items[i++];) {
+            domUtils.setStyles(item, {
+                "background-color": "",
+                "border": "white 1px solid"
+            });
+        }
+    };
+    dialog.onok = function () {
+        if (!$G("issave").checked) {
+            me.execCommand("cleardoc");
+        }
+        var obj = {
+            html: currentTmp && currentTmp.html
+        };
+        me.execCommand("template", obj);
+    };
+    initPre();
+    window.pre = pre;
+    pre(2)
+
+})();