TinyMCE 编辑器中的换行符在预览时显示额外的行，而不是在代码中答案

【问题标题】：Linebreaks in TinyMCE editor show extra line on preview, not in codeTinyMCE 编辑器中的换行符在预览时显示额外的行，而不是在代码中
【发布时间】：2010-12-30 11:20:16
【问题描述】：

我在 TinyMCE 中使用 BBCode 插件，发现预览和 HTML 代码之间的换行符显示不一样。

我在编辑器窗口中有以下几行：

This is line one

This is line three

第二行是空的。当我在 HTML 中查看此内容时，我得到以下信息。

This is line one
This is line three

没有多余的空行。

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "bbcode",
    entity_encoding : "raw",
    remove_linebreaks : false,
    force_p_newlines : false,
    force_br_newlines : true,
    forced_root_block : ''
});

我错过了什么？

【问题讨论】：

原始 HTML 输出是什么样子的，如果第 2 行有空格，你会得到相同的结果吗？
不，如果第 2 行包含空格，我会得到我想要的结果：。但我不想要一个空格 - 只是一个空行！ ;-)
我怀疑 tinymce 正在输出

但是如果两个 HTML 标记之间有空格，某些 Web 浏览器只会显示 2 个连续的换行符。因此我的测试..
..我错了。问题似乎是，当从 textarea 中提取文本（通过发布或 getContent() ）时，任何双换行符都会被网络浏览器透明地转换为单换行符。我能想到的唯一方法是破解 TinyMCE 以始终在任何换行符之前放置一个空格。
@Kordonme：你试过我的测试页了吗？

标签： tinymce bbcode rte

【解决方案1】：

我已经在 my test page 上使用 Firefox 3.5.7 和 Google Chrome 4.0.223.11 对其进行了测试。

html:

tinyMCE.init({
  theme : "advanced",
  mode : "textareas",
  plugins : "bbcode",
  content_css : "bbcode.css",
  entity_encoding : "raw",
  add_unload_trigger : false,
  remove_linebreaks : false,
  apply_source_formatting : false
});

段落之间的空格可以使用简单的 CSS ("bbcode.css") 删除，如下所示：

p {margin:0; padding: 0;}

【讨论】：

这是我想要正确的输出，而不是预览。查看示例链接并尝试我在帖子中写的内容:-)
好的，我们开始：a）打开链接“flipfish.dk/examples”，在编辑器中输入一些内容，按“提交”，得到“404 Page not found” b）打开链接“flipfish.dk/examples ”，在编辑器中输入一些内容，单击“测试”-链接我的解决方案是 b)：警报窗口显示空行。
嗨安德拉斯。只是为了清楚;我没有对您投反对票:-) 其次，您提供的解决方案不起作用。我得到一个换行符。但我正在寻找一个空行。
@andreas：我对其进行了测试并且它有效，但我认为 OP 正在询问如何在提交表单时保留空行。 TinyMCE 似乎正在那里进行某种后期处理。
@Alix Axel：让我们将主题更改为“高级”-> 点击“HTML”-按钮-> 相同的结果（空行）

【解决方案2】：

你可能需要use the nl2br() function来输出你的HTML代码：

nl2br — 插入 HTML 换行符在字符串中的所有换行符之前

或者，您可以将force_p_newlines 选项设置为true。

我已经测试过了，你是对的，但是这种行为只发生在 BBCode 插件上。我相信通过使用tinyMCE.init 中的preformatted : true 选项，您应该能够解决您的问题。

【讨论】：

不——这绝不是我所描述的问题。首先，内置的 BBCode 预览器也会发生这种情况。我确实得到了换行符。但我想要两个，因为我在编辑器中键入：。 force_p_newlines 为 true 无效。我将提供一个例子。请参阅原始帖子中的编辑。
预格式化的属性也没有影响 :( 开始认为这可能是一个错误，甚至可能是设计使然！
@Kordonme：是的，用 PHP 可靠地撤消效果是不可能的。很抱歉，我想不出别的了，我已经阅读了 TinyMCE wiki 和一些论坛帖子，但没有想到任何解决方案……也许你应该尝试在 TinyMCE 论坛上提问？
是的，我一开始就是这么想的。但是支持论坛有一个帖子，第一行是：“我们不可能为所有人免费提供支持，此论坛已关闭发帖。”
@Kordonme：这很可悲。他们应该将其更改为：“我们不可能为任何人免费提供支持，此论坛已关闭发帖。”您是否考虑过切换到 CKEditor (ckeditor.com)？

【解决方案3】：

这是另一种方法。只需更改 Enter 和 Shift+Enter 键的行为即可。

ed.onKeyPress.add(
    function (ed, evt) {
            if(evt.shiftKey && evt.keyCode == 13) {
                tinyMCE.execCommand('mceInsertContent', false, '<br><br>');
                tinymce.dom.Event.cancel(evt);
                //alert('shift enter key');
                return;
            } 
            if(evt.keyCode == 13 && !evt.shiftKey) {
                tinyMCE.execCommand('mceInsertContent', false, '<br>');
                tinymce.dom.Event.cancel(evt);
                //alert('enter key');
                return;             
            }                
        });

【讨论】：

【解决方案4】：

从 TinyMCE 配置中，您可以选择换行符的方式

http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines

TinyMCE 将在换行符上强制使用 BR 元素，而不是插入段落

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

【讨论】：

嗨！你几乎让我呆了一秒钟：remove_redundant_brs。但它没有用:(它实际上在做别的事情：wiki.moxiecode.com/index.php/TinyMCE:Configuration/…

【解决方案5】：

仅供参考——尽管围绕它的政治戏剧是使用标签而不使用 标签的“正确做法”，但对我来说问题是我正在通过电子邮件发送内容——并且在电子邮件中，我无法控制  标签上的 CSS（除非我想为每个标签添加内联 CSS）。所以 标签为最终用户添加了看起来像是双行距的东西。我在我的网站上添加了 CSS 以删除间距，并且那里的内容看起来很好。

所以在使用  标签之后，然后使用 走“正确的道路”，我将再次使用  标签...

【讨论】：

【解决方案6】：

尝试添加配置对象

valid_elements: 'br'  //and any others that you want

【讨论】：

【解决方案7】：

我也有同样的问题。这是一个bbcode插件的解决方案：

forced_root_block : false,
remove_redundant_brs : false,
valid_elements: "br",
verify_html : false,

【讨论】：

【解决方案8】：

使用 TinyMCE 4 我有同样的问题，但对我来说工作这个配置

mode: 'exact',
inline: true, 
add_unload_trigger: false, 
schema:"html5", 
invalid_elements: "span", 
extended_valid_elements : "span[!class]", 
paste_remove_styles: true,
forced_root_block : false, 
verify_html : false,
cleanup : true

【讨论】：