Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jasonfrye's avatar

Adding a custom plugin to CKeditor

I'm trying to add a custom plugin to CKeditor. It's a shortcode plugin. I followed the tutorial on Ckeditor's site to create the plugin. I have the folder named shortcode in the plugins directory with the correct files.

I'm using Backpack for Laravel, so the config file is in /public/vendor/backpack/ckeditor/config.js In that file I use the following to call the custom plugin, which should be part of the insert group.

config.extraPlugins = 'shortcode';

However no new buttons appear on the toolbar. I've tried many different things to get this to work to no avail. Here's what my plugin file looks like.

CKEDITOR.plugins.add( 'shortcode', {
    icons: 'shortcode',
    init: function( editor ) {
        editor.addCommand( 'insertShortcode', {
            exec: function( editor ) {
                let now = new Date();
                editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
            }
        });
        editor.ui.addButton( 'Shortcode', {
            label: 'Insert Shortcode',
            command: 'insertShortcode',
            toolbar: 'insert',
            icon: this.path + 'icons/shortcode.png'
        });
    }
});

I don't get any errors in the console. Here's the full config.js file.

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config
    config.extraPlugins = 'shortcode';

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
            { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
            { name: 'links' },
            { name: 'insert' },
            { name: 'forms' },
            { name: 'tools' },
            { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
            { name: 'others' },
            '/',
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
            { name: 'styles' },
            { name: 'colors' },

    ];

    config.allowedContent = true;

    // Remove some buttons, provided by the standard plugins, which we don't
    // need to have in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Se the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Make dialogs simpler.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    // elFinder
    // config.filebrowserBrowseUrl = 'admin/elfinder/ckeditor';
};
0 likes
1 reply
wjgray's avatar

I realize this is a year + old, but did it ever get solved??

Please or to participate in this conversation.