博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DWZ与KindEditor编辑器的整合
阅读量:6971 次
发布时间:2019-06-27

本文共 2344 字,大约阅读时间需要 7 分钟。

DWZ自带的编辑器是xheditor,可能很多人用不习惯。就像我,习惯用kindeditor了。现在就来说说如何整合dwz和kindeditor.

一、打开DWZ的中的dwz.ui.js,进行修改。

首先找到

if ($.fn.xheditor) {        $("textarea.editor", $p).each(function(){            var $this = $(this);            var op = {html5Upload:false, skin: 'vista',tools: $this.attr("tools") || 'full'};            var upAttrs = [                ["upLinkUrl","upLinkExt","zip,rar,txt"],                ["upImgUrl","upImgExt","jpg,jpeg,gif,png"],                ["upFlashUrl","upFlashExt","swf"],                ["upMediaUrl","upMediaExt","avi"]            ];                        $(upAttrs).each(function(i){                var urlAttr = upAttrs[i][0];                var extAttr = upAttrs[i][1];                                if ($this.attr(urlAttr)) {                    op[urlAttr] = $this.attr(urlAttr);                    op[extAttr] = $this.attr(extAttr) || upAttrs[i][2];                }            });                        $this.xheditor(op);        });}

这个地方,在它的后面加上一段代码

$("textarea.kindeditor", $p).each(function () {    $.getScript('/Content/kindeditor/kindeditor-min.js', function () {        KindEditor.basePath = '/Content/kindeditor/';        var editor = KindEditor.create('textarea[name="content"]', {            uploadJson: '/Content/kindeditor/asp.net/upload_json.ashx',            fileManagerJson: '/Content/kindeditor/asp.net/file_manager_json.ashx',            allowFileManager: true,            afterBlur: function () { editor.sync(); },            afterCreate: function () {                var self = this;                KindEditor.ctrl(document, 13, function () {                    self.sync();                    K('form[name=Myform]')[0].submit();                });                KindEditor.ctrl(self.edit.doc, 13, function () {                    self.sync();                    KindEditor('form[name=Myform]')[0].submit();                });            }        });    });});

注意几个地方:

1、kindeditor的路径问题,不要弄错了。我是MVC项目,因此我把kindeditor整个文件夹放在了根目录下的Content文件夹中。

2、设定使用编辑器表单页的form名称,例如我这儿设定为Myform。则在页面中必须有<form id="Myform">。

3、设定多行文本框textarea的名称。通过

KindEditor.create('textarea[name="content"]'

这句,在页面上的textarea的name属性就必须取名为content。

 

二、页面

首先在DWZ的index页中,引用kindeditor编辑要用的文件,如

然后增加一个DWZ的页面片段

这样就可以了。实际上就两个名字对应上就可以了,一个是<form>标记的id属性,一个是<textarea>标记的name属性。再加上一个class=“kindeditor",这个不能少,也不能变。

效果如果:

 

转载地址:http://vnfsl.baihongyu.com/

你可能感兴趣的文章
linux网络配置命令(二)——ip
查看>>
泛型通配符extends与super的区别
查看>>
openpose模型在AI challenge人体骨骼关键点检测的表现
查看>>
==与equals
查看>>
D2.Reactjs 操作事件、状态改变、路由
查看>>
初探 插头DP
查看>>
bzoj 2244: [SDOI2011]拦截导弹
查看>>
UNIX 系统概述
查看>>
Ubuntu14.04下安装Hadoop2.4.0 (单机模式)
查看>>
每周一荐:Google的序列化框架Protobuf
查看>>
002-B/S架构&C/S架构
查看>>
iOS注册collcetionViewFlowLayout
查看>>
python-selenium 元素定位
查看>>
windows下python的安装
查看>>
解决数据库卡、慢,问题多,难管理——老技术的执著
查看>>
ios学习视频比较
查看>>
mysqlbinlog读取二进制日志文件时,报错 (转)
查看>>
html5 css练习,弹性三栏布局
查看>>
游戏AI之模糊逻辑(4)
查看>>
day 06-02 元组(tuple)
查看>>