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>

1
2
3
4
5
6
7
8
9
10
11
12

NPM

下载 tinymce-plugin

npm i tinymce-plugin 
1

或

yarn add tinymce-plugin -D 
1

项目中使用

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

1
2
3
4
5
6
7
8

方式2

---

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

下载 @tinymce-plugin/tp-layout

npm i @tinymce-plugin/tp-layout
1

或

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

项目中使用

 import "@tinymce-plugin/tp-layout";
 tinymce.init({
  ...
   plugins: "tpLayout"
   toolbar: "tpLayout"
  ...
 })
1
2
3
4
5
6
7

方式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'
                   }
               }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

点击查看更多

👋 Welcome !

---

欢迎来到 Tinymce-plugin

这是一个专注 提供 强大、好用、丰富 的 tinymce 富文本编辑器 插件、扩展 和 技术 的技术社区，方便 交流讨论，分享经验 。

本社区有多个不错的插件或者项目，欢迎 Star ⭐ 关注~

✨Tinymce-plugin

---

Tinymce-plugin 社区 所有稳定插件 将收录在 tinymce-plugin 和 @npkg/tinymce-plugin 中。（二者同步）

🙋‍♂️ 加入社区

---

如果你正在使用tinymce，不妨加入 Tinymce-plugin 组织，和我们一起维护发展，共同成长。可以通过以下两种方式加入：

• 直接在这个 issue 上评论，告知我们你想加入 tinymce-plugin。
• 发送邮件到 fivecc@qq.com，写明你的 GitHub ID，如 five-great。
  默认情况下，在你加入我们之后，你作为 GitHub tinymce-plugin 组织成员的信息是处于隐藏状态的。如果你希望在你的个人 GitHub 资料页上展示 tinymce-plugin 组织，你可以在 Tinymce-plugin People 处将你的信息从 private “私有”改为 public “公开”。当然，我们推荐设置为公开。

💬 交流讨论

---

• 欢迎前往 Discussions 上参与讨论或咨询问题。

• 欢迎加入 qq交流群 143085779