百度编辑器UEditor 简单使用教程分享
的有关信息介绍如下:UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器,UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下,记录于此。
将UEditor部署到PHP程序上
1.将UEditor的所有文件放在PHP程序的目录中,这里我把文件放在/ueditor目录下。
2.在网页中引入UEditor文件
3.在textarea标签下初始化UEditor
配置UEditor编辑器
editor_config.js是UEditor的配置文件,首先对路径进行配置。
修改第27行左右的路径配置(根据版本不同可能会有变动)
保存,OK搞定,UEditor编辑器就能使用了,此时同样可以使用POST或者GET接收到提交的数据。
editor_config.js里还有很多常用的配置项目,比如编辑器初始内容、编辑器高度等等,需要配置时只需去掉该行代码前面的注释符号//即可。
使用定制版的童鞋可以下载一个完整版,里面的配置文件比较完整,有些东西可以COPY过来。
UEditor代码高亮
UEditor代码高亮使用了第三方的高亮JS组件 – SyntaxHighlighter,在测试的过程中问题不少,使用UEditor编辑器“插入代码”功能插入代码并提交到数据库后,在显示页面代码是不会高亮显示的,需要在该页面加载一下JS和CSS文件。
另外需要注意到的一个问题是:编辑器会自动过滤掉代码中的很多标签,我们需要对它进行先转义,也就是 htmlspecialchars
此处采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了使用传统的textarea标签作为容器所带来的一次额外转码问题。
ok,UEditor编辑器的使用介绍到这里,谢谢大家的参阅!!