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

发布于 2024-08-16 17:39:58 字数 544 浏览 9 评论 0原文

我将 BBCode 插件与 TinyMCE 结合使用，发现预览和 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 : ''
});

我缺少什么？

原文

I'm using the BBCode plugin with TinyMCE and see that line breaks are not showing the same between the preview and the HTML code.

I have the following lines in the editor window:

This is line one

This is line three

Line two is empty. When I'm viewing this in HTML I get the following.

This is line one
This is line three

Without the extra empty line.

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

What am I missing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老娘不死你永远是小三 2024-08-23 17:39:58

我已经使用 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;}

I have tested it on my test page with Firefox 3.5.7 and 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
});

The space between the paragraphs can be removed using a simple CSS ("bbcode.css") like this:

p {margin:0; padding: 0;}

回复收藏 0 原文

怎言笑 2024-08-23 17:39:58

您可能需要使用nl2br()函数 输出 HTML 代码：

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

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

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

回复收藏 0 原文

我的痛♀有谁懂 2024-08-23 17:39:58

仅供参考 - 尽管围绕它的政治戏剧是使用

标签而不是使用标签是“正确的做法”，但问题是我的想法是，我在电子邮件中发送内容 - 在电子邮件中，我无法控制

标签上的 CSS（除非我想向每个标签添加内联 CSS）。因此，

标签为最终用户添加了看似双倍行距的内容。我在网站上添加了 CSS 来消除间距，并且内容看起来不错。

因此，在使用标签之后，然后使用

转到“正确的方式”，我将返回使用 ;再次标记...

回复收藏 0 原文

╭ゆ眷念 2024-08-23 17:39:58

这是执行此操作的另一种方法。只需更改 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;             
            }                
        });

Here's another way of doing this. Just change the behaviour of Enter and Shift+Enter Keys.

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

回复收藏 0 原文

白昼 2024-08-23 17:39:58

从 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
});

From TinyMCE configuration you can choose the beavhior of newlines

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

TinyMCE will force BR elements on newlines instead of inserting paragraphs

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

回复收藏 0 原文

浅暮の光 2024-08-23 17:39:58

尝试添加配置对象

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

try adding in the config object

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

回复收藏 0 原文

软糯酥胸 2024-08-23 17:39:58

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

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

I have the same problem. This is a solution for bbcode plugin:

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

回复收藏 0 原文

笔落惊风雨 2024-08-23 17:39:58

使用 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

with TinyMCE 4 i have the same problem but for me working this config

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

回复收藏 0 原文

~没有更多了~