dwz 整合 kindeditor 编辑器
27 . Feb . 2019
dwz 整合 kindeditor 编辑器
xheditor 在dwz中的应用不是很友好，例如没有多图片上传等等。那么今天我们把KindEditor编辑器整合到dwz应用中，实现多种编辑器选择。
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序
接合。
下载KindEditor的最新版本 http://kindeditor.net/down.php
引入核心js 原来的xheditor js必须引入，否则dwz无法检测到xheditor 应用
1、我们打开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编辑器原文件结束*/
/*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') : ''; //浏览远程图片地址
var items; //显示按扭图片，显示认全部
KindEditor.create('.kindeditor',
{
allowImageUpload:true,
resizeType : 1,
width:"100%", //编辑器的宽度
height:"", //编辑器的高度
allowFileManager: true,
uploadJson: upImgUrl, //图片上传地址
fileManagerJson: ImgSpaceUrl,//指定浏览远程图片的服务器端程序地址
items : items,
afterBlur: function () {
//编辑器光标失去焦点时执行，获取textarea的值
this.sync();
},
afterUpload : function(url) {
//上传完成后执行
//alert(url);
}
});
});
/*kindeditor-4.1.10 编辑器结束*/
}
2、在html中的应用，只要改变textarea 的class值就就实现不同的编辑器
< textarea name=”name” class=”kindeditor” up-url=”up.php” space-url=””>< / textarea>
3、服务器响应为JSON
上传成功应返回die('{"error":0,"url":"Uploads/123566.png"}');
上传失败应返回die('{"error":1," message":"这里提示错误信息"}');
