学习整理在php中使用KindEditor富文本编辑器
1、下载编辑器
下载链接: 下载 - KindEditor - 在线HTML编辑器
2、部署kindeditor编辑器
将下载好的压缩包解压后放到网站程序目录里
3、在html页面里引入编辑器
创建文本域textarea
<textarea name="content" id="Contents" style="width:600px;height:450px;"></textarea>
在页面引入js文件
<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>
初始化编辑器
<script>
//编辑器
var KE;
KindEditor.ready(function (K) {
KE = K.create('#Contents', {
allowFileManager: true, //浏览图片空间
filterMode: false, //HTML特殊代码过滤
afterBlur: function () { this.sync(); }, //编辑器失去焦点(blur)时执行的回调函数(将编辑器的HTML数据同步到textarea)
afterUpload: function (url, data, name) { //上传文件后执行的回调函数,必须为3个参数
if (name == "image" || name == "multiimage") { //单个和批量上传图片时
var img = new Image(); img.src = url;
img.onload = function () { //图片必须加载完成才能获取尺寸
if (img.width > 100) {
KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>', '<img src="' + url + '" width="100" height="100px"/>'))
//KE.html(KE.html().replace('<img src="' + url + '" width="300"/>', '<img src="' + url + '" width="300"/>'))
}
}
}
}
});
KindEditor.create('#Contents', { allowImageUpload: false, resizeType: 1, width: "600px", height: "300px" });
});
</script>
4、Ajax提交表单时获取不到 KindEditor 内容
1、问题:当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了。
2、原因:jax提交时,KindEdito的HTML数据还没有同步到表单中来。
3、解决:使用http://kindeditor.net/doc3.php?cmd=config的afterBlur属性。
KindEditor.ready(function (K) {
window.editor = K.create('#AContent', {
//关键所在,当失去焦点时执行this.sync(),同步输入的值到textarea中;
afterBlur: function () {
this.sync();
}
});
});
在上面使用了afterBlur 方法做了一个处理,该方法是当编辑框失焦的是触发的,然后再去做数据同步