qdjianghao 2015-1-8 10:23
UI之富文本编辑器-UEditor
[align=left]在做Web应用时，经常会进行富文本编辑，常用的富文本编辑器有很多，比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。[/align][align=left]在这里杰瑞教育为大家推荐百度推出的UEditor，UEditor是所见即所得的富文本编辑器，具有轻量、可定制、注重用户体验的特点。[/align][align=left]官方网址：ueditor#baidu#com/website/index#html[/align][align=left]下载地址：ueditor#baidu#com/website/download#html[/align][align=left]UEditor的使用简单步骤：[/align][align=left]1、 在使用页面正确导入UEditor的js文件[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101315qtnl2po8tr191nzt.png[/img][/align][align=left]在这里要注意，config.js文件应该在前。[/align][align=left]2、 在页面form表单中添加如下内容[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101316vxi6aaiux7x5zizw.png[/img][/align][align=left]3、 在html后编写如下js代码：官方建议直接调用工厂方法getEditor来创建剪辑器，后续如果用到编辑器时，可直接调用UE.getEditor(“myEditor”)来获取编辑器的实例对象。[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101317q613aibyip1bl513.png[/img]
[/align][align=left]下面通过一个具体的需求来说明UEditor的一些配置项和方法的具体用法。[/align][align=left]需求：在做某应用时，我们需要对合同进行保存管理。其中，合同里面的具体条款可根据实际需要进行编辑并生成模板。[/align][align=left]很显然合同条款不能是杂乱无章纯文本，需要有一定的格式，在这里我们需要使用富文本编辑器来编辑合同条款。[/align][align=left]合同条款一般就是带有样式的文本，不会含有图片、视频、附件等内容，很显然通过以上步骤添加的UEditor不符合我们的要求，这就需要我们自己定制UEditor。[/align][align=left]如何定制呢？UEditor为我们提供两种设置属性的方式。[/align][align=left]方式一：通过修改ueditor.config.js里面的配置信息；[/align][align=left]方式二：在创建UEditor的时候，传入配置项参数。[/align][align=left]至于具体的配置信息，可以查看官方文档，在这里就不一一赘述。[/align][align=left]在这里采用方式二，在创建UEditor的时候，传入配置参数的形式进行定制，代码如下：[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101318zo56bjjjrbvb7j6h.png[/img][/align][align=left]很显然定制后的UEditor更符合我们的需求。[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101318o2lksisaigl6lmie.png[/img]
[/align][align=left]在servlet中,可以直接使用通过request的getParamter方法获取UEditor中的编辑数据，参数即为UEditor中属性textarea设置的值。[/align][align=left]如何在UEditor中初始化模板数据？同样可以使用两种方式:[/align][align=left]一是在配置项中通过设置initialContent属性;[/align][align=left]二是通过调用UEditor的setContent方法。[/align][align=left]方式一：通过请求Servlet，在Servlet中调用业务方法，将保存在数据库中的合同模板信息加载后保存在request中，并通过转发到合同编辑页面，在页面中将数据取出并在初始化UEditor时赋值。[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101319tzkkhoggfebktbob.png[/img][/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101320jkkpcwaokacwjqz8.png[/img][/align][align=left]方式二：直接请求合同编辑页面，在页面中使用UEditor提供的Ajax进行加载合同模板，并通过setContent方法赋值。[/align][align=left][img]http://www.kaifaer.com/data/attachment/forum/201501/08/101321awaaavocvt6arjrj.png[/img]
[/align][align=left]这个地方要注意，一定要等到UEditor加载完毕后才能调用setConent方法，因此需要监听UEditor的ready事件。[/align]
[align=left]烟台杰瑞教育科技原创文章，转载请注明出处。查看原文请到杰瑞教育博客园（www#cnblogs#com/jerehedu ）。 源代码请到杰瑞教育百度云盘（pan#baidu#com/s/1ntHWo4L ）[/align]
[align=left][color=red][font=宋体]由于[/font][/color][color=red]URL[/color][color=red][font=宋体]不能发表，文中所有链接[/font][/color][color=red]#[/color][color=red][font=宋体]请换为[/font][/color][color=red].[/color][/align][color=red]
[/color]