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

Question

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

但是，我从ckeditor获得的数据被包裹在<p></p>块中（这不是我想要的）。

是否有一些配置设置可以使编辑器不将文本包装在任何东西中？

- Nathan Osman

Answer 1

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

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确定内联元素（如）是否被包裹在enterMode设置指定的块级元素（p或div）中。默认情况下会将内联元素包装在块级元素中，因此如果您像这样输入一个（作为HTML）：

<span>asdfg</span>

它将以以下方式被包装在p或div元素中：

它将以以下方式被包装在p或div元素中：

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

或者这样：

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

如果将此设置为false，或者将enterMode设置为CKEDITOR.ENTER_BR，则不会对内联元素进行包装。

CKEditor文档中提到了关于config.autoParagraph的注意事项:

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

更多设置

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

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

参考

可以在以下链接中找到所有可用配置选项的完整列表：

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

- codewaggle

---

谢谢你提供如此详尽的答案。 - Nathan Osman

@codewaggle 哦，我非常抱歉...是的，我注意到了并修改了我的编辑。请注意：现在答案看起来好多了，不是吗？ - shybovycha

@codewaggle 你真的需要阅读一下 Stack Overflow Markdown 的手册：http://stackoverflow.com/editing-help - shybovycha

在发送HTML电子邮件等情况下，建议使用ENTER_BR设置，因为电子邮件阅读器不一致地呈现<p>标签，因此必须使用<br>标签。否则，请尽可能使用<p>标签。 - John Washam

旧的回答，但非常有用。帮助我解决了困境！ - Woody

Answer 2

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

    config.autoParagraph = false;

（配置.自动段落=假）

- MikeBman

---

这种做法可能不被建议的原因是：“更改默认值可能会引入不可预测的可用性问题。”请参见：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph - John Magnolia

这实际上对我有所帮助，目前看起来很不错。有任何已知的“不可预测问题”吗？ =/ - grilix

在 ckeditor 文档中不推荐使用 config.enterMode = CKEDITOR.ENTER_BR;。文档链接：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph - proseosoc

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>

- ablueman

Answer 4

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

1. shift+enter 代表换行符 <br>，以及
2. enter 换行则新建段落。

优势在于不需要进行任何配置更改。此外，您两者都有。

- Xpleria

---

这就是我所期望的答案。 - Ripside

Answer 5

如果您想要排除 <p> 标签，并且只想要像加粗、斜体、上标、下标等基本编辑工具，则请按照以下步骤进行操作：

我对此非常确定，因为我连续研究了36个小时 :)

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

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

第二步：在你的文本框中添加id="editor2"和onfocus="this.value='';"，如下所示。

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

第三步：确保从文本区域中删除 class="ckeditor"。

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

第五步：完成 :)

- Rishi Rich

Answer 6

如果有人使用 ckeditor 5，不要寻找这个选项。他们已经将其移除，我花了数天时间试图解决这个问题。

很抱歉告诉你，但换行模式是万恶之源。如果可以的话，我们早就从CKEditor 4中删除它了，而且绝对不会在CKEditor 5中实现它。

相关GitHub 问题

- Shamseer Ahammed

Answer 7

对于Django-ckeditor，请在您的settings.py文件中添加以下配置：

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3

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

- Ravi Dhiman