如何配置ckeditor不将内容封装在< p>块？ [英] How to configure ckeditor to not wrap content in <p> block?

问题描述

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

I am using ckeditor on my website to make it easier for users to input HTML.

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

However, the data I get back from ckeditor is wrapped in <p></p> blocks. (Which I don't want.)

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

Is there some configuration setting that forces the editor to not wrap the text in anything?

推荐答案

TLDR

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

config.enterMode = CKEDITOR.ENTER_BR;

示例：

...

CKEDITOR.editorConfig = function (config)
{
    config.enterMode = CKEDITOR.ENTER_BR;

    ...
};

详情

此行为基于用户按 Enter 时想要发生的情况。

Details

The configuration setting that controls this behavior is based on what you want to happen when the user presses Enter.

为了防止有新使用HTML的人阅读，我包括所涉及的概念的一些基本解释，以及当按下 Enter 键时为什么需要插入标签。

Just in case someone who's new to working with HTML reads this, I'm including some basic explanation of the concepts involved and why a tag will need to be inserted when the Enter key is pressed.

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

We know that if we enter some text into an HTML document and then put additional text on a new line, the browser won't display the text as two lines, it will ignore any carriage returns and will condense multiple spaces between characters to a single space.

以下HTML：

qwer
tyui

将呈现为

qwer tyui

qwer tyui

因此，编辑器需要插入一个HTML标记来告诉浏览器它应该显示第二组文字在新行上。

So the editor needs to insert an HTML tag to tell the browser that it should display the second group of text on a new line.

控制此项的配置设置为 config.enterMode 三个选项：

The configuration setting that controls this is config.enterMode and it offers three options:

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

The default setting creates a paragraph element each time Enter is pressed:

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

div'

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

2 - Insert 'div'

You can choose to create a div element instead of a paragraph:

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

您正在寻找）

如果您不想将文字换行，可以选择插入换行符：

3 - Insert break (the setting you're looking for)

If you prefer to not wrap the text in anything, you can choose to insert a line break tag:

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

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

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

注意：建议使用 CKEDITOR.ENTER_P 设置，因为它的语义价值和正确性。

Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.

另一个相关设置'autoParagraph'

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

Another related setting 'autoParagraph'

There is a second setting that controls a similar situation –config.autoParagraph. How it functions depends on the config.enterMode setting discussed above.

autoParagraph 确定是否在块元素中包含 span 的内联元素（ p 或 enterMode 设置指定的$ c> div ）。默认值是换行内联元素，因此如果您输入如下的范围（如HTML）：

autoParagraph determines whether inline elements such as span are wrapped in the block element (p or div) specified by the enterMode setting. The default is to wrap inline elements, so if you enter a span like this (as HTML):

<span>asdfg</span>

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

It will be wrapped in a p or div element like this:

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

或：

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

如果将此设置为 false 或如果您将 enterMode 设置为 CKEDITOR.ENTER_BR 。

The inline element won't be wrapped if you set this to false or if you set enterMode to CKEDITOR.ENTER_BR.

CKEditor文档包括有关配置的注释.autoParagraph ：

注意：更改默认值可能会导致不可预测的可用性问题。 p>

Note: Changing the default value might introduce unpredictable usability issues.

更多设置

还有另外三个设置主题：

Even more settings

There are three more settings that are somewhat related to this subject:

• config.fillEmptyBlocks


• config.forceEnterMode


• config.ignoreEmptyParagraph

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

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

A complete list of the available configuration options can be found here:

• CKEDITOR.config - CKEditor 3 JavaScript API文档


• CKEDITOR.config - CKEditor 4文档

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

这篇关于如何配置ckeditor不将内容封装在< p>块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！