CKEditor Plugin Button won't show up in toolbar

[MarcC]

I created the following CKEditor plugin to insert some Hanna Code, and it just does not want to show up on the editor toolbar, despite being activated in the field settings along with PWImage, etc.

/site/modules/InputFieldCKEditor/plugins/loopvideo/plugin.js:

CKEDITOR.plugins.add( 'loopvideo', {
    icons: 'loopvideo',
    init: function( editor ) {
        editor.addCommand( 'insertLoopvideo', {
            exec: function( editor ) {
                editor.insertText( '[[loopvideo id="pvLa9DPgJVc" loop="1" volume="100"]]' );
            }
        });
        editor.ui.addButton( 'Loop Video', {
            label: 'Insert Looping Video',
            command: 'insertLoopvideo',
            toolbar: 'tools'
        });
    }
});

Screenshots of the input configuration for the field "body":

Input configuration screenshot 1

Input configuration screenshot 2

I've also verified that I have icons in place for this plugin under loopvideo/icons/

Any ideas of what to check next? Or a way to troubleshoot this? I don't get any JS errors on the page where the Body field's CKEditor is running. Thanks!

[nefigah]

One problem is your specified "icons" property doesn't match the name of your toolbar button.

From this tutorial, the relevant quote is:

Additionally, as we are going to define a toolbar button, the icons property is set, including the name of the icon file (important: matching the button name, in lowercase).

Another problem is that in the toolbar config, you need to put the name of the button, not the name of the plugin.

From checking an official plugin ("Source Dialog"), I see they went with "Sourcedialog" for the button name (and thus "sourcedialog" for the icons property). So you could change your button name from "Loop Video" to "Loopvideo" and that would fix it (since your icons property would now be the lowercase version of that). Don't forget to also change the button name in the toolbar group config just in case, since I'm not sure if it's case-sensitive.

Also, after making these changes, remember that your browser will still probably have the old version cached.

[MarcC]

Thank you!   I appreciate the explanation.