tinymce 一键排版功能 tpLayout
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
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
配置项
提供 一键布局 默认参数字段 tp_layout_options 配置参数【Object类型】目前一共4个属性：
- style : 一键布局默认样式参数【Object】
- filterTags： 【Array】过滤标签，该数组中的标签，一键布局中将会被忽略（默认忽略 ‘table’,‘tbody’,‘td’,‘tr’）
- tagsStyle： 单独标签样式处理【Object】
- 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'
}
}
}
});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-07-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。