如何configurationckeditor不包装<p>块中的内容?
我在我的网站上使用ckeditor ,以方便用户inputHTML。
但是,我从ckeditor获取的数据被封装在<p></p>
块中。 (我不想要的)
是否有一些configuration设置强制编辑器不包装任何东西的文字?
TLDR
将以下内容添加到CKEditor的config.js文件中:
config.enterMode = CKEDITOR.ENTER_BR;
例:
... CKEDITOR.editorConfig = function (config) { config.enterMode = CKEDITOR.ENTER_BR; ... };
细节
控制此行为的configuration设置基于您在用户按下Enter时要执行的操作。
为了防止有人使用HTML来读取这些内容,我将包含一些有关概念的基本说明,以及为什么在按Enter键时需要插入标签。
我们知道,如果我们在HTML文档中input一些文本,然后在新行上添加其他文本,浏览器将不会将文本显示为两行,它将忽略任何回车,并将字符间的多个空格压缩为单个空间。
以下HTML:
qwer tyui
将呈现为:
很痛苦
所以编辑器需要插入一个HTML标签来告诉浏览器它应该在新行上显示第二组文本。
控制这个的configuration设置是config.enterMode
,它提供了三个选项:
1 – 插入段落
每次按下Enter键时,默认设置会创build一个段落元素:
config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`
2 – 插入'div'
您可以select创build一个div
元素而不是段落:
config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`
3 – 插入中断(您正在寻找的设置)
如果您不想将文字换成任何东西,您可以select插入换行符标签:
config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`
CKEditor文档指出不build议使用ENTER_BR
设置 :
注意:由于语义值和正确性,build议使用
CKEDITOR.ENTER_P
设置。 编辑器针对此设置进行了优化。
另一个相关的设置“autoParagraph”
还有第二个设置可以控制类似的情况 – config.autoParagraph
。 它的function取决于上面讨论的config.enterMode
设置。
autoParagraph
决定内联元素(如span
是否被包装在由enterMode
设置指定的块元素( p
或div
)中。 默认的是包装内联元素,所以如果你input这样的跨度(如HTML):
<span>asdfg</span>
它将被包裹在ap或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
参考
可以在这里find可用configuration选项的完整列表:
- CKEDITOR.config – CKEditor 3 JavaScript API文档
- CKEDITOR.config – CKEditor 4文档
我知道我比赛有点迟,但是我认为OP的select是:
config.autoParagraph = false;
这在上面得到了很好的回答,但是如上所述,在主configuration中不应该改变这一点。
真正做到这一点的正确方法是。
即
<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>
没有任何configuration更改的一个非常简单的解决scheme是使用
-
shift
+enter
一个换行符,和 - 只要
enter
就会导致一个新的段落。
好处是你不必做任何configuration改变。 另外,你有两个。
如果你想排除<p>
标签,只想在Ckeditor中使用像Bold Italic superscript下载等基本的编辑工具,那么请按以下步骤操作:
我对此的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这样
<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">
第3步:确保从Textarea中删除Class="ckeditor"
。
步骤4:重新加载您的网页,如果没有发生删除caching/历史和重新启动PC /笔记本电脑。
第5步:完成:)