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

Question

我在我的网站上使用 ckeditor 来让用户更轻松地输入 HTML。

但是，我从 ckeditor 返回的数据包装在

块中。 （我不想要。）

是否有一些配置设置强制编辑器不将文本包装在任何内容中？

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 />`

CKEditor 文档表明使用 ENTER_BR不建议设置：

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

另一个相关设置“autoParagraph”

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

autoParagraph 确定内联元素（例如 span）是否包装在由 指定的块元素（p 或 div）中enterMode 设置。默认情况下是包裹内联元素，因此如果您输入这样的跨度（作为 HTML）：

<span>asdfg</span>

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

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

或这样：

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

如果将其设置为 <，则内联元素将不会被包裹code>false 或者将 enterMode 设置为 CKEDITOR.ENTER_BR。

CKEditor 文档包含有关 config.autoParagraph 的注释：

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

更多设置 还有

另外三个设置与此主题有些相关：

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

参考

完整列表可用的配置选项可以在这里找到：

• CKEDITOR.config - CKEditor 3 JavaScript API 文档
• CKEDITOR.config - CKEditor 4 文档

Answer 2

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

    config.autoParagraph = false;

Answer 3

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

正确的方法是按 .replace 执行此操作。

IE

    <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 进行换行
，然后
2. 只需 enter 会产生一个新段落。

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

Answer 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='';"< /code> 在您的文本区域中，如下所示

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

步骤 3：确保从文本区域中删除 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 就是 root
一切邪恶。如果可以的话我们早就把它从 CKEditor 4 中删除了
以前我们绝对不会在 CKEditor 5 中实现它。

相关 GitHub 问题