dwz的文本编辑器不是那么好用,上传文件的地方没搞明白,如何能上传到服务器上。于是想到了一直用惯而且又好用的kindeditor富文本编辑器。网上找了好多DWZ整合Kindeditor的帖子,可是没法满足我在dialog弹出框里有富文本编辑器。在我的理解和尝试下,按以下步骤即可实现:
1.在dwz.ui.js里添加Kindeditor的运行脚本
即在if ($.fn.xheditor) {………}里加如下的代码:
$("textarea.kindeditor", $p).each(function () {
var _obj = $(this);
var _name = _obj.attr('name');
var _tools = _obj.attr('tools');
if(!_tools){_tools='full';}
if(_tools=='simple'){
items = ['undo', 'redo', '|', 'justifycenter', 'justifyright','justifyfull', 'indent', 'outdent','bold','italic', 'underline', 'strikethrough', 'removeformat'];
}else if(_tools=='full'){
items = ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap','anchor', 'link', 'unlink'];
}else if(_tools=='basic'){
items = ['source', '|', 'undo', 'redo', '|', 'plainpaste', 'wordpaste', '|', 'justifycenter', 'justifyright','justifyfull', 'indent', 'outdent','clearhtml', 'quickformat', '|','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat','image', 'multiimage', 'link', 'unlink', 'fullscreen'];
}else if(_tools=='copyright'){
items = ['source','undo', 'redo', '|', 'justifycenter', 'justifyright','justifyfull', 'indent', 'outdent', 'forecolor', 'bold','italic','removeformat'];
}
KindEditor.basePath = DK.kindeditor.basePath;
var editor = KindEditor.create('textarea[name="'+_name+'"]', {
cssPath : DK.kindeditor.cssPath,
uploadJson : DK.kindeditor.upload,
fileManagerJson : DK.kindeditor.filemanager,
items : items,
pasteType : 1,
allowFileManager : true,
afterBlur:function(){this.sync();}
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['"'+DK.kindeditor.myForm+'"'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['"'+DK.kindeditor.myForm+'"'].submit();
});
}
});
prettyPrint();
});
2.首先在DWZ的index页中,引用kindeditor编辑要用的文件,如
<link rel="stylesheet" href="include/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="include/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="include/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="include/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="include/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="include/kindeditor/plugins/code/prettify.js"></script>
然后在dialog的弹出页加上公共变量:
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript">
var DK= {}
DK.kindeditor={basePath:'<%=basePath %>include/kindeditor/',upload:'<%=basePath %>fileUpload.html',filemanager:'<%=basePath %>fileManage.html',myForm:'myform',cssPath:'<%=basePath %>include/kindeditor/plugins/code/prettify.css'};
</script>
3.在textarea标签里加上class=”kindeditor”,name=“youname”等
< textarea name="youname" class="kindeditor" tools="basic" style="width: 680px; height: 200px;">
< / textarea>
其中:class=”kindeditor”必须有,name就是要提交的名称,tools是编辑器样式(可以为空)
注:tools的样式有:simple,full,basic,copyright
4.注意事项
一定要注意路径的问题,检查js和css文件是否引入成功。