学习整理在php中使用KindEditor富文本编辑器
1、下载编辑器2、部署kindeditor编辑器3、在html页面里引入编辑器4、Ajax提交表单时获取不到 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、解决：使用/doc3.php?cmd=config的afterBlur属性。
KindEditor.ready(function (K) {window.editor = K.create('#AContent', {//关键所在，当失去焦点时执行this.sync()，同步输入的值到textarea中;afterBlur: function () {this.sync(); }});});
在上面使用了afterBlur 方法做了一个处理，该方法是当编辑框失焦的是触发的，然后再去做数据同步
