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 ...
随机推荐
- python3的一些练习题
下面是最近写的一些python3版本的一些练习题: 1.4+44+444+4444+.....+=? root@wadeson:~/study_for_python/homework# cat aa. ...
- 20145122 《Java程序设计》第4周学习总结
教材学习内容总结 第六章 1.在java中,子类只能继承一个父类. 2.在java中,继承时使用extends关键字,private成员也会被继承. 3.检查多态语法逻辑是否正确,方式是从=号右边往左 ...
- [Opencv]图像的梯度与边缘检测(转)
文章来源:https://blog.csdn.net/on2way/article/details/46851451 梯度简单来说就是求导,在图像上表现出来的就是提取图像的边缘(不管是横向的.纵向的. ...
- Codeforces Round #417 (Div. 2) B. Sagheer, the Hausmeister
http://codeforces.com/contest/812/problem/B 题意: 有n层楼,每层楼有m个房间,1表示灯开着,0表示灯关了.最两侧的是楼梯. 现在每从一个房间移动到另一个房 ...
- redis的使用及方法
一.redis (1).redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset ...
- 遗传算法 Genetic Algorithm
2017-12-17 19:12:10 一.Evolutionary Algorithm 进化算法,也被成为是演化算法(evolutionary algorithms,简称EAs),它不是一个具体的算 ...
- MySQL —— 基本查询方法
MySQL —— 简单查询与按条件查询 在MySQL中从数据表中查询数据的基本语句时select语句. select语句基本语法格式: select 查询内容 from 表名 ...
- mysql数据库的备份及免密码上传
主要利用了mysqldump和sshpass进行备份和免密上传 以下是代码实现: #!/bin/bash #该脚本放在主服务器运行 #从服务器账号密码ipremotehost="xxxxxx ...
- Rails-Treasure chest3 嵌套表单; Ransack(3900✨)用于模糊查询, ranked-model(800🌟)自订列表顺序; PaperTrail(5000✨)跟踪model's data,auditing and versioning.
自订列表顺序, gem 'ranked-model' 多步骤表单 显示资料验证错误讯息 资料筛选和搜寻, gem 'ransack' (3900✨); 软删除和版本控制 数据汇出(csv), 自订列表 ...
- 个人知识管理系统Version1.0开发记录(08)
切入点 前面,我们已经搭建好了web端的一种基本结构,需要进一步定位的主要问题有三点: 1.界面的选择和确定,用extjs做的初步样式,进一步改动为jqueryUI/html,再进一步改变为HTML5 ...