javascript - 在 CKEditor 4.5.8 中将 formaction 转换为 data-cke-pa-formaction

Question

我正在使用 CKEditor v.4.5.8，查看 htmldataprocessor插入。

我看到on*属性( onclick 、 onmouseover 等)转换为 data-cke-pa-on*用于在 CKEditor 的可编辑区域中显示的 protected 属性，这是防止脚本在编辑器上下文中执行的有用方法。

是否可以在不打开高级内容过滤(保留 config.allowedContent = true )的情况下也转换任何 formaction <button> 的属性元素，在源代码编辑器中添加到不可执行的 data-cke-pa-formaction所见即所得编辑器中的属性？这可以在 config.js 文件中完成，而不是直接编辑编译的 ckeditor.js 或 htmldataprocessor.js 吗？

我尝试将以下内容添加到 config.js:

CKEDITOR.on('instanceLoaded', function(e) {
    e.editor.dataProcessor.dataFilter.addRules( {
        elements: {
            button: function( el ) {
                if( el.attributes && el.attributes['formaction'] ){
                    el.attributes['data-cke-pa-formaction'] = el.attributes['formaction'];
                    delete el.attributes['formaction'];
                }
            }
        }
    } );

    e.editor.dataProcessor.htmlFilter.addRules( {
        elements: {
            button: function( el ) {
            }
        }
    } );
});

在源代码编辑器和 WYSIWYG 编辑器之间来回切换时，此功能非常有效，但在初始加载时，该元素仍以 <button formaction="javascript:alert(document.domain)">Click me!</button> 的形式加载。 。我尝试过使用 CKEDITOR.on 的其他事件( beforeGetData 、 getData 等)，但根据调试，似乎这些函数从未在配置脚本中调用。我应该把 addRules 放在其他地方吗？功能？

Answer 1

请尝试以下代码(需要启用 ACF):

var editor = CKEDITOR.replace( 'editor1', {
    extraAllowedContent : 'button[name,type,formaction]'
});
editor.on('pluginsLoaded', function( evt ){
    evt.editor.filter.addTransformations( [
        [
            {
             element:'button',
             left: function( el ) {
                return el.name == 'button';
             },
             right: function( el, tools ) {
                if( el.attributes && el.attributes['formaction'] ){
                    el.attributes['data-cke-pa-formaction'] = el.attributes['formaction'];

                    delete el.attributes['formaction'];
                }
             }
            }
        ]
    ]);
});

如果你例如粘贴以下 HTML:

<button name="Test Button" type="submit" formaction="/action_page2.php" />Click me!</button>

您将得到:

<button data-cke-pa-formaction="/action_page2.php" name="Test Button" type="submit">Click me!</button>

正如我在开始时所解释的，需要启用 ACF，因此如果您不熟悉它，请参阅以下链接:

• http://docs.ckeditor.com/#!/guide/dev_acf
• http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
• http://docs.ckeditor.com/#!/guide/dev_disallowed_content
• http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
• http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
• http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

<小时/>

编辑:如果您无法使用 ACF，您可以尝试 dataFilter 和 htmlFilter:

var editor = CKEDITOR.replace( 'editor1', {
        extraAllowedContent : 'button[*]{*}(*)',
        on: {
            pluginsLoaded: function( evt ) {

                evt.editor.dataProcessor.dataFilter.addRules( {
                    elements: {
                        button: function( el ) {
                            if( el.attributes && el.attributes['formaction'] ){
                                el.attributes['data-cked-pa-formaction'] = el.attributes['formaction'];
                                delete el.attributes['formaction'];
                            }

                        }
                    }
                } );

                //when you get data from editor
                evt.editor.dataProcessor.htmlFilter.addRules( {
                    elements: {
                        button: function( el ) {
                        }
                    }
                } );
            }
        }
});

注意:如果您想要永久更改，则不能使用 data-cke 属性，因为它们在获取原始 HTML 时会自动更改。对于永久更改，您应该使用例如数据cked-