原文:DWZ與KindEditor編輯器的整合

DWZ自帶的編輯器是xheditor,可能很多人用不習慣。就像我，習慣用kindeditor了。現(xiàn)在就來說說如何整合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编辑器的整合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。