DWZ与KindEditor编辑器的整合

原文:DWZ与KindEditor编辑器的整合

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);});
}

View Code

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

$("textarea.kindeditor", $p).each(function () {$.getScript('kindeditor/kindeditor-min.js', function () {KindEditor.basePath = 'kindeditor/';var editor = KindEditor.create('textarea[name="content"]', {uploadJson: 'kindeditor/asp.net/upload_json.ashx',fileManagerJson: '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();});}});});
});

View Code

注意几个地方：

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

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

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

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

View Code

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

二、页面

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

<script type="text/javascript" src="kindeditor/kindeditor-min.js"></script>
<script type="text/javascript" src="kindeditor/lang/zh_CN.js"></script>

View Code

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

<form method="post" id="Myform" action="PostArticle" class="pageForm required-validate" οnsubmit="return validateCallback(this, navTabAjaxDone)">
<textarea name="content" class="kindeditor" style="width: 680px; height: 200px;"></textarea>
<input type="submit"  value="添加" />
</form>

View Code

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

效果如果：

DWZ与KindEditor编辑器的整合相关推荐

织梦DEDECMS 整合Kindeditor编辑器美化版nkeditor版可H5多图上传摒弃SWF上传
织梦插件说明织梦DEDECMS 整合Kindeditor编辑器美化版nkeditor版可H5多图上传摒弃SWF上传(UTF版) 本修改整合了Kindeditor编辑器美化版功能: 1.可多图上传( ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
织梦html编辑器,织梦dedecms自带文本编辑器ckeditor更换为kindeditor编辑器带代
织梦dedecms自带文本编辑器ckeditor更换为kindeditor编辑器带代日期:2018-12-05 08:31 您的打赏帮助我们变得更好,谢谢支持! 在kindeditor基础上添加了如 ...
KindEditor编辑器的使用
KindEditor编辑器是一款不错的编辑器插件,在开发项目中可以直接拿来使用,本文则是现在身为小白的我在对KindEditor编辑器整合到项目中所写的真实性项目使用KindEditor的一次项目记录 ...
php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
KindEditor编辑器在ASP.NET中的使用
KindEditor编辑器在ASP.NET中的使用最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用一下KindEdit ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
如何在一个页面添加多个不同的kindeditor编辑器
kindeditor官方下载地址:http://kindeditor.net/down.php (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...
KindEditor编辑器结合EasyUi
KindEditor编辑器 var editor;//初始化编辑器 editor = KindEditor.create('#descriptionKindEditorU', {//创建编辑器item ...

DWZ与KindEditor编辑器的整合

DWZ与KindEditor编辑器的整合相关推荐

最新文章

热门文章