使用ueditor的同学都知道,ueditor里有很多功能,很全面,但有时候我们的编辑器不需要太多的功能,比如前台评论或者留言,就不需要这么多功能了,那我们怎么去定制自己想要的工具呢?官方给出了两个方法,ueditor工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求:

1. 方法一:修改ueditorconfig.js里面的toolbars
2. 方法二:实例化编辑器的时候传入toolbars参数
第一种貌似不适合,需要改ueditor.config.js文件,有点麻烦,第二种就很好,我们且来看看第二种方法,示例如下:

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
$(function() {
//本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了,toolbars里的就是工具的图标
UE.getEditor('editor', {
toolbar: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily',
'justifyleft', 'justifyright','justifycenter', 'justifyjustify',
'strikethrough','superscript', 'subscript', 'removeformat',
'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
]
});
})
</script>

配置项里用竖线 ‘|’ 代表分割线
完整的按钮列表

toolbars: [
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]
]

备注:
我配置的时候配置key使用的是toolbar,很多博文使用的是toolbars,但是我使用toolbars不起作用,不知道是不是ueditor的版本问题。

UEditor自定义toolbar工具条的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框

    jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框 您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建.这个教程描述 ...

  2. [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan ------------------ ...

  3. chrome浏览器-Toolbar工具条不显示

    来源于<sencha touch 权威指南> ------------------------------------ 工具条按钮在chrome下不显示,不知是不支持还是代码有问题.app ...

  4. 百度编辑器UEditor配置toolbars工具条功能按钮

    两种方式: 1.代码中定义 <script id="container" name="content" type="text/plain&quo ...

  5. 为Autodesk Viewer添加自定义工具条

    如果你参加过我们近期的活动,你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器,这是一个不需要下载任何插件,基于WebGL技术的浏览器,可以支持几十种数据格式.同时viewer ...

  6. MapControl Application 添加自定义的工具条

    现在想用二次开发做一些东西,然后需要自定义的工具条,但是如何向MapControl Application 添加自定义的工具条呢,经过多次试验后,终于找到了相应的方法(左图是添加自定义的工具条之前,右 ...

  7. 学习OpenSeadragon之五(工具条toolbar与自定义按钮)

    OpenSeadragon简介:学习OpenSeadragon之一(一个显示多层图片的开源JS库) 一.工具条toolbar设置 OpenSeadragon为我们提供了现成的工具条toolBar,工具 ...

  8. DHTMLX 前端框架 建立你的一个应用程序教程(四)--添加一个工具条toolbar

    工具条例子 样本如下: 这里我们使用的是dhtmlxToolbar 组件. 添加工具栏到布局中: 1.使用attachToolbar() 方法初始化页面 添加代码到index.html中 dhtmlx ...

  9. 自定义ALV控件的工具条按钮

    *&---------------------------------------------------------------------* *& Report YTEST028 ...

随机推荐

  1. 项目管理工具- Maven

    <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3. ...

  2. pyDay10

    内容来自廖雪峰的官方网站. 1.python的赋值语句:a, b, c = x, y, z 相当于 a = x, b = y, c = z.(事实上等式右边是一个tuple) 2.获得genarato ...

  3. supervisor初试

    Supervisor (http://supervisord.org) 是一个用 Python 写的进程管理工具,可以很方便的用来启动.重启.关闭进程(不仅仅是 Python 进程).除了对单个进程的 ...

  4. 20145204 《Java程序设计》第1周学习总结

    20145204 <Java程序设计>第1周学习总结 教材学习内容总结 本周经过不断的钻研课本,及看一些老师的视频,我对Java有了一个全新的认知.是的,Java和C都是一种语言,但是Ja ...

  5. 课堂练习——Hash 20162305

    课堂练习--Hash 20162305 课堂练习要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合: ...

  6. HeyWeGo第三周项目总结

    HeyWeGo第三周项目总结 项目进展 第三周的计划是:将收集到的资料和代码,进行汇总并且分工后开始开始撰写游戏代码与测试代码. 本周我们已经开始编写了自己负责部分的代码. 按照我们的计划,本周我们完 ...

  7. stm32 Flash读写独立函数[库函数]

    一. stm32的FLASH分为 1.主存储块:用于保存具体的程序代码和用户数据,主存储块是以页为单位划分的, 一页大小为1KB.范围为从地址0x08000000开始的128KB内. 2.信息块   ...

  8. ESXi上的固态硬盘识别为非SSD

    启动ESXi的SSH服务 通过SSH远程连接ESXi主机 输入如下命令 # esxcli storage nmp device list        #列出储存清单(SSD设备的“device na ...

  9. HBase Shell相关

    1.进入hbase命令行 ./hbase shell 2.基本命令 显示hbase中的表List list 查询user表中的所有信息Scan scan 'users' 清空user表中的数据Trun ...

  10. 【日志】修改redis日志路径

    redis默认不记录log文件,需要在Redis.conf文件,找到loglevel notice,在其后的logfile "",双引号中,写redis的路径"/redi ...