Question

使用自定义CKEditor插件我试图插入自定义HTML标记，但标记一插入编辑器就会被删除。我的plugin.js文件：

CKEDITOR.plugins.add( 'tweet', {
    icons: 'tweet',
    init: function( editor ) {
        editor.addCommand( 'insertTweet', {
            allowedContent: 'tweet[:id]',
            requiredContent: 'tweet',
            exec: function( editor ) {
                console.log('inserting');  
                editor.insertHtml( '<tweet :id="\'123\'" />' );  // also tried <tweet />
                // editor.insertHtml( '[tweet :id="\'123\'" /]' ); // this works
            }
        });

        editor.ui.addButton( 'tweet', {
            label: 'Insert tweet',
            command: 'insertTweet',
            toolbar: 'insert,0'
        });
    }
});

我为Bolt CMS后端添加插件的方式：

function run() {
    var extrasAdded = false;

    if (typeof(CKEDITOR) == 'undefined') return;

    CKEDITOR.plugins.addExternal('tweet', '/assets/plugins/tweet/plugin.js', '');

    CKEDITOR.on('instanceReady', function (event, instance) {

        if (extrasAdded === true) return;

        var config = event.editor.config;

        config.toolbar.push(
            { name: 'insert', items: [ 'tweet' ] }
        );
        config.extraPlugins += (config.extraPlugins ? ',' : '') + 'tweet';
        config.extraAllowedContent = 'tweet';  // also tried 'tweet[:id]'

        CKEDITOR.instances['body'].destroy();
        CKEDITOR.replace('body', config);

        extrasAdded = true;
    });
}

if (document.readyState!='loading') run();
else document.addEventListener('DOMContentLoaded', run);

有人能够明白我的标签被拒绝的原因吗？

Answer 1

因此，事实证明，我们在plugin.js脚本中不需要allowedContent或requiredContent属性。诀窍是调整编辑器的HTML DTD rules。在我的情况下，我在instanceReady回调中引用了编辑器，并对其进行了如下修改：

// name = 'tweet'
editor.filter.allow(name + "[!*]", name, true);

CKEDITOR.dtd[name] = CKEDITOR.dtd;
CKEDITOR.dtd.$empty[name] = 1; // allow self-closing tag
CKEDITOR.dtd.$blockLimit[name] = 1;
CKEDITOR.dtd.$nonEditable[name] = 1;
CKEDITOR.dtd.$object[name] = 1;
CKEDITOR.dtd.$inline[name] = 1; // $block won't work!

您还可以看到完整的gist of it。

为什么CKEditor拒绝我的自定义标签？

1 个答案: