使CKEditor忽略小部件内容

Question

aside内的HTML不可编辑，但CKEditor仍会运行内容过滤器并删除标记并显示隐藏的输入字段。

相关的HTML小部件代码如下：

<aside class="widget widget-form" contenteditable="false" data-widget-id="12" id="widget-4564" style="width: 40%; float: left;">
    // my form HTML goes here
</aside>

相关的CKEditor小部件代码如下：

template : 
    '<aside class="widget" contenteditable="false" style="width: 50%; float: left;" id="widget-'+Date.now().toString().substring(Date.now().toString().length-4)+'">\
        New Widget\
    </aside>',
allowedContent : true,
upcast: function( element ) {
    if ( element.name == 'aside' && element.hasClass( 'widget' ) )
        return true;
},

Answer 1

首先，你过度使用CKEditor了。您加载到应该在单独的编辑器中编辑或根本不编辑的部分。您需要记住CKEditor不是网站构建者，因此不应该将所有内容都加载到其中。

至于这种情况，我看到至少有两种解决方案。

使用占位符

不是将整个表单加载到该浮动容器中，而是编写一个简单的小部件，该小部件仅包含该占位符的信息。数据应如下所示：

<p>Some editable text...</p>
<div data-placeholder="formTest"></div>
<p>More editable text</p>

您可以使用小部件轻松完成此操作。然后，在您的应用程序中，将占位符替换为它所代表的含义。通过这种方式，您可以保持数据库清晰，因此也可以保持编辑器的内容。

在数据中使用占位符，但将内容加载到就绪小部件

当widget控制其状态时，您可以动态地在其中加载一段丰富的内容，但仍然具有清晰的语义内容。

因此，数据将与之前的情况类似，但是，您将使用窗口小部件init中的表单部分的预览替换它。它看起来像这样：

editor.widgets.add( 'sectionPlaceholder', {
    upcast: function( el ) {
        return el.name == 'div' && el.attributes[ 'data-placeholder' ];
    },
    init: function() {
        // Lock & unclock to prevent recording a separate snapshot for
        // loading preview step.
        editor.fire( 'lockSnapshot' );
        // Retrieve section HTML from some application's object or method.
        this.element.setHtml( sectionsHtml[ this.element.data( 'placeholder' ) ] );
        editor.fire( 'unlockSnapshot' );
    }
    ...
    // Since you're loading some forms, you may want to completely covers them.
    mask: true
 } );

总体思路

编辑器应该用于编辑原子页面片段的内容，而不是一次编辑整个页面。保存到数据库中的数据也不应混合使用。

Answer 2

基本上我解决这个问题的方法是在加载CKEditor后加载小部件的内容。

在widget插件中，我使用了init函数，如下所示：

init : function() {

    window.element = $(this.element.$);

    $.get("/_includes/_.aspx", {
            'q' : 'widget_get',
            'id' :  element.data('widget-id')
        }).always(function(data){

        element.html(data);

    });
},

在CKEditor加载后，我使用jQuery加载小部件的内容。

当我保存编辑器的内容时​​（在服务器端）我将所有小部件的内容整理出来并仅保留引用。

在非编辑加载时，我用完整的小部件替换这些引用。

在编辑加载时，我使用空<aside>标记将这些引用替换为从上面的init函数加载CKEditor后加载的小部件内容。

我的旁边标签被CKEditor识别为使用upcast的小部件。

在CKEditor之后加载Widget guts意味着小部件的显示方式与未加载CKEditor的小部件完全相同。