关闭

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

标签: 文本编辑kindeditordwzdialog
535人阅读 评论(1) 收藏 举报
分类:

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
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5637次
    • 积分:180
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论