DWZ(JUI)整合Kindeditor应用于dialog弹出框

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文件是否引入成功。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DataVault善战

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值