tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件。可以将其配置为toolbar,也可以配置成菜单项。
使用方法:
方式一:
1. 使用npm安装:
npm install tinymce-paragraphspacing
2. 使用import导入:
import 'tinymce-paragraphspacing'
3. 配置
3.1 toolbar设置方式
tinymce初始化配置:
init: {plugins: 'paragraphspacing',toolbar: 'uodo redo | paragraphspacing'
},
paragraphspacing默认的值为:'0px 3px 5px 10px 15px 20px 30px 50px',如下图:
也可以自定义设置paragraphspacing的值:
init: {plugins: 'paragraphspacing',toolbar: 'uodo redo | paragraphspacing',// 自定义设置paragraphspacing的值paragraphspacing: '0px 20px 40px'
},
效果如图:
3.2 menu菜单设置方式
init: {plugins: 'paragraphspacing',toolbar: 'uodo redo | paragraphspacing',// 自定义menumenu: {format: {title: '格式', items: 'paragraphspacing'},},// 自定义设置paragraphspacing的值paragraphspacing: '0px 20px 40px'
},
效果如图:
方式二
1. 下载插件,新建一个plugins文件夹(默认在vue框架下),将下载好的paragraphspacing插件文件放置在该文件夹下
2. vue组件中导入插件:
import '@/plugins/tinymce/paragraphspacing/index.js'
3. 配置
同方式一
github: GitHub - yog-zhang/tinymce-plugins: tinymce pluginstinymce plugins. Contribute to yog-zhang/tinymce-plugins development by creating an account on GitHub.https://github.com/yog-zhang/tinymce-plugins.git
tinymce富文本编辑器扩展插件-设置段落间距相关推荐
- 前端踩坑之TinyMCE富文本编辑器表情插件报错解决
最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器. 我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Synta ...
- TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签 通过如下设置 ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
- Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器 本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
- 基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程 基于jQuery的富文本编辑器summernote插件的使用教程 一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
- 在vue3.0项目中使用tinymce富文本编辑器
目录 一.安装 二.完整代码 三.事项说明 四.参考文档 之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
- tinymce富文本编辑器做评论区
今天分享一下tinymce富文本编辑器做评论区的全过程. 文章目录 一.介绍 1.最终效果 2.功能介绍 3.主要项目包版本介绍: 二.每个功能的实现 1.自定义toolbar的功能区 ①对应的样式以 ...
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
最新文章
- 树形dp ---- gym101655 D - Delta Quadrant 树上连通块思维换根 + 树形dp
- Android Things揭开面纱
- .net html转义字符,asp.net转义字符
- 转发:php解决高并发
- 海洋工程-专业名词-学科关键词(终极版)
- Spring的基本使用
- 世达工具编号查询_世达工具型号-名称对照表
- 新零售“最强大脑”论剑,天猫推40余项新零售赋能计划
- 双绞线的制作,T568A线序,T568B线序
- BeyondCompare4.0比较代码内容相同但显示红色问题终结方案
- 小白学python#Day5#笔耕不辍#每日一句,提高认知
- World中利用宏命令批量删除页眉和页脚(亲测好用!)
- api文档 luci_开发OpenWrt路由器上LuCI的模块
- ECUG Con 2018 早鸟票热卖中 | 大咖聚首 探索云计算下一个十年
- 最基础的jvav的集合框架组成
- Unity让物体跟随鼠标移动
- 力扣 (LeetCode)-对称二叉树,树|刷题打卡
- 建木(Jianmu)----迈出建木第一步创建项目分组
- 关闭Vue Eslint语法检查
- 读透《阿里巴巴数据中台实践》,其到底有什么高明之处?