减少TinyMCE textarea中的行间距

I am using TinyMCE to provide a rich text editing text editor. But the line spacing between the lines is too much. I have added a screenshot that shows the line spacing I get on pressing an enter. What can be done about it 减少TinyMCE textarea中的行间距

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

6 个解决方案

#1

There is a css class that is applied to the TinyMCE html content. It looks like you have <p> tags causing the spacing. Honestly, it looks pretty good to me. But you can override in the css class:

有一个css类适用于TinyMCE html内容。看起来你有

标签导致间距。老实说,它看起来对我很好。但是你可以在css类中重写:

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

See the tinymce docs for more info.

有关更多信息,请参阅tinymce文档。

#2

You can add custom css to your CSS-editor like this:

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

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

See docs here: http://www.tinymce.com/wiki.php/Configuration:editor_css

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

You can then set a line-height property to whatever height you wish in that file.

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

You can also change a setting where you can switch between generating paragraph tags (p) or linebreak tags (br) with something like this:

您还可以更改一个设置,您可以在此处切换生成段落标记(p)或换行符标记(br),如下所示:

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

See the docs here for more info: http://www.tinymce.com/wiki.php/Configuration:force_br_newlines

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

I think TinyMCE does paragraphs as standard when you hit enter, that is why you get a big margin between your lines. You can also use shift+enter like in Word to get a new line that is a line break instead of paragraph.

我认为当你点击输入时,TinyMCE会将段落作为标准,这就是为什么你的行之间会有很大的差距。您也可以在Word中使用shift + enter来获取换行符而不是段落的新行。

#3

You can force TinyMCE to output divs instead of paragraphs. Just put this line in your tinyMCE.init section:

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

forced_root_block : 'div',

#4

From tinyMCE 4.x you can specify this option

从tinyMCE 4.x中,您可以指定此选项

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

forced_root_block_attrs:{“style”:“margin:5px 0;” }

this will append style: margin: 5px 0; for every p tag.

这会追加风格:保证金:5px 0;对于每个p标签。

P.S: it will not work for copy/paste content.

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

Refer: http://archive.tinymce.com/wiki.php/Configuration:forced_root_block_attrs

#5

I know, This post is old, but it may help someone.

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

'force_br_newlines' and 'force_p_newlines' are deprecated as of 3.5.

截至3.5,'force_br_newlines'和'force_p_newlines'已弃用。

Use forced_root_blocks instead:

请改用forced_root_blocks:

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

#6

This is the best solution I've encountered so far... so you may use it:

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

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

Anyway... that worked for me

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

#1