如何使用 ueditor 富文本编辑器?
李小翔
2015-08-08 11:31

内容列表

供稿人：许庆洋
UEditor 是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。相对与老牌的 ckeditor，相对更适合于中国人的使用习惯，中文文档也更完善。
BroToolkit 中集成了 ueditor 插件，默认是被禁用的，可修改工程的 BuildConfig.groovy，将其启用：注释掉 bropen.removed.plugins 中的 ueditor 即可。
在gsp页面中使用下面的标签嵌入编辑器：
<%-- 定义资源和config，一个页面引用一次即可 --%>
<ueditor:resources userSpace=”${ session.username} ” />
<ueditor:config var=”toolbars” value=”mini” />
<%-- 渲染编辑器(id)和textarea(name) --%>
<ueditor:editor id=”zhengwen” name=”zhengwen” style=”width:100%;height:360px;”>${ bean.zhengwen} </ueditor:editor>
这里 toolbars 配置为 mini，说明使用名为 mini 的工具栏，工具栏配置在 ueditor 插件的 i18n messages.properties 中：
ueditor.toolbar.mini=fullscreen source | undo redo | bold italic underline fontborder strikethrough superscript subscript blockquote pasteplain | forecolor backcolor insertorderedlist insertunorderedlist
此外，插件中还预置了 compact、default、full 等工具栏，需要的话可以在工程的 i18n 中自定义。
ueditor 的所有前端配置都可以在插件的 ueditor.config.js 中找到，如需自定义的话，可以在工程的 assets/javascripts 下新建 ueditor 文件夹，然后在 ueditor 文件夹中新建 config.js 文件，再在config中重写对应的配置即可，如下例所示：
//= require default.js
jQuery.extend( window.UEDITOR_CONFIG, { 
   // 设置字号为14px（四号字），默认是1em
    initialStyle: ’p{ font-size:14px; line-height:16px} ’
} )
注：第一行 require 指令不要删除。