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 自定义工具栏配置相关推荐

  1. vue3使用jodit富文本编辑器,自定义各项配置及组件封装

    目录 常用配置 设置中文 字体设置 CDN的引用 图片上传 对编辑器中生成的元素添加默认属性 组件封装 本文使用时的版本: "vue": "^3.2.36", ...

  2. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  3. Django下富文本编辑器Ueditor的配置和使用

    1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...

  4. themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传

    项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...

  5. 富文本编辑器Ueditor实战(二)-图片上传

    本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...

  6. 百度富文本编辑器ueditor在https协议下无法正常插入动态地图

    在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...

  7. 富文本编辑器tinymce 自定义中文字号(四号,小四,五号,小五等)

    富文本编辑器tinymce 自定义中文字号(四号,小四,五号,小五等) 前因 探索 最终解决 最终效果 关键代码 前因 在写富文本编辑器转换word的过程中,因为所使用的富文本编辑器tinymce中的 ...

  8. TP5.1框架中百度富文本编辑器UEditor的使用

    在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...

  9. java集成富文本编辑器UEditor

    JAVA集成富文本编辑器UEditor 集成前说明 集成UEditor 一.UEditor下载 二.UEditor迁入项目 三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...

  10. 富文本编辑器——UEditor的使用——基础积累

    富文本编辑器--UEditor的使用--基础积累 之前在做后台管理系统时,遇到了一个富文本编辑器的功能,用于新闻内容的编辑. 话不多说,直接上效果图: 全屏的效果及对应的功能菜单如下: 上面的菜单已经 ...

最新文章

  1. unity3d中旋转
  2. 关于Mybatis查询结果的封装
  3. 【学习笔记】34、函数是Python的头等对象
  4. 阿里云移动测试平台MQC移动测试沙龙第3期【北京站】
  5. mac与windows服务器 访问和共享
  6. python函数参数的作用是_python函数参数理解
  7. 【LeetCode】4月1日打卡-Day17-括号匹配/嵌套深度
  8. java笔试题2015_去哪儿2015笔试题JAVA实现
  9. 【最短路径问题笔记】Floyd算法求多源最短路径问题
  10. 手机12306买卧铺下铺技巧_12306网购火车票怎么选上中下铺(详细代码及图解)...
  11. 苹果和亚马逊因疑似侵犯云端同步功能专利而被提起美国337调查
  12. 华为云计算HCIE学习总结-云计算主流技术
  13. 二进制反码求和java_有趣的二进制-浮点数
  14. pycharm 文件名颜色所代表的含义
  15. DOTA数据集介绍(论文A Large-scale Dataset for Object Detection in Aerial Images)
  16. CAD制图教程:CAD软件中怎么画圆弧梯段?
  17. YOLOv5桌面应用开发(上)——附源代码
  18. 【Python 跟书学习笔记】
  19. 东南大学计算机科学与工程学院收费,东南大学计算机科学与工程学院硕士研究生奖助学金评定细则...
  20. 能独步天下吗?揭开至强E5处理器的最后面纱

热门文章

  1. oeasy教您玩转vim - 52 - # 正则查找
  2. NoClassDefFoundError: ch/qos/logback/classic/spi/ThrowableProxy
  3. 西安电子科技大学超级计算机,西安电子科技大学超级计算机投入使用
  4. GB2312编码规则与代码实现
  5. 被逼无奈,沉默寡言的程序员也开始露脸拍视频了
  6. 斐波那契(黄金分割法)查找算法
  7. CentOS8使用network.service服务管理网络
  8. 开博第一天,在日本做开发的日子(生活-吃货篇)
  9. 【程序逻辑】数据时代的推断陷阱尔雅答案
  10. mysql判断是否为分区表_MySQL 分区表