减小 TinyMCE 文本区域中的行距

Question

我正在使用 TinyMCE 提供富文本编辑文本编辑器。但行与行之间的行间距太大了。我添加了一个屏幕截图，显示了按 Enter 键时得到的行距。可以做什么

Answer 1

您可以将自定义 css 添加到 CSS 编辑器，如下所示：

tinyMCE.init({
        ...
        editor_css : "/content_css.css"
});

请参阅此处的文档： http:// www.tinymce.com/wiki.php/Configuration:editor_css

然后，您可以将 line-height 属性设置为您希望在该文件中的任何高度。

您还可以更改设置，在生成段落标记 (p) 或换行标记 (br) 之间进行切换，如下所示：

tinyMCE.init({
        ...
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '' // Needed for 3.x
});

有关详细信息，请参阅此处的文档：http://www.tinymce.com/wiki.php/Configuration:force_br_newlines

我认为 TinyMCE 当你点击时会将段落作为标准输入，这就是为什么你的线条之间有很大的余量。您还可以像在 Word 中一样使用 Shift+Enter 来换行，而不是段落。

Answer 2

有一个 css 类应用于 TinyMCE html 内容。看起来您有

标签导致了间距。老实说，它对我来说看起来不错。但您可以在 css 类中进行覆盖：

.tinymce-content p {
    padding: 0;
    margin: 2px 0;
}

请参阅 tinymce 文档 了解更多信息。

Answer 3

您可以强制 TinyMCE 输出 div 而不是段落。只需将此行放入tinyMCE.init部分：

forced_root_block : 'div',

Answer 4

我知道，
这篇文章很旧，但可能对某人有帮助。

自 3.5 起，'force_br_newlines' 和 'force_p_newlines' 已弃用。

使用 forced_root_blocks 代替：

tinyMCE.init({
        ...
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '' // Needed for 3.x
});

Answer 5

从tinyMCE 4.x 开始，您可以指定此选项

forced_root_block_attrs: { "style": "margin: 5px 0;" }

这将为每个 p 标记附加 style: margin: 5px 0; 。

PS：它不适用于复制/粘贴内容。

文档：

• https://www.tiny.cloud/docs/tinymce /6/内容过滤/#forced_root_block
• https://www.tiny.cloud/docs/tinymce /6/内容过滤/#example-using-forced_root_block_attrs

Answer 6

如果您有时希望有额外的空间，有时又不想，则保持 TinyMCE 不变。如果您希望段落之间的间距更紧密，而不是按 Enter 键转到下一行，请同时按 Enter 键和 Shift 键。

Answer 7

这是迄今为止我遇到的最好的解决方案......所以你可以使用它：

tinyMCE.init({
    style_formats : [
            {title : 'Line height 20px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '20px'}},
            {title : 'Line height 30px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '30px'}}
    ]
});

无论如何......这对我有用