开发php接入富文本编辑器KindEditor笔记

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

附:KindEditor-编辑器配置参数属性

kindeditor下载地址:

http://kindeditor.net/down.php

20190106132601.jpg

页面接入编辑器代码:

1、在需要显示编辑器的位置添加textarea输入框。

Note:
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用 编辑器初始化参数 设置。

 

2、在该HTML页面添加以下脚本。

Note:
第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考 编辑器初始化参数 。

 

3、获取Html数据

Note:
KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式,可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式,保留所有标签。

 

4、获取编辑后的html数据以及走自己的图片上传接口:

 

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" : "错误信息"
}

 

 

觉得好的话记得打赏赞助小灰灰哦,小灰灰灰更有动力的,谢谢

小灰灰

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: