如何在Vue TinyMCE编辑器中减小行高

上图为编辑器的显示效果，行高看起来是双倍的。请问如何在该Vue编辑器中减小行高？

以下是我正在使用的配置：

tinyMyceConfig: {
        skin: "bootstrap",
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: "h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link image media | " +
            "undo redo| alignleft aligncenter alignright alignjustify | removeformat help",
        menubar: false,
        height: 600,
        setup: (editor) => {
          // Apply the focus effect
          editor.on("init", () => {
            editor.getContainer().style.transition =
                "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
          });
          editor.on("focus", () => {
            (editor.getContainer().style.boxShadow = "0 0 0 .2rem rgba(0, 123, 255, .25)"),
                (editor.getContainer().style.borderColor = "#80bdff");
          });
          editor.on("blur", () => {
            (editor.getContainer().style.boxShadow = ""),
                (editor.getContainer().style.borderColor = "");
          });
        },
      }

解决方法 #

有几种简单方式可以调整TinyMCE编辑器的行高：

1. 用content_style直接内联样式（最便捷）

在配置对象中新增content_style属性，直接指定内容区域的行高：

tinyMyceConfig: {
        // 保留原有配置...
        content_style: 'body { line-height: 1.2; }', // 按需调整行高值，比如1.2、1.4等
        setup: (editor) => {
          // 原有setup代码不变...
        },
      }

这个方法直接作用于编辑器内容区域（iframe内的body），无需额外CSS文件。

2. 通过content_css引入自定义样式文件（适合复杂样式场景）

如果需要管理更多自定义样式，可创建tinymce-custom.css文件：

body {
  line-height: 1.2;
  /* 可添加其他样式，比如字体、段落间距等 */
}

然后在配置中引入该文件：

tinyMyceConfig: {
        // 保留原有配置...
        content_css: '/path/to/tinymce-custom.css', // 替换为你的文件实际路径
        setup: (editor) => {
          // 原有setup代码不变...
        },
      }

3. 在setup的init事件中动态设置样式

如果需要在编辑器初始化时动态调整行高，可在现有init回调中添加代码：

setup: (editor) => {
  editor.on("init", () => {
    editor.getContainer().style.transition =
        "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
    // 新增这行设置行高
    editor.getContentAreaContainer().querySelector('iframe').contentDocument.body.style.lineHeight = '1.2';
  });
  // 原有focus、blur事件代码不变...
},

注意事项 #

• 行高值可按需调整：1.2是紧凑行高，1.5是适中的阅读行高，默认通常为1.6或更高。
• 若使用bootstrap皮肤，可能会继承默认样式，自定义样式会覆盖这些默认值。

内容的提问来源于stack exchange，提问作者asega