TinyMCE编辑器按回车后行间距过大问题求助

你当前的配置存在两个关键问题：

• 错误使用content_height属性：这个属性是用来设置编辑器内容区域的高度（比如400代表400px），不是用来定义CSS样式的。
• 外部CSS无法影响编辑区域内容：TinyMCE的编辑内容是在独立的iframe里，你写的.tox-*样式只能修改编辑器的UI外壳，管不到里面的文本行高和段落间距。

下面是具体的解决方法：

方法1：用content_style直接注入样式 #

修改TinyMCE初始化配置，通过content_style属性给编辑区域的内容添加样式，这个属性会直接作用于编辑器内部的iframe：

tinymce.init({
  selector: 'textarea',
  content_height: 400, // 正确设置编辑器内容区高度
  content_style: `
    body { line-height: 1.2; } /* 调整整体行高 */
    p { margin: 0 0 8px 0; } /* 控制段落之间的间距，按需修改数值 */
  `,
  contextmenu: 'copy paste',
  plugins: 'link media image table',
  toolbar: 'undo redo | bold italic underline | link media image table ',
});

方法2：用content_css引入外部样式文件 #

如果需要定义的样式较多，可以单独创建一个CSS文件，比如tinymce-content.css，然后在配置中引入：

tinymce.init({
  selector: 'textarea',
  content_height: 400,
  content_css: '/assets/css/tinymce-content.css', // 替换为你的文件实际路径
  contextmenu: 'copy paste',
  plugins: 'link media image table',
  toolbar: 'undo redo | bold italic underline | link media image table ',
});

tinymce-content.css文件内容：

body {
  line-height: 1.2;
}
p {
  margin: 0 0 8px 0;
}
/* 可按需添加其他样式，比如标题、列表的间距控制 */

可选：修改回车生成的标签 #

如果希望按下回车时生成<br>换行而非<p>段落（彻底避免段落间距），可以添加forced_root_block配置：

tinymce.init({
  // 其他配置不变
  forced_root_block: 'br',
});

注意：这种方式会改变内容的结构，建议优先通过样式控制段落间距，保持HTML结构的规范性。

内容的提问来源于stack exchange，提问作者Neil godfrey Retanan