backend.js

const uccf = new function() {
    let extrasAdded = false;
    let config = null;
    let editor = null;

    this.init = function() {
        if (
            typeof CKEDITOR == "undefined" ||
            !CKEDITOR.instances.hasOwnProperty("body")
        )
            return;
        // console.log(CKEDITOR.version) // 4.9.1
        CKEDITOR.on("instanceReady", editorReady);
    };

    function editorReady(event, instance) {
        if (extrasAdded === true) return;

        config = event.editor.config;
        editor = event.editor;
        addPlugin("tweet");
        addPlugin("instagram");

        // apply it to the main editor on the page
        CKEDITOR.instances["body"].destroy();
        CKEDITOR.replace("body", config);

        extrasAdded = true;
    }

    function addPlugin(name) {
        // register the button
        CKEDITOR.plugins.addExternal(
            name,
            "/assets/plugins/" + name + "/plugin.js",
            ""
        );
        config.toolbar.push({
            name: "insert",
            items: [name]
        });
        config.extraPlugins += (config.extraPlugins ? "," : "") + name;

        // fight the html sanitizer, see: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_dtd.html
        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!
    }
}();

// in case the document is already rendered
if (document.readyState != "loading") uccf.init();
// modern browsers
else document.addEventListener("DOMContentLoaded", uccf.init);

plugin.js

CKEDITOR.plugins.add( 'tweet', {
    icons: 'tweet',
    init: function( editor ) {
        editor.addCommand( 'insertTweet', new CKEDITOR.dialogCommand( 'tweetDialog' ));
        editor.ui.addButton( 'tweet', {
            label: 'Insert tweet',
            command: 'insertTweet',
            toolbar: 'insert,0'
        });

        CKEDITOR.dialog.add( 'tweetDialog', this.path + 'dialogs/tweet.js' );
    }
});

tweet.js

CKEDITOR.dialog.add( 'tweetDialog', function( editor ) {
    return {
        title: 'Tweet Properties',
        minWidth: 400,
        minHeight: 200,

        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'ref',
                        label: 'The tweet id',
                        validate: CKEDITOR.dialog.validate.notEmpty( "The twitter id cannot be empty." )
                    }
                ]
            }
        ],

        onOk: function() {
            var dialog = this;

            var tweet = editor.document.createElement( 'tweet' );
            tweet.setAttribute( ':id', "'" + dialog.getValueOf( 'tab-basic', 'ref' ) + "'");

            editor.insertElement( tweet );
        }        
    };
});