减少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文档.

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;" }

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

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

文档：

• https://www.tiny.cloud/docs/tinymce/6/content-filtering/#forced_root_block
• https://www.tiny.cloud/docs/tinymce/6/content-filtering/#example-using-forced_root_block_attrs