Tinymce富文本设置行高

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Tinymce富文本设置行高相关的知识,希望对你有一定的参考价值。

参考技术A 文章借鉴:https://blog.csdn.net/weixin_44446659/article/details/108142808

官方文档:http://tinymce.ax-z.cn/more-plugins/lineheight.php

前言:项目中有这个需求,然后找到了另外的方法,记录一下

Tinymce 版本5可实现对lineheight的设置

在toolbar中添加属性 styleselect

在初始化init方法中添加:

style_formats: [

   

            title: "Line Height",

            items: [

               title: "1", block: "p", styles:  "line-height": "1.0"  ,

               title: "1.5", block: "p", styles:  "line-height": "1.5"  ,

               title: "1.75", block: "p", styles:  "line-height": "1.75"  ,

               title: "2", block: "p", styles:  "line-height": "2"  ,

               title: "3", block: "p", styles:  "line-height": "3"  ,

               title: "4", block: "p", styles:  "line-height": "4"  ,

               title: "5", block: "p", styles:  "line-height": "5"  

            ]

          

        ],

        style_formats_merge: true, //设置行高

        style_formats_autohide: true //设置行高

如图:

以上是关于Tinymce富文本设置行高的主要内容,如果未能解决你的问题,请参考以下文章

tinymce富文本编辑器

tinymce富文本编辑器

Django框架中tinymce富文本编辑器的使用

tinyMCE富文本编辑器禁用

tinymce-vue富文本编辑器(翻译)

tinymce富文本