富文本编辑器ueditor 自定义工具栏配置
UEditor定制工具栏图标
UEditor 工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求
配置项修改说明
修改配置项的方法: 1. 方法一:修改 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数
var ue = UE.getEditor('container');
其他配置项:配置项说明
简单列表
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
]
多行列表
toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]
工具栏按钮分割线
配置项里用竖线 '|' 代表分割线
完整的按钮列表
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', // 图表
]
]
富文本编辑器ueditor 自定义工具栏配置相关推荐
- vue3使用jodit富文本编辑器,自定义各项配置及组件封装
目录 常用配置 设置中文 字体设置 CDN的引用 图片上传 对编辑器中生成的元素添加默认属性 组件封装 本文使用时的版本: "vue": "^3.2.36", ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- Django下富文本编辑器Ueditor的配置和使用
1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...
- themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
- 富文本编辑器Ueditor实战(二)-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
- 百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
- 富文本编辑器tinymce 自定义中文字号(四号,小四,五号,小五等)
富文本编辑器tinymce 自定义中文字号(四号,小四,五号,小五等) 前因 探索 最终解决 最终效果 关键代码 前因 在写富文本编辑器转换word的过程中,因为所使用的富文本编辑器tinymce中的 ...
- TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
- java集成富文本编辑器UEditor
JAVA集成富文本编辑器UEditor 集成前说明 集成UEditor 一.UEditor下载 二.UEditor迁入项目 三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...
- 富文本编辑器——UEditor的使用——基础积累
富文本编辑器--UEditor的使用--基础积累 之前在做后台管理系统时,遇到了一个富文本编辑器的功能,用于新闻内容的编辑. 话不多说,直接上效果图: 全屏的效果及对应的功能菜单如下: 上面的菜单已经 ...
最新文章
- unity3d中旋转
- 关于Mybatis查询结果的封装
- 【学习笔记】34、函数是Python的头等对象
- 阿里云移动测试平台MQC移动测试沙龙第3期【北京站】
- mac与windows服务器 访问和共享
- python函数参数的作用是_python函数参数理解
- 【LeetCode】4月1日打卡-Day17-括号匹配/嵌套深度
- java笔试题2015_去哪儿2015笔试题JAVA实现
- 【最短路径问题笔记】Floyd算法求多源最短路径问题
- 手机12306买卧铺下铺技巧_12306网购火车票怎么选上中下铺(详细代码及图解)...
- 苹果和亚马逊因疑似侵犯云端同步功能专利而被提起美国337调查
- 华为云计算HCIE学习总结-云计算主流技术
- 二进制反码求和java_有趣的二进制-浮点数
- pycharm 文件名颜色所代表的含义
- DOTA数据集介绍(论文A Large-scale Dataset for Object Detection in Aerial Images)
- CAD制图教程:CAD软件中怎么画圆弧梯段?
- YOLOv5桌面应用开发(上)——附源代码
- 【Python 跟书学习笔记】
- 东南大学计算机科学与工程学院收费,东南大学计算机科学与工程学院硕士研究生奖助学金评定细则...
- 能独步天下吗?揭开至强E5处理器的最后面纱
热门文章
- oeasy教您玩转vim - 52 - # 正则查找
- NoClassDefFoundError: ch/qos/logback/classic/spi/ThrowableProxy
- 西安电子科技大学超级计算机,西安电子科技大学超级计算机投入使用
- GB2312编码规则与代码实现
- 被逼无奈,沉默寡言的程序员也开始露脸拍视频了
- 斐波那契(黄金分割法)查找算法
- CentOS8使用network.service服务管理网络
- 开博第一天,在日本做开发的日子(生活-吃货篇)
- 【程序逻辑】数据时代的推断陷阱尔雅答案
- mysql判断是否为分区表_MySQL 分区表