Tinymce富文本自定义行距

最新推荐文章于 2024-11-04 15:52:19 发布

＊且听风吟

最新推荐文章于 2024-11-04 15:52:19 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Vue 2.x 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/122627211

本文介绍了如何在TinyMCE富文本编辑器中自定义行距。通过在toolbar.js中添加styleselect配置项，并在init方法中重写style，可以实现行距设置。此外，还详细说明了style_formats_merge属性的作用，它决定了新样式是附加到默认样式还是进行替换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中 toolbar 是抽离出来一个单独文件配置工具栏控件的，toolbar.js：

const toolbar = [
 'styleselect fontselect fontsizeselect formatselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript',
 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table emoticons forecolor backcolor  code codesample fullscreen'
]
export default toolbar

自定义行距，首先，在 toolbar中添加styleselect配置项：
在这里插入图片描述

加入之后，工具栏看到了格式配置项：
在这里插入图片描述

在初始化init方法中重写style，添加设置：

 style_formats: [
     {
   
   
      title: "Line Height"

最低0.47元/天解锁文章

200万优质内容无限畅学