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

【问题标题】：Why is CKEditor refusing my custom tag?为什么 CKEditor 拒绝我的自定义标签？
【发布时间】：2018-06-12 07:31:19
【问题描述】：

使用自定义 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);

聪明人能看出为什么我的标签被拒绝了吗？

【问题讨论】：

标签： plugins ckeditor bolt-cms

【解决方案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。

【讨论】：