减少TinyMCE textarea中的行间距

Question

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

Answer 1

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

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

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

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

您还可以更改一个设置，您可以在此处切换生成段落标记（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内容。看起来你有<p>标签导致间距。老实说，它看起来对我很好。但你可以在css类中重写：

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

有关详细信息，请参阅tinymce docs。

Answer 3

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

forced_root_block : 'div',

Answer 4

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

＆＃39; force_br_newlines＆＃39;和＆＃39; force_p_newlines＆＃39;自3.5起已弃用。

改为使用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;" }

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

P.S：它不适用于复制/粘贴内容。

参考：http://archive.tinymce.com/wiki.php/Configuration:forced_root_block_attrs

Answer 6

这是我到目前为止遇到的最佳解决方案......所以你可以使用它：

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'}}
    ]
});

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

Answer 7

如果您有时希望拥有额外的空间，而有时又希望没有多余的空间，请保留TinyMCE。而且，当您希望段落之间的空间更小而不是按Enter进入下一行时，请按Enter并一起移动。