UEditor自定义toolbar工具条
使用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工具条的更多相关文章
- 雷林鹏分享:jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框 您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建.这个教程描述 ...
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan ------------------ ...
- chrome浏览器-Toolbar工具条不显示
来源于<sencha touch 权威指南> ------------------------------------ 工具条按钮在chrome下不显示,不知是不支持还是代码有问题.app ...
- 百度编辑器UEditor配置toolbars工具条功能按钮
两种方式: 1.代码中定义 <script id="container" name="content" type="text/plain&quo ...
- 为Autodesk Viewer添加自定义工具条
如果你参加过我们近期的活动,你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器,这是一个不需要下载任何插件,基于WebGL技术的浏览器,可以支持几十种数据格式.同时viewer ...
- MapControl Application 添加自定义的工具条
现在想用二次开发做一些东西,然后需要自定义的工具条,但是如何向MapControl Application 添加自定义的工具条呢,经过多次试验后,终于找到了相应的方法(左图是添加自定义的工具条之前,右 ...
- 学习OpenSeadragon之五(工具条toolbar与自定义按钮)
OpenSeadragon简介:学习OpenSeadragon之一(一个显示多层图片的开源JS库) 一.工具条toolbar设置 OpenSeadragon为我们提供了现成的工具条toolBar,工具 ...
- DHTMLX 前端框架 建立你的一个应用程序教程(四)--添加一个工具条toolbar
工具条例子 样本如下: 这里我们使用的是dhtmlxToolbar 组件. 添加工具栏到布局中: 1.使用attachToolbar() 方法初始化页面 添加代码到index.html中 dhtmlx ...
- 自定义ALV控件的工具条按钮
*&---------------------------------------------------------------------* *& Report YTEST028 ...
随机推荐
- Java生成PDF之iTextPDF的使用
今天做财务方面相关数据的导出功能,需要导出PDF和Excel,在项目经理那里得知有一个叫iTextPDF的java框架导出PDF文件很好用,于是拿来玩儿玩儿. package com.smart.pr ...
- ZLYD团队第三周项目总结
ZLYD团队第三周项目总结 项目进展 我们的吃豆子游戏的程序由八个文件组成:Wall.java.Gold.java.Player.java.Fruit.java.Enemy.java.Ticker.j ...
- Execution Order for the ApiController
Execution Order for the ApiController Assuming the request goes into the ApiController scope, the op ...
- 论OI中最大值的选取
为什么我的Floyd会输出负数啊? 为什么我的代码写对了却全都爆零了啊? 那么很可能是你的INF取大/小了! 那么inf到底应该取什么值呢? 首先,inf应该要比一般的题目中出现的数据要大,但是又不能 ...
- LA 3938 动态最大连续和(线段树)
https://vjudge.net/problem/UVALive-3938 题意:给出一个长度为n的整数序列D,你的任务是对m个询问作出回答.对于询问(a,b),需要找到两个下标x和y,使得a≤x ...
- Command(命令)
意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作. 适用性: 抽象出待执行的动作以参数化某对象,你可用过程语言中的回调(call ...
- Spring IOC 源码简单分析 01 - BeanFactory
### 准备 ## 目标 了解 Spring IOC 的基础流程 ## 相关资源 Offical Doc:http://docs.spring.io/spring/docs/4.3.9.RELEASE ...
- nodejs使用multiparty模块实现文件上传(另附express.bodyParser()的说明)
最近师弟师妹们在用formidable做文件上传的时候会出现form.parse()不会触发的问题,在stackoverflow也没有找到答案,反而是几个答案推荐使用multiparty来代替,因为那 ...
- oracle: sql语句报ora-01461/ora-00911错误
oracle: sql语句报ora-01461/ora-00911错误 ora-00911:sql语句中可能含有特殊字符,或者sql语句中不能用";"分号结尾. sql语句报ora ...
- 蓝桥杯练习系统历届试题 带分数 dfs
问题描述 100 可以表示为带分数的形式:100 = 3 + 69258 / 714. 还可以表示为:100 = 82 + 3546 / 197. 注意特征:带分数中,数字1~9分别出现且只出现一次( ...