如何配置 ckeditor 不将内容包装在 块中？

Posted 2023-02-16

技术标签:

【中文标题】如何配置 ckeditor 不将内容包装在 块中？【英文标题】：How to configure ckeditor to not wrap content in block? 【发布时间】：2011-03-21 08:42:09 【问题描述】：

我在我的网站上使用ckeditor 以方便用户输入 html。

但是，我从 ckeditor 返回的数据被包装在  块中。（我不想要。）

是否有一些配置设置强制编辑器不将文本换行？

【问题讨论】：

【参考方案1】：

将以下内容添加到 CKEditor 的 config.js 文件中：

config.enterMode = CKEDITOR.ENTER_BR;

例子：

...

CKEDITOR.editorConfig = function (config)

    config.enterMode = CKEDITOR.ENTER_BR;

    ...
;

详情

控制此行为的配置设置基于您希望在用户按下 Enter 时发生的情况。

以防万一刚接触 HTML 的人读到这里，我将包含一些有关概念的基本解释，以及为什么在按下 Enter 键时需要插入标签。

我们知道，如果我们在 HTML 文档中输入一些文本，然后将其他文本放在新行上，浏览器将不会将文本显示为两行，它将忽略任何回车并在字符之间压缩多个空格到一个空格。

以下 HTML：

qwer
tyui

将呈现为：

qwer tyui

所以编辑器需要插入一个 HTML 标签来告诉浏览器它应该在新的一行显示第二组文本。

控制它的配置设置是config.enterMode，它提供了三个选项：

1 - 插入段落

默认设置在每次按下 Enter 时创建一个段落元素：

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2 - 插入'div'

您可以选择创建div 元素而不是段落：

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3 - 插入中断（您正在寻找的设置）

如果您不想将文本换行，可以选择插入换行标记：

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

The CKEditor documentation indicates that using the ENTER_BR setting is not recommended:

注意：建议使用CKEDITOR.ENTER_P 设置，因为它的语义价值和正确性。编辑器已针对此设置进行了优化。

另一个相关设置'autoParagraph'

还有第二个设置可以控制类似的情况——config.autoParagraph。它的功能取决于上面讨论的config.enterMode 设置。

autoParagraph 确定span 等内联元素是否被包裹在enterMode 设置指定的块元素（p 或div）中。默认是包装内联元素，所以如果你输入这样的跨度（作为 HTML）：

<span>asdfg</span>

它将被包裹在一个 p 或 div 元素中，如下所示：

<p><span>asdfg</span></p>

或者这个：

<div><span>asdfg</span></div>

如果将其设置为 false 或将 enterMode 设置为 CKEDITOR.ENTER_BR，则不会包装内联元素。

The CKEditor documentation includes this note about config.autoParagraph:

注意：更改默认值可能会带来不可预知的可用性问题。

参考

可在此处找到可用配置选项的完整列表：

CKEDITOR.config - CKEditor 3 javascript API Documentation CKEDITOR.config - CKEditor 4 Documentation

【讨论】：

感谢您提供如此全面的回答。不客气，这让我开始思考为什么要插入标签。乔 @shybovycha 我回滚了你的编辑。我意识到您不知道您通过编辑更改了答案的含义，所以这是不正确的：我使用  标记来格式化答案，它们不是答案的一部分并且没有出现给阅读答案的人。查看问题顶部附近显示“以下文本：”的位置，我演示的是，如果没有任何 HTML 标记来告诉浏览器显示换行符，则文本将显示在一行上。您的更改导致显示  标签，这改变了我写的内容并导致它不正确。 @codewaggle 哦，我很抱歉......是的，我确实注意到了这一点并修改了我的编辑。注意：现在答案看起来好多了，不是吗？建议在发送 HTML 电子邮件等情况下使用 ENTER_BR 设置，因为电子邮件阅读器不会始终呈现

标签，因此必须改用标签。否则，请尝试始终使用

标签。

【参考方案2】：

我知道我玩游戏有点晚了，但我认为 OP 正在寻找的选项是：

config.autoParagraph = 假；

【讨论】：

可能不建议这样做的原因：“更改默认值可能会带来不可预知的可用性问题。”见：docs.cksource.com/ckeditor_api/symbols/… 这实际上帮助了我，而且到目前为止看起来还不错。任何已知的“不可预测的问题”？ =/ config.enterMode = CKEDITOR.ENTER_BR; 不建议在 ckeditor 文档中使用：docs.cksource.com/ckeditor_api/symbols/…【参考方案3】：

上面已经很好地回答了这个问题，但是如上所述，您不应该在主配置中真正更改它。

这样做的正确方法是每个 .replace 真的。

即

    <form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
    <textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
    <textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
    <input type="submit" value="Submit">
    </form>

<script type="text/javascript">  
    CKEDITOR.replace( 'editor2',  
    enterMode: CKEDITOR.ENTER_BR, 
    on: 'instanceReady': function (evt)  evt.editor.execCommand('maximize');     ,
    );      
    </script>

【讨论】：

【参考方案4】：

无需任何配置更改的非常简单的解决方案是使用

shift

enter

 

enter

优点是您不必进行任何配置更改。另外，两者兼而有之。

【讨论】：

这就是我所希望的答案。【参考方案5】：

如果你想排除标签并且只需要基本的编辑工具，比如Ckeditor中的粗斜体上标下标等，请按照以下步骤操作：

我 100% 确定这一点，因为我连续研究了 36 小时 :)

第 1 步：在您的 PHP 网页中添加此脚本

<script type="text/javascript">  
    CKEDITOR.replace( 'editor1',  
    enterMode: CKEDITOR.ENTER_BR, 
    on: 'instanceReady': function (evt)  evt.editor.execCommand('');,
    ); 
</script>

第 2 步：像这样在文本区域中添加 id="editor2" 和 onfocus="this.value='';"

<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">

第 3 步：确保从 Textarea 中删除 Class="ckeditor"。

第 4 步：如果没有发生，请重新加载您的网页删除缓存/历史记录并重新启动 PC/笔记本电脑。

第 5 步：完成 :)

【讨论】：

【参考方案6】：

对于Django-ckeditor，将此配置添加到您的settings.py 文件中：

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

CKEDITOR_CONFIGS = 
    'default': 
        'enterMode': ENTER_BR,
    ,

【讨论】：

【参考方案7】：

如果有人带着 ckeditor 5 来到这里，请不要寻找这个选项。他们已经删除了它，我花了好几天才弄明白。

恐怕你不会喜欢它，但进入模式 BR 是根万恶之源。如果可以的话，我们早就将它从 CKEditor 4 中删除了之前，我们绝对不会在 CKEditor 5 中实现它。

如何配置 ckeditor 不将内容包装在 <p> 块中？

详情

1 - 插入段落

2 - 插入'div'

3 - 插入中断（您正在寻找的设置）

另一个相关设置'autoParagraph'

更多设置

参考