UEditor动态设置工具栏

原创 2016年06月01日 21:38:28

UEditor是百度开发的开源富文本编辑器,可以很方便的实现富含各种格式的文档的编辑。如果我们要在开发的web项目,比如java web项目中使用UEditor,需要如下代码:

UE.getEditor('editor'); 

这样就可以在jsp页面中,看到完整的UEditor的界面如下图所示。


我们可能会觉得工具栏的按钮太多了,有些在我们的项目中并不需要。于是,我们可以采用下面的方式进行工具栏的定制:

UE.getEditor('editor', {
<span style="white-space:pre">	</span>toolbars: [
<span style="white-space:pre">			</span>[
<span style="white-space:pre">	</span>        <span style="white-space:pre">		</span>'undo', //撤销
<span style="white-space:pre">	</span>        <span style="white-space:pre">		</span>'redo', //重做
<span style="white-space:pre">	</span>        <span style="white-space:pre">		</span>'bold', //加粗
<span style="white-space:pre">	</span>        <span style="white-space:pre">		</span>'indent', //首行缩进
<span style="white-space:pre">	</span>        <span style="white-space:pre">		</span>'italic', //斜体
<span style="white-space:pre">	</span>        <span style="white-space:pre">		</span>'fullscreen', //全屏
<span style="white-space:pre">	</span>    <span style="white-space:pre">		</span>]
<span style="white-space:pre">		</span>]
<span style="white-space:pre">	</span>});

这样,我们就得到了下面定制了工具栏的编辑器:


上面这两种方式都是在初始化的时候,一次性地定制工具栏。(第一种没有指定特定的按钮,默认所有按钮都需要)。可是在项目中,我们可能会需要动态地改变工具栏中显示哪些按钮。比如我们可能先浏览一篇文章,这个时候并不需要太多的工具栏按钮,而设置一个编辑按钮,当点击了该按钮之后,才显示出需要的工具栏按钮。

我在项目中就遇到了这个需求。刚开始在网上一直搜索不到答案。于是,经过我对UEditor文档的专心研究。发现可以通过一种“曲线”的方式实现这个功能。

假设jsp页面中已经有一个id为editor的编辑器,它的工具栏是显示了所有的按钮。通过下面这个函数就可以实现将按钮缩减到5个:

UE.getEditor('editor').destroy();
UE.getEditor('editor', {
	toolbars: [
			[
	        		'undo', //撤销
	        		'redo', //重做
	        		'bold', //加粗
	        		'indent', //首行缩进
	        		'italic', //斜体
	        		'fullscreen', //全屏
	    		]
		]
	});
原因就是调用了UEditor的API中的destroy()函数,它会将编辑器“销毁”掉,退回到textarea状态(这个编辑器其实就是通过textarea加上javascript代码来实现的。我们可以把上面的代码封装到一个函数中,只要运行这个函数(比如点击了一个按钮来触发该函数),就可以改变编辑器显示的按钮,实现了动态控制工具栏按钮的需求。

UEditor入门(二)配置toolbars工具条

两种方式: (1)代码中自定义
  • daleiwang
  • daleiwang
  • 2014年05月04日 20:24
  • 43077

UEditor工具栏上自定义按钮、图标、事件、窗口页面

第一步:找到editor_config.js(或者ueditor.config.js)文件中的toolbars参数,增加一个“camnpr”字符串,对应着添加一个labelMap,用于鼠标移上按钮时的...
  • yiyihuazi
  • yiyihuazi
  • 2016年08月02日 16:00
  • 10777

自定义Ueditor的工具按钮实现

ueditor
  • fqf_520
  • fqf_520
  • 2016年10月19日 11:33
  • 321

UEditor前端配置项说明

UEditor 的配置项分为两类:前端配置项 和 后端配置项 后端配置项具体看这个文档L:后端配置项说明 本文档介绍如何通过设置前端配置项,定制编辑器的特性,配置方法主要通过修改uedit...
  • ystyaoshengting
  • ystyaoshengting
  • 2015年06月04日 15:53
  • 39393

百度编辑器(UEditor)自定义工具栏

百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 ...
  • CoderJYF
  • CoderJYF
  • 2017年03月04日 12:12
  • 4625

UEditor对于工具条的自定义

首先,修改UEditor配置项的方法有两种: 1. 方法一:修改 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数 ...
  • Wanger_tt
  • Wanger_tt
  • 2016年08月30日 14:26
  • 5511

向ueditor中插入内容

html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式。 html页面中: js代码: //判断ueditor 编辑器是否创建成功 UE...
  • qq_25816185
  • qq_25816185
  • 2017年03月19日 16:16
  • 2525

UEditor使用技巧(2):自定义样式

改变内容框的样式 改变字体大小和颜色:内容框默认是白色背景,最近要做Web版的PS,模拟CMD命令窗口或者ISE命令窗口的背景色,分别:是黑色背景+白色字,蓝色背景+白色字 通过谷歌浏览器可以查到内容...
  • zooen2011
  • zooen2011
  • 2013年11月17日 23:10
  • 20224

UEditor动态设置工具栏

UEditor是百度开发的开源富文本编辑器,可以很方便的实现富含各种格式的文档的编辑。如果我们要在开发的web项目,比如java web项目中使用UEditor,需要如下代码: UE.getEdit...
  • dbqb007
  • dbqb007
  • 2016年06月01日 21:38
  • 1997

ueditor更改工具栏按钮,设置css样式,第二次无法正常加载的解决方法

今天项目上要用到ueditor,我在使用中遇到了一些问题,最后解决。 下载UEditor【1.4.3 JSP版本】.下载地址:http://ueditor.baidu.com/website/down...
  • gxt521521
  • gxt521521
  • 2017年05月19日 13:47
  • 573
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UEditor动态设置工具栏
举报原因:
原因补充:

(最多只允许输入30个字)