UEditor的使用

UEditor 是目前项目正在使用的富文本编辑器。

基本知识

————————————————————————————————————

1.依赖：不依赖任何第三方库，可单独使用

2.使用：

（1）文件管理：为简化管理开发，建议将UEditor单独放在一个文件夹内，不建议重新组织文件结构（可删除example、src等文件夹）

（2）引入及初始化：需要引入css、js文件

 

①引入[以下是经验频道的引入源码]

< 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等资源文件，程序会自动处理，所以不建议更改源文件的组织结构

 

②初始化

< script  type = "text/plain" id = "editor" style = "width:504px" name = "content" >//还可以用textarea作为初始容器    ${exp.content}
</ script >

     说明：将初始值放在script标签内，记住，要设置script的 type属性设为"text/plain" ，name属性设为字段名称

     另外，这里只建议使用script标签或textarea标签，其他的也可以，但是可能会有引起其他问题，不推荐

 

③配置

< 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，只有第一个会自动表单提交[不知新版是否已优化？]，解决方法可参考后台招聘管理频道下的页面

②需要把值取出处理

editor.getContent();//已进行了编码处理

 

 

安全相关

——————————————————————————————————————

由于富文本编辑器中可能有HTML标签，这样就会给页面带来样式冲突。而script标签是一定要过滤掉的

初始化时设置serialize字段可达到目的：

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"