Ckeditor插件：insert fake element add unwilling< p>标签前后 [英] Ckeditor plugin : insert fake element add unwilling <p> tags before and after

问题描述

我是CKEditor的新手。我试图构建一个插件插入一个新的div元素，其中包含一些自定义内容。用户必须在编辑器中看到一个假的元素，它表示通过createFakeElement（）函数创建的真正生成的html内容。

这里是onOk插件：

  onOk：function（）{
 
 var dialog = this，
 data = {}，
 container = editor.document.createElement（'div'）; 
 
 this.commitContent（data）; 
 container.addClass（'insert'）。setHtml（data.htmldata）; 
 
 var fakeElement = editor.createFakeElement（container，'insert'，'t_insert'，false）; 
 
 editor.insertElement（fakeElement）;问题是当我在编辑器中插入fakeElement的时候，我可以看到。在源视图中我的div包含一个
标签：
 < p& 
< div class =insert> ...< / div> 
< / p> 
  
当我第二次重新打开源代码视图时，ckeditor清理代码，这是：
 < p>& nbsp;< / p& 
< div class =insert> ...< / div> 
< p>& nbsp;< / p> 
 
当我尝试插入真正的元素（'container'变量）时，一切正常，没有
标签添加到源，这个问题似乎绑定到假元素。
 
 
 
你知道为什么这些
标签添加到在编辑器中插入伪元素时，源代码是什么？
解决方案
我不知道插件和ckeditor，可能的编辑器不允许内嵌元素包含块元素，因此段落不能在其中包含 div 。 
 
 
 P元素代表一个段落。它不能包含块级别的
元素（包括P本身）。
 
 
 
我们阻止作者使用空的P元素。用户代理应该
忽略空的P元素。
 
 
源： http://www.w3.org/TR/html401/struct/text.html#h-9.3.1  
 
I'm new to CKEditor. I'm trying to build a plugin that inserts a new div element which contains some custom content. The user have to see in the editor only a fake element that represent the true generated html content, created through createFakeElement() function.

Here is the onOk() function of the plugin :
        onOk: function () {

            var dialog = this,
                data = {},
                container = editor.document.createElement('div');

            this.commitContent(data);
            container.addClass('insert').setHtml(data.htmldata);

            var fakeElement = editor.createFakeElement(container, 'insert', 't_insert', false);

            editor.insertElement(fakeElement);
        }
The issue is that when I insert the fakeElement in the editor, I can see in the source view that my div is surrounded with a 
 tag :
<p>
    <div class="insert">...</div>
</p>
When I re-open the source view a second time, ckeditor cleans the code and then it looks like this :
<p>&nbsp;</p>
<div class="insert">...</div>
<p>&nbsp;</p>
When I try to insert the real element ('container' variable), everything is ok, there is no 
 tags added to the source, the problem seems to be tied to the fake element.

Have you any idea why these 
 tags are added to the source when a fake element is inserted in the editor ?
解决方案
I'm not sure about plugins and ckeditor, but generally browsers and probably editors then don't allow inline elements to contain block elements, hence paragraph can not have division inside. 

  
The P element represents a paragraph. It cannot contain block-level
  elements (including P itself).
  
  
We discourage authors from using empty P elements. User agents should
  ignore empty P elements.
Source: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

                        
这篇关于Ckeditor插件：insert fake element add unwilling&lt; p&gt;标签前后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！