支持python的富文本编辑器 富文本编辑器开发

在做开发的时候，想使用富文本编辑器，小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器，轻量级的，文件不是很大解压之后也才1M多，而且小灰灰喜欢kind带的清除格式以及一键排版功能，个人觉得比ueditor好用一点。另外还支持上传图片的上传接口走自己的api接口(可以不走自带上传接口)。

kindeditor下载地址：

页面接入编辑器代码：

1、在需要显示编辑器的位置添加textarea输入框。
PHP
这里是内容
1
2
3
这里是内容
Note：
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。
2、在该HTML页面添加以下脚本。
PHP
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
1
2
3
4
5
6
7
KindEditor.ready(function(K){
window.editor=K.create('#editor_id');
});
Note：
第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。
3、获取Html数据
PHP
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery
// 设置HTML内容
editor.html('HTML内容');
1
2
3
4
5
6
7
8
9
10
11// 取得HTML内容
html=editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html=document.getElementById('editor_id').value;// 原生API
html=K('#editor_id').val();// KindEditor Node API
html=$('#editor_id').val();// jQuery
// 设置HTML内容
editor.html('HTML内容');
Note：
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。
4、获取编辑后的html数据以及走自己的图片上传接口：
PHP
KindEditor.ready(function(K) {
window.editor=K.create('#editor_id', {
afterBlur: function(){this.sync();},
uploadJson : "/admin/upload_edit_pic",
fileManagerJson : '/11/1.php',
allowFileManager : true //true或false，true时显示浏览服务器图片功能。
});
});
1
2
3
4
5
6
7
8KindEditor.ready(function(K){
window.editor=K.create('#editor_id',{
afterBlur:function(){this.sync();},
uploadJson:"/admin/upload_edit_pic",
fileManagerJson:'/11/1.php',
allowFileManager:true//true或false，true时显示浏览服务器图片功能。
});
});
Note：
afterBlur: function(){this.sync();}，当失去焦点时执行 this.sync();那么这个 this.sync(); 函数是干嘛的呢？简单的说：这个函数就是同步KindEditor的值到textarea文本框。
上传走的是POST方法POST参数
imgFile: 文件form名称
dir: 上传类型，分别为image、flash、media、file
返回格式(json)
//成功时
{
"error" : 0,
"url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
"error" : 1,
"message" : "错误信息"
}