Commit a866cd37 authored by panpp's avatar panpp
Browse files

static init

parent 5c8b50e7
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../internal.js"></script>
<link rel="stylesheet" type="text/css" href="edittable.css">
</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"></script>
</body>
</html>
\ No newline at end of file
/**
* 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;
};
})();
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../internal.js"></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>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>表格删除提示</title>
<script type="text/javascript" src="../internal.js"></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>
\ No newline at end of file
/**
* 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>'
}
];
\ No newline at end of file
.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; }
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="../internal.js"></script>
<link rel="stylesheet" type="text/css" href="template.css">
</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"></script>
<script type="text/javascript" src="template.js"></script>
</body>
</html>
/**
* 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)
})();
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment