Jump to content
Sign in to follow this  
MarcC

CKEditor Plugin Button won't show up in toolbar

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

Thank you!  ^_^ I appreciate the explanation.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...