Html 减少 TinyMCE textarea 中的行距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8463621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Decrease the line spacing in TinyMCE textarea
提问by Sachin
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 提供富文本编辑文本编辑器。但是行与行之间的行距太大了。我添加了一个屏幕截图，显示按回车键时的行间距。可以做些什么
采纳答案by danludwig
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:
有一个应用于 TinyMCE html 内容的 css 类。看起来您有<p>导致间距的标签。老实说，它在我看来还不错。但是您可以在 css 类中覆盖：
.tinymce-content p {
padding: 0;
margin: 2px 0;
}
See the tinymce docsfor more info.
有关更多信息，请参阅tinymce 文档。
回答by span
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.
然后，您可以在该文件中将 line-height 属性设置为您希望的任何高度。
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 在您按 Enter 键时会按照标准执行段落，这就是为什么您的行之间会有很大的空白。您还可以像在 Word 中一样使用 shift+enter 来获得一个新行，该行是换行符而不是段落。
回答by Terry Bullock
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',
回答by salah9
I know, This post is old, but it may help someone.
我知道，这篇文章很旧，但它可能对某人有所帮助。
'force_br_newlines' and 'force_p_newlines' are deprecated as of 3.5.
'force_br_newlines' 和 'force_p_newlines' 从 3.5 开始被弃用。
Use forced_root_blocksinstead:
tinyMCE.init({
...
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '' // Needed for 3.x
});
回答by mangatinanda
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 ptag.
这将附加style: margin: 5px 0;到每个p标签。
P.S: it will not work for copy/paste content.
PS：它不适用于复制/粘贴内容。
Refer: http://archive.tinymce.com/wiki.php/Configuration:forced_root_block_attrs
参考：http: //archive.tinymce.com/wiki.php/Configuration: forced_root_block_attrs
回答by TidharPeer
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
无论如何......这对我有用
回答by Lys
If you would like sometimes to have the extra space and sometimes not, then leave TinyMCE as is. And when you want the tighter space between paragraphs instead of pressing enter to go to the next line, press enter and shift together.
如果您有时希望有额外的空间，有时又不想，那么请保留 TinyMCE。如果您希望段落之间的间距更紧凑，而不是按 Enter 键转到下一行，请同时按 Enter 键和 shift。
