dwz 整合 kindeditor 編輯器
27 . Feb . 2019
dwz 整合 kindeditor 編輯器
xheditor 在dwz中的應(yīng)用不是很友好，例如沒(méi)有多圖片上傳等等。那么今天我們把KindEditor編輯器整合到dwz應(yīng)用中，實(shí)現(xiàn)多種編輯器選擇。
KindEditor是一套開(kāi)源的HTML可視化編輯器，主要用于讓用戶(hù)在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫(xiě)，可以無(wú)縫的于Java、.NET、PHP、ASP等程序
接合。
下載KindEditor的最新版本 http://kindeditor.net/down.php
引入核心js 原來(lái)的xheditor js必須引入，否則dwz無(wú)法檢測(cè)到xheditor 應(yīng)用
1、我們打開(kāi)dwz 核心文件dwzjsdwz.min.js 找到
if($.fn.xheditor){
/*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);});
/*xheditor編輯器原文件結(jié)束*/
/*kindeditor-4.1.10 編輯器*/
$("textarea.kindeditor", $p).each(function () {
var _this = $(this);
var upImgUrl=_this.attr('up-url') ? _this.attr('up-url') : ''; //上傳圖片提交地址
var ImgSpaceUrl=_this.attr('space-url') ? _this.attr('space-url') : ''; //瀏覽遠(yuǎn)程圖片地址
var items; //顯示按扭圖片，顯示認(rèn)全部
KindEditor.create('.kindeditor',
{
allowImageUpload:true,
resizeType : 1,
width:"100%", //編輯器的寬度
height:"", //編輯器的高度
allowFileManager: true,
uploadJson: upImgUrl, //圖片上傳地址
fileManagerJson: ImgSpaceUrl,//指定瀏覽遠(yuǎn)程圖片的服務(wù)器端程序地址
items : items,
afterBlur: function () {
//編輯器光標(biāo)失去焦點(diǎn)時(shí)執(zhí)行，獲取textarea的值
this.sync();
},
afterUpload : function(url) {
//上傳完成后執(zhí)行
//alert(url);
}
});
});
/*kindeditor-4.1.10 編輯器結(jié)束*/
}
2、在html中的應(yīng)用，只要改變textarea 的class值就就實(shí)現(xiàn)不同的編輯器
< textarea name=”name” class=”kindeditor” up-url=”up.php” space-url=””>< / textarea>
3、服務(wù)器響應(yīng)為JSON
上傳成功應(yīng)返回die('{"error":0,"url":"Uploads/123566.png"}');
上傳失敗應(yīng)返回die('{"error":1," message":"這里提示錯(cuò)誤信息"}');
