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

Question

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

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

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

Answer 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:

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

更多设置

还有三个与这个主题有些相关的设置：

• config.fillEmptyBlocks
• config.forceEnterMode
• config.ignoreEmptyParagraph

参考

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

• CKEDITOR.config - CKEditor 3 JavaScript API Documentation
• CKEDITOR.config - CKEditor 4 Documentation

Answer 2

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

config.autoParagraph = 假；

Answer 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>

Answer 4

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

1. shift+enter 换行符<br>，以及
2. 只需enter 就会产生一个新段落。

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

Answer 5

如果你想排除<p>标签并且只需要基本的编辑工具，比如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 步：完成 :)

Answer 6

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

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

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

Answer 7

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

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

相关GitHubissue