如何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设置指定的块元素( pdiv )中。 默认的是包装内联元素,所以如果你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是使用

  1. shift + enter一个换行符,和
  2. 只要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步:完成:)