tinymce 一键排版功能 tpLayout

tinymce 一键 布局功能 tpLayout

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

快速上手

方式1

---

使用 tinymce-plugin 库

CDN

代码语言：javascript复制

<script src="https://unpkg.com/tinymce-plugin/plugins/tpLayout/plugin.min.js"></script><!--引入-->

<!-- 使用 -->
<script>
   tinymce.init({
  ...
   plugins: "tpLayout"
   toolbar: "tpLayout"
  ...
 })
</script>

NPM

下载 tinymce-plugin

代码语言：javascript复制

npm i tinymce-plugin 

或

代码语言：javascript复制

yarn add tinymce-plugin -D 

项目中使用

代码语言：javascript复制

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

方式2

---

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

下载 @tinymce-plugin/tp-layout

代码语言：javascript复制

npm i @tinymce-plugin/tp-layout

或

代码语言：javascript复制

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

项目中使用

代码语言：javascript复制

 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

代码语言：javascript复制

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'
                   }
               }
    }
});

点击查看更多

cdn 编程算法

0 人点赞