网页富文本编辑器の小分享

摘要: 主要介绍两个比较完整&稳定（中文文档相当详细的）富文本编辑器插件，kindeditor和ueditor，小分享一下kindeditor的使用方法。

先甩官网：

kindeditor：http://kindeditor.net/demo.php

ueditor：http://ueditor.baidu.com/website/

评价一下吧

kindeditor：官网挺简单的，一目了然。现在的版本趋于稳定（2013年更新了一次，到2016年才更新）。编辑器的UI也比较简约风，看着挺舒服的。

ueditor：官网就比较复杂了，有几个广告，当然文档和介绍也是很丰富的。其下有两个子产品ueditor（比较复杂，功能多）和umeditor（轻量的，功能少但对于一般的网站是足够的）。看文档的时候有种熟悉的感觉，然后顺便在脑海里搜索了一下之后....





btw，复制链接的时候才发现是度娘的产品...

分享一下kindeditor的使用方法。（php）

（1）http://kindeditor.net/down.php下载kindeditor ↓



（2）解压，放在文件夹里，找到下面的php/demo.php，有两个bug

1.把kindeditor.js改成kindeditor-all.js



2.如果想用demo中的图片上传功能，要在主文件夹下建一个名为”attached”的文件夹



（3）然后就可以在demo中正常用kindeditor富文本编辑器啦

（4）如果想要异步submit的话也很简单，在原来的代码加上



修改原来的editor1作用域



运行之后点击【表外提交】，截图如下



其实关键是 html = editor1.html(); 获取富文本里的数据

（PS，既然有富文本编辑器就要防XSS攻击，推荐HTML Purifier，在前两篇推文中有介绍_(:з」∠)_）

其他API详见：http://kindeditor.net/doc.php

如有错误，恳请指点。_(:з」∠)_，谢谢观看。