一般动作
登录
Wiki: BROPEN ▼: Document Index
»
Space: FAQ ▼: Document Index
»
Page: 如何使用 ueditor 富文本编辑器
搜索
zh
页面动作
导出 ▼: 以PDF格式导出 以RTF格式导出 以HTML格式导出
更多动作 ▼: 打印预览 察看源码
欢迎进入Wiki » FAQ » 如何使用 ueditor 富文本编辑器?

# 如何使用 ueditor 富文本编辑器?

在2015-08-08 11:31上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

供稿人：许庆洋

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 指令不要删除。

标签： BroToolkit
在2015-08-08 11:30上被李小翔创建

- 评论 （0）
- 附件 （0）
- 记录
- 信息

# 快速链接

- 首页
- 新闻动态
- FAQ

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号