UEditor的使用
UEditor 是目前项目正在使用的富文本编辑器。
基本知识
————————————————————————————————————
1.依赖：不依赖任何第三方库，可单独使用
2.使用：
（1）文件管理：为简化管理开发，建议将UEditor单独放在一个文件夹内，不建议重新组织文件结构（可删除example、src等文件夹）
（2）引入及初始化：需要引入css、js文件
①引入[以下是经验频道的引入源码]
|
1
2
3
|
<link href="/RichTextEditor/themes/default/ueditor.css"rel="stylesheet"type="text/css"/> <script type="text/javascript" src="/RichTextEditor/editor_config.js?ver=$revxxx"> </script><script type="text/javascript" src="/RichTextEditor/editor_all.js?ver=$revxxx"></script> |
至于其他所需的图片，flash等资源文件，程序会自动处理，所以不建议更改源文件的组织结构
②初始化
|
1
2
|
<script type="text/plain"id="editor"style="width:504px"name="content">//还可以用textarea作为初始容器 ${exp.content} </script> |
说明：将初始值放在script标签内，记住，要设置script的 type属性设为"text/plain" ，name属性设为字段名称
另外，这里只建议使用script标签或textarea标签，其他的也可以，但是可能会有引起其他问题，不推荐
③配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type="text/javascript"> var editor = new baidu.editor.ui.Editor({ toolbars:[['bold', 'italic','underline','|','forecolor','|','insertunorderedlist','insertorderedlist']], elementPathEnabled:false, minFrameHeight:170, pasteFilter : true, clearFontSize : true, clearFontFamily : true, removeClass : true, pasteplain : true, serialize:{ blackList:{style:1, link:1,object:1, applet:1, input:1,meta:1, base:1, button:1, select:1,, 'map':1, 'area':1,"img":1,"script":1} } }); editor.render("editor");//参数为容器标签的id </script> |
注意：尽量保证实例变量（editor）为全局变量
（3）配置说明：
上一步(2-3)的配置字段，全部来源于editor_all.js文件，但是不建议直接在editor_all.js里改，应该在初始化时配置
需要强调的几条：
toolbar：应该传入[嵌套]数组，每个数组为一行，"|"为分割符
textarea：为字段名称（也可以在容器的name设置）
enterTag：输入回车时，是加 P标签 还是 BR标签
（4）取值：
①直接FORM提交
只要设置了字段名称（容器的name属性或者初始化时textarea属性），就可以自动form提交
注：在使用过程中发现，若一个页面实例化了多个UEditor，只有第一个会自动表单提交[不知新版是否已优化？]，解决方法可参考后台招聘管理频道下的页面
②需要把值取出处理
安全相关
——————————————————————————————————————
由于富文本编辑器中可能有HTML标签，这样就会给页面带来样式冲突。而script标签是一定要过滤掉的
初始化时设置serialize字段可达到目的：
|
1
|
serialize:{ blackList:{style:1, link:1,object:1, applet:1, input:1,meta:1, base:1, button:1, select:1, textarea:1, '#comment':1, 'map':1, 'area':1,"img":1,"script":1} } |
即将需要过滤的字段设为"1"
