欢迎进入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上被李小翔创建

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