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关闭当前dailog窗口

dwz dialog链接扩展 A所指向页面将会在dialog 弹出层中打开,rel标识此弹出层的ID,rel为可选项。 Html标签扩展方式示例: 弹出窗口 ...

dwz封闭当前dailog窗口 【转】

dwz关闭当前dailog窗口dwz dialog链接扩展A所指向页面将会在dialog 弹出层中打开,rel标识此弹出层的ID,rel为可选项。Html标签扩展方式示例:弹出窗口或打开窗口一Max ...

dwz dialog不出来的问题

一、子页面加载完毕后,动态生成sadfa,需要显式调用一下dwz框架的初始化dialog函数,否则不弹出窗口,而是新打开一个页面。             ....            ...
  • wxljmy
  • wxljmy
  • 2013年10月14日 17:03
  • 1439

dwz 页面上关闭dialog弹出层,navTab 界面方式。

setTimeout(function(){$.pdialog.closeCurrent();}, 100);   alertMsg.error("对不起!该返修仓库不能添加返修计划!");   ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

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

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

改造Kindeditor之:自定义图片上传插件。 外加给图片增加水印效果的选择。

场景: 编辑部人士编辑文章时需要在文章中上传图片。但上传图片时需要增加是否增加水印的选择(有可能是自己公司的原创作品)。所以需要改造Kindeditor . 1: 删除Kindeitor 默认的参数...

KindEditor上传本地图片

自己动手配置了一下KindEditor文本编辑器上传本地图片的功能,不需要动手写action,相关详细配置和代码如下。...

DWZ (JUI) 应用实例(一):通过自定义标签和BaseAction 简化 table 分页排序

前段时间忙于做项目,在使用DWZ过程中,发现有些代码的重复度挺大,所以工作空闲之余,写一下分页排序的Demo,并且使用自定义标签简化重复的代码。(发现越来越多的人关注该框架了,因为是国产,可以更快的上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DWZ(JUI)整合Kindeditor应用于dialog弹出框
举报原因:
原因补充:

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