先來一張圖
模板設計器 使用的是 TinyMce，下載地址：TinyMce
後面會把 詳細的代碼及實現思路貼上來
步驟一、集成TinyMce
引入 tinyMce
<script type="text/javascript" src="../../../../comm/lib/tinymce/tinymce.min.js"></script>
來一個textarea
<textarea id="templateElm"></textarea>
js中初始化 tinyMce
tinymce.init({
selector: 'textarea#templateElm', //<textarea>中爲編輯區域
theme: "modern", //主題
language: "zh_CN", //語言 ，可自行下載中文
branding: false,
height: 340,
plugins: [ //插件，可自行根據現實內容刪除
"advlist autolink lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
"save table contextmenu directionality emoticons powerpaste textcolor"
],
file_browser_callback: function(field_name, url, type, win) {
win.document.getElementById(field_name).value = 'my browser value';
},
powerpaste_word_import: 'propmt', // 參數可以是propmt, merge, clear，效果自行切換對比
powerpaste_html_import: 'propmt', // propmt, merge, clear
powerpaste_allow_local_images: true,
content_css: "../../../../comm/css/template.css", //引用的外部CSS樣式，可刪除
toolbar: "insertfile | styleselect fontselect fontsizeselect| bold italic | " +
"alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l " +
"| fullpage | forecolor backcolor", //工具欄，可根據需求刪除
style_formats: [ //初始時提供的默認格式
{
title: 'Bold text',
inline: 'b'
},
{
title: 'Red text',
inline: 'span',
styles: {
color: '#ff0000'
}
},
{
title: 'Red header',
block: 'h1',
styles: {
color: '#ff0000'
}
},
{
title: 'Example 1',
inline: 'span',
classes: 'example1'
},
{
title: 'Example 2',
inline: 'span',
classes: 'example2'
},
{
title: 'Table styles'
},
{
title: 'Table row 1',
selector: 'tr',
classes: 'tablerow1'
}
]
});
步驟二、添加左側插件組
<div class="layui-inline">
<button class="layui-btn layui-btn-primary btn-li first-li" data-type="rescode"><\>源碼</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertForm">表單</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertCheckbox">複選框</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertRadio">單選按鈕</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertTextInput">單行文本框</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertDownListBtn">下拉列表</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertHiddenInput">隱藏域</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertTextArea">文本域</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertFileUpload">文件上傳</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertPrimaryBtn">普通按鈕</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertSubmitBtn">提交按鈕</button>
<button class="layui-btn layui-btn-primary btn-li" data-type="insertResetBtn">重置按鈕</button>
</div>
綁定點擊事件：
//定義右側工具欄事件
active = {
rescode: function() { //源碼
$('#rescode_ta').val(tinymce.activeEditor.getContent());
layer.open({
type: 1,
offset: '10px',
title: "源碼", //不顯示標題
area: ['1000px', '650px'],
content: $('#rescode_ta'),
btn: ['確認', '關閉'],
yes: function(index) {
initTemplateView($('#rescode_ta').val());
layer.close(index);
}
});
},
insertForm: function() { //插入表單
var formHTML = '<form class="edit-form" id="commonForm"><br /></form>'
tinymce.execCommand("mceInsertContent", false, formHTML);
DomListener(); //重新設置監聽
},
insertCheckbox: function() { //插入複選框
var checkboxHTML = '<input name="modelcheckbox" type="checkbox" value="" />'
tinymce.execCommand("mceInsertContent", false, checkboxHTML);
DomListener(); //重新設置監聽
},
insertRadio: function() { //插入單選按鈕
var uuid = $tool.uuid(16, 16);
var radioHTML = '<label><input name="modelredio" type="radio" value="0" />是</label> ' +
'<label><input name="modelredio" type="radio" value="1" />否</label>'
tinymce.execCommand("mceInsertContent", false, radioHTML);
DomListener(); //重新設置監聽
},
insertTextInput: function() { //插入文本框
var uuid = $tool.uuid(16, 16);
tinymce.execCommand("mceInsertContent", false, '<input type="text" />');
DomListener(); //重新設置監聽
},
insertHiddenInput: function() { //插入隱藏域
var uuid = $tool.uuid(16, 16);
var checkboxHTML = '<input name="modelHidden" type="text" data-inputtype="hidden" class="hiddeninput" value="" />'
tinymce.execCommand("mceInsertContent", false, checkboxHTML);
DomListener(); //重新設置監聽
},
insertTextArea: function() { //插入文本域
var uuid = $tool.uuid(16, 16);
var textareaHTML = '<textarea name="modeltextarea" > </textarea>'
tinymce.execCommand("mceInsertContent", false, textareaHTML);
DomListener(); //重新設置監聽
},
insertFileUpload: function() { //插入文件上傳
var uuid = $tool.uuid(16, 16);
var textareaHTML = '<input type="text" /><button class="uploadFile" type="button">選擇文件</button>'
tinymce.execCommand("mceInsertContent", false, textareaHTML);
DomListener(); //重新設置監聽
},
insertPrimaryBtn: function() { //插入普通按鈕
var uuid = $tool.uuid(16, 16);
tinymce.execCommand("mceInsertContent", false, '<input type="button" value="普通按鈕"/>');
DomListener(); //重新設置監聽
},
insertSubmitBtn: function() { //插入提交按鈕
var uuid = $tool.uuid(16, 16);
tinymce.execCommand("mceInsertContent", false, '<input type="button" class="submit" value="保存" >');
DomListener(); //重新設置監聽
},
insertResetBtn: function() { //插入重置按鈕
var uuid = $tool.uuid(16, 16);
tinymce.execCommand("mceInsertContent", false, '<input type="reset" value="重置" />');
DomListener(); //重新設置監聽
},
insertDownListBtn: function() { //插入下拉框
tinymce.execCommand("mceInsertContent", false, '<select style="width: 120px"><option value="1">選擇一</option><option value="2" >選擇二</option>' +
'<option value="3">選擇三</option> </select>');
DomListener(); //重新設置監聽
}
};
步驟三、綁定input、select、radio、checkbox等元素的點擊事件
因爲動態添加的html元素需要重新設置 點擊事件的監聽。
var iframeDocument =iframeDocument = $('#templateElm_ifr')[0].contentDocument; //獲取 tinyMce 的 編輯區域的 iframe DOM對象
function DomListener() {
$(iframeDocument).find("input").unbind("click"); //清除之前的綁定，否則會造成重複綁定
$(iframeDocument).find("input").bind("click", function() {
var dataItemCode = $(this).attr("data-itemcode");
var datasource = HTMLFormat(tinymce.activeEditor.getContent());
var dataId = ""
if($(this).attr("id") != undefined) {
dataId = $(this).attr("id");
}
//隱藏所有面板
$(".config_pane_item").hide();
if("radio" == $(this).attr("type")) { //redio組
if(dataItemCode == undefined || dataItemCode == "") { //如果dataItemCode未找到，說明是新建的數據項
var that = this;
var radioName = $(this).attr("name");
var datacode = "";
$(datasource).find('input[name="' + radioName + '"][type="radio"]').each(function(index, item) {
if($(item).attr('data-itemcode') != undefined) {
datacode = $(item).attr('data-itemcode');
return false;
}
});
$("#template_data_config_pane").show();
if(datacode != "") {
$(this).attr("data-itemcode", datacode);
templateData(templateId, datacode, this, dataId);
} else {
dataItemCode = $tool.uuid(16, 16);
$(datasource).find('input[ name="' + radioName + '"][type="radio"]').each(function(indexs, items) {
$($(that).parents("#tinymce").find('input[ name="' + radioName + '"][type="radio"]')[indexs]).attr("data-itemcode", dataItemCode)
})
templateData(templateId, dataItemCode, this, dataId);
}
} else {
$("#template_data_config_pane").show();
templateData(templateId, dataItemCode, this, dataId);
}
}
if("checkbox" == $(this).attr("type")) { //checkbox組
if(dataItemCode == undefined || dataItemCode == "") { //如果dataItemCode未找到，說明是新建的數據項
var cthat = this;
var checkboxName = $(this).attr("name");
var checkboxCode = ""
$(datasource).find('input[name="' + checkboxName + '"][type="checkbox"]').each(function(indexs, items) {
if($(items).attr('data-itemcode') != undefined) {
checkboxCode = $(items).attr('data-itemcode');
return false;
}
})
$("#template_data_config_pane").show();
if(checkboxCode != "") {
$(this).attr("data-itemcode", checkboxCode);
templateData(templateId, checkboxCode, this, dataId);
} else {
dataItemCode = $tool.uuid(16, 16);
$(datasource).find('input[name="' + checkboxName + '"][type="checkbox"]').each(function(indexsd, itemsd) {
$($(cthat).parents("#tinymce").find('input[name="' + checkboxName + '"][type="checkbox"]')[indexsd]).attr("data-itemcode", dataItemCode)
})
templateData(templateId, dataItemCode, this, dataId);
}
} else {
$("#template_data_config_pane").show();
templateData(templateId, dataItemCode, this, dataId);
}
}
if("text" == $(this).attr("type")) {
if(dataItemCode == undefined) { //如果dataItemCode未找到，說明是新建的數據項
dataItemCode = $tool.uuid(16, 16);
$(this).attr("data-itemcode", dataItemCode);
}
//展示模板數據項目面板
$("#template_data_config_pane").show();
templateData(templateId, dataItemCode, this, dataId);
}
if("button" == $(this).attr("type")) {
if(dataItemCode == undefined) { //如果dataItemCode未找到，說明是新建的數據項
dataItemCode = $tool.uuid(16, 16);
$(this).attr("data-itemcode", dataItemCode);
}
//展示模板按鈕屬性面板
$("#template_btn_config_pane").show();
templateBtn(templateId, dataItemCode, this, dataId);
}
})
/*設置 textarea 點擊監聽事件*/
$(iframeDocument).find("textarea").unbind("click"); //清除之前的綁定，否則會造成重複綁定
$(iframeDocument).find("textarea").bind("click", function() {
var dataItemCode = $(this).attr("data-itemcode");
var dataId = ""
if($(this).attr("id") != undefined) {
dataId = $(this).attr("id");
}
if(dataItemCode == undefined) { //如果dataItemCode未找到，說明是新建的數據項
dataItemCode = $tool.uuid(16, 16);
$(this).attr("data-itemcode", dataItemCode);
if($(this).attr("id") == undefined) {
$(this).attr("id", dataItemCode);
}
}
//隱藏所有面板
$(".config_pane_item").hide();
//展示模板數據項目面板
$("#template_data_config_pane").show();
templateData(templateId, dataItemCode, this, dataId);
})
/*設置 select 點擊監聽事件*/
$(iframeDocument).find("select").unbind("click"); //清除之前的綁定，否則會造成重複綁定
$(iframeDocument).find("select").bind("click", function() {
var dataItemCode = $(this).attr("data-itemcode");
var dataId = ""
if($(this).attr("id") != undefined) {
dataId = $(this).attr("id");
}
if(dataItemCode == undefined) { //如果dataItemCode未找到，說明是新建的數據項
dataItemCode = $tool.uuid(16, 16);
$(this).attr("data-itemcode", dataItemCode);
if($(this).attr("id") == undefined) {
$(this).attr("id", dataItemCode);
}
}
//隱藏所有面板
$(".config_pane_item").hide();
//展示模板數據項目面板
$("#template_data_config_pane").show();
templateData(templateId, dataItemCode, this, dataId);
})
}
通過綁定的點擊事件，就可以彈出相關的配置面板了。
步驟四、添加自定義樣式
在初始化tinymce時，有一個屬性叫 content_css: "../../../../comm/css/template.css", //引用的外部CSS樣式，可刪除
其中的內容爲：
.edit-form{
border: 1px dashed #F00;
}
.hiddeninput{
border: 1px dashed #b9b7b7;
width:40px;
}
這樣加上去之後，編輯器中就能直接使用 template中定義的樣式
表單：
我在插入表單對象時，給了一個 edit-form 樣式，這樣就能直接 以紅色的邊框展示。
隱藏域：
隱藏域比較特殊，因爲如果插入一個真實的 type=‘‘hidden’’ 的input元素的話，編輯器中是看不見的，導致不能點擊，所以我插入的隱藏域是這樣的：
<input name="modelHidden" type="text" data-inputtype="hidden" class="hiddeninput" value="" />
它的type是一個 text。然後給了一個 hiddeninput樣式。
最後在做保存的時候，將 所有 data-inputtype="hidden" 的input元素的 type改成hidden就可以了。