【简单教程】js插件之KindEditor 幻幻Fate 2015年01月21日 0 5,675次浏览 kindeditor,js

KindEditor，一款网页文本编辑器插件，找过很多中插件，对比下来这款插件最美观最好用。目前最新版本是4.1.10.

一、先说js部分

最简单的配置，只有文本编辑功能

KindEditor.ready(function(K) {
    window.editor = K.create('#editor_id');//editor_id为作为KindEditor容器的testarea的id
});

HTML部分，这个都一样

<textarea id="editor_id"></textarea>

效果：

现在所有的上传功能都是不可用的，因为没有设置上传服务器地址

KindEditor.ready(function(K) {
	var editor = K.create("#editor_id", {
		uploadJson : 'file/upload',
                fileManagerJson : 'filelist/index',
                allowFileManager : true
	});
});

“file/uplaod”是上传文件的地址，“filelist/index”是已经上传的文件的文件列表地址，allowFileManager : true代表开启文件列表管理。

加入上传功能后的效果：

为什么要杠掉呢- -，因为这个博客用的是php搭建的已经占用了80端口，而上传服务器使用java写的，在tomcat上运行，这样导致两个应用的域名和端口总会不一样，而浏览器对于不同域名端口的地址是不能用post调用的，而且CDN貌似不支持8080端口，于是乎就悲剧了，等哪天想到解决方法了再补上~~

二、后台

这边以java为例，上传文件后怎么处理这里就不谈了，不管是放在服务器本地还是放在云存储，对于这个插件都无影响，最关键的是服务器要给插件返回个json格式响应，并且格式要正确。

//成功时
{
    "error" : 0,
    "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
    "error" : 1,
    "message" : "错误信息"
}

在java中可以使用Map来构造json格式

//成功时
map.put("url", "http://www.example.com/path/to/file.ext");
map.put("error", 0);
//失败时
map.put("error", 1);
map.put("message", "上传错误");

同时如果是spring框架，则在函数入口加上@ResponseBody，以表明这是个json格式；假如是nutz框架，则是@Ok(“json”)

好了好了，大致就是这样，其实像这类要和后台交互数据的就是插件，只要把前后台直接传输的内容搞清楚就很简单。