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

原创 2016年05月31日 22:51:35

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

dwz xheditor编辑器文件上传

转载地址:http://blog.csdn.net/sean_cd/article/details/8027315 client------------------------ ...
  • terry_water
  • terry_water
  • 2016年08月21日 16:28
  • 520

dwz xheditor编辑器文件上传

client------------------------
  • sean_cd
  • sean_cd
  • 2012年09月28日 09:39
  • 6141

dwz 两个dialog窗口传值

本人对dwz完全是不熟悉,在做项目的时候遇到这样的问题  页面弹出一个dialog(父窗口)要求在弹出一个子窗口,想要页面同时有两个窗口 解决办法是在父窗口给一个 rel="名字自己定义" 这是父窗...
  • chc003
  • chc003
  • 2014年03月05日 12:28
  • 2545

DWZ中刷新dialog的方案解决

转自:http://www.cnblogs.com/denny402/p/3350056.html 在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的n...
  • wujingwen1111
  • wujingwen1111
  • 2014年01月17日 10:42
  • 2513

dwz打开自定义dialog

在使用dwz界面的时候,需要打开自定义的dialog,并向其中传入参数,在网上搜索,大多数是使用lookup这这样的功能来实现lookup这样的功能太复杂看不懂,所以使用了jquery的方法来实现自定...
  • sunbingzibo
  • sunbingzibo
  • 2018年01月02日 14:10
  • 48

完美解决kindeditor IE11看不到弹出框,兼容性问题

  • 2014年12月02日 10:43
  • 151KB
  • 下载

完美解决KindEditor手机弹出框显示问题

完美解决KindEditor手机弹出框显示问题 kindeditor是非常方便简单使用的富文本编辑器,也很符合国人的习惯,尤其是表情等应用,但是kindedtor在手机上的显示也是一个比较头疼的问...
  • qq_20441521
  • qq_20441521
  • 2016年01月27日 22:36
  • 4144

解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)

问题:使用KindEditor上传图片,当浏览器缩小或者放大的时候,上传对话框会不见了。 原因是当浏览器放大缩小时,窗口的 innerHeight 和 innerWidth 成倍变化。 但是动态加...
  • kinginblue
  • kinginblue
  • 2015年04月30日 19:04
  • 2394

kindeditor在dialog弹出框中无法获得焦点

前几天遇到一个问题,当kindeditor在dialog中使用时,无法获得焦点。 使用的是最通用的kindeditor初始化代码和dialog弹出框代码,代码如下: KindEditor.re...
  • Sky___Ice
  • Sky___Ice
  • 2013年06月26日 11:34
  • 7256

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

dwz的文本编辑器不是那么好用,上传文件的地方没搞明白,如何能上传到服务器上。于是想到了一直用惯而且又好用的kindeditor富文本编辑器。网上找了好多DWZ整合Kindeditor的帖子,可是没法...
  • u010435615
  • u010435615
  • 2016年05月31日 22:51
  • 839
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DWZ(JUI)整合Kindeditor应用于dialog弹出框
举报原因:
原因补充:

(最多只允许输入30个字)