Question

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

我看到on*属性（onclick，onmouseover等）被转换为data-cke-pa-on*受保护的属性，以便在CKEditor中显示可编辑区域，这是防止脚本在编辑器上下文中执行的有用方法。

是否可以在不启用高级内容过滤（离开config.allowedContent = true）的情况下，还可以转换formaction元素的所有<button>属性。源编辑器，在WYSIWYG编辑器中的非可执行data-cke-pa-formaction属性？这可以在config.js文件中完成，而不是直接编辑已编译的ckeditor.js或htmldataprocessor.js吗？

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

＆＃13;

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 ) {
            }
        }
    } );
});

＆＃13;

在源编辑器和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需要启用，因此如果您不熟悉它，请参阅以下链接：

编辑：如果您无法使用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时会自动更改。对于永久性更改，您应使用例如data-cked-

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

1 个答案: