tinymce 一键 布局功能 tpLayout

tinymce 一键布局插件 tpLayout。可以给tinymce 富文本框带来一键轻松排版文章的功能

快速上手

方式1

使用 tinymce-plugin 库

CDN

<script src="https://unpkg.com/tinymce-plugin/plugins/tpLayout/plugin.min.js"></script><!--引入--><!-- 使用 -->
<script>tinymce.init({...plugins: "tpLayout"toolbar: "tpLayout"...})
</script>

NPM

下载 tinymce-plugin

npm i tinymce-plugin

或

yarn add tinymce-plugin -D

项目中使用

 import "tinymce-plugin/plugins/tpLayout/plugin.js";tinymce.init({...plugins: "tpImportword"toolbar: "tpImportword"...})

方式2

使用单独 _@tinymce-plugin/tp-layout

下载 @tinymce-plugin/tp-layout

npm i @tinymce-plugin/tp-layout

或

yarn add @tinymce-plugin/tp-layout -D

项目中使用

 import "@tinymce-plugin/tp-layout";tinymce.init({...plugins: "tpLayout"toolbar: "tpLayout"...})

方式3

自行下载使用
这些文件可以在 unpkg 或者jsDelivr 这些 CDN 上浏览和下载,自行存放与使用

配置项

提供 一键布局 默认参数字段 tp_layout_options 配置参数【Object类型】目前一共4个属性：

  1. style : 一键布局默认样式参数【Object】
  2. filterTags： 【Array】过滤标签，该数组中的标签，一键布局中将会被忽略（默认忽略 ‘table’,‘tbody’,‘td’,‘tr’）
  3. tagsStyle： 单独标签样式处理【Object】
  4. clearStyle: 【Array】清除样式 ，一键布局后 ，数组中的样式将会清除掉。

配置优先级从低到高： style < filterTags < tagsStyle < clearStyle

tinymce.init({selector: '#tinydemo',plugins: "tpLayout",toolbar: "tpLayout",tp_layout_options: {style: {'text-align':'justify','text-indent':'2em','line-height': 1.5},filterTags：['table>*','tbody'], //'table，'tbody','td','tr' 将会忽略掉 同时 table>*，忽略table 标签 以及所有子标签clearStyle: ['text-indent'],//text-indent 将会被清除掉tagsStyle: {'table': {'line-height': 3,'text-align': 'center'},'table,tbody,tr,td': { //支持并集选择'line-height': 2},'tr>td,table>tbody': { //支持, 精准定位 通过 ' > ''line-height': 3,'text-align': 'center'}}}
});

点击查看更多

tinymce 一键排版功能 tpLayout相关推荐

  1. TinyMCE 富文本编辑器 ━━ 一键排版功能所需正则表达式整理及学习

    如果是公文发布,客户往往喜欢直接把word内容复制粘贴,这也导致大量的出错.最近客户的对格式的需求比较强烈,正好借机弄一弄.之前已经放了tinymce的插件及弹窗开发相关内容,今天进入一点关键内容~~ ...

  2. 动易html编辑器,文章内容一键排版功能——动易5.1版新特性

    内容管理一直是网站管理的核心功能,随着技术的不断进步,越来越多的好用功能在为我们管理内容提供便捷的服务.动易也在不断推动这些功能的普及,提供了诸如可视化内容编辑.图文排版.流媒体管理.WORD图片上传 ...

  3. php编辑器自动排版,phpcms v9在线编辑器增加一键排版功能

    v9使用的Ckeditor编辑器,在使用过程中有些不尽人意的地方,下面我来修改一下编辑器,改动几个地方,让Ckeditor编辑更加实用一些. 此次修改的内容有批量去除超链接.上传图片自动添加ALT参数 ...

  4. php自动排版的快捷键,PHPCMS V9教程：ckeditor编辑器添加一键排版功能

    v9使用的Ckeditor编辑器,在使用过程中有些不尽人意的地方,下面我来修改一下编辑器,改动几个地方,让Ckeditor编辑更加实用一些. 此次修改的内容有批量去除超链接.上传图片自动添加ALT参数 ...

  5. ckeditor使用教程 php,为ckeditor编辑器修改添加一键排版功能

    为ckeditor编辑器修改添加一键排版功能 使用PHPCMS V9的朋友都知道,V9内置使用ckeditor编辑器,但是默认编辑器的排版功能不是很强大,下面绿茶小编教大家修改一下编辑器,改动几个地方 ...

  6. 如何在富文本编辑器中实现自定义一键排版功能

    前言 今天写这篇文章主要是解决如何在vue中使用富文本编辑器进行新增一个自定义菜单,通过富文本上传的图片实现一键排版功能使图片默认样式居中定宽处理,文字首行缩进等功能,从源头上杜绝门户网站上显示用户编 ...

  7. django开发: 富文本编辑器TinyMCE的默认字体大小及一键排版功能

    设置TinyMCE的默认字体大小及一键排版 ckeditor没有一键排版插件,tinymce有现成的,二者基本差不多,所以选择tinymce. tinymce的默认字体太小,现有的一键排版都不涉及字体 ...

  8. fastnest怎么一键排版_富文本编辑器的一键排版功能

    在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...

  9. 富文本编辑器的一键排版功能

    在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...

最新文章

  1. “面向对象就是一个错误！”
  2. Python开发工程师必知十大机器学习库
  3. mapgis明码文件转为点线面文件_手机上word文档可以转为pdf文件吗？
  4. Linux学习之系统编程篇：对线程的基本认识
  5. C语言三剑客之《C陷阱与缺陷》一书精华提炼
  6. Python入门很难吗? 为什么越来越多的人都学Python?
  7. ng-zorro-antd引入less时错误解决记录
  8. maven项目引入新依赖问题
  9. 为什么 12306 时不时要崩那么一下？
  10. SAP R3 display Vendor list, MKVZ .
  11. 自己常用的分页SQL
  12. 最新支持android的手机型号,Andorid10支持手机型号有哪些 安卓10适配机型介绍
  13. java 获取视频时长
  14. 图形学基础|景深效果（Depth of Field/DOF）
  15. 【Vim】No write since last change
  16. zzuli：1000从今天开始入坑C语言
  17. Centos7虚拟机网卡做bond(一)
  18. 少儿编程scratch课程－海底世界
  19. Spring boot热部署的作用和原理
  20. 【音视频】JNI 引入Android项目

热门文章

  1. 线性代数中向量、矩阵深度理解（PartI）
  2. uniapp H5 公众号 复制内容 复制文本 API `setClipboardData` is not yet implemented 怎么处理？
  3. Linux教程——Linux的主要应用领域有哪些？
  4. Python Tkinter 学习成果：点歌软件music
  5. java获取当前上一周、上一月、上一年的时间
  6. 3.ABP连接多个数据库(可以是不同的数据库)
  7. 优达学城计算机科学导论 答案,优达学城《计算机科学导论》小结
  8. vue-cli从零开始实现一个仿豆瓣app（一）
  9. 什么是盒模型(Box Model)
  10. hping3工具介绍