如何配置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
确定是否在块元素中包含
)。默认值是换行内联元素,因此如果您输入如下的范围(如HTML): span
的内联元素( p
或 enterMode
设置指定的$ c> div
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 Documentation
- CKEDITOR.config - CKEditor 4 Documentation
这篇关于如何配置ckeditor不将内容封装在< p>块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!