How to call CKEditor 4 plugin function in-page?

Question

Lets say I have CKEditor 4.3 installed (which I do) with the jquery loader. I've loaded a plugin (lets called it 'foobar') which almost does what I want it to. There is a function within the plugin's plugin.js file which I would like to call manually in-page. For this example, lets call the function hello().

I want to call it when a particular link is clicked.

How can I reference the function within the ckeditor plugin?

Here is the plugin.js structure:

(function() {
    if (!supportsLocalStorage()) {
        CKEDITOR.plugins.add("foobar", {}); //register a dummy plugin to pass CKEditor plugin initialization process
        return;
    }

    CKEDITOR.plugins.add("foobar", {
        lang: 'de,en,jp,pl,pt-br,sv,zh,zh-cn', // %REMOVE_LINE_CORE%
        version: 0.10,
        init: function(editor) {
            CKEDITOR.document.appendStyleSheet(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('foobar') + 'css/foobar.min.css'));

            if (typeof (jQuery) === 'undefined') {
                CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() {
                    jQuery.noConflict();

                    loadPlugin(editor);
                });

            } else {
                CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('foobar') + 'js/extensions.min.js'), function() {
                    loadPlugin(editor);
                });
            }
        }
    });

    function loadPlugin(editorInstance) {
        /*
        load of random stuff that isn't important for this example..
         */
    }



    var hello = function() {
        alert('hello!');
    };
}

function hello won't be in scope to be called outside the IIFE in your example code. If you want to call it, you'd need to add it to the object you're calling CKEDITOR.plugins.add("foobar", [object]) with (or have it globally somewhere else, which is probably not a good idea). — psantiago
– psantiago, Commented Jun 26, 2014 at 14:17

oleq · Accepted Answer · 2014-06-26 14:07:45Z

0

The right definition of the plugin should be as follows:

( function() {
    // Definition of the plugin.
    CKEDITOR.plugins.add( 'foo', {
        init: function( editor ) {
            ...
        }
    } );

    // Methods and variables related to the plugin but exposed to the public.
    CKEDITOR.plugins.foo = {
        hello: function() {
            ...
        }
    };
} )();

Then simply CKEDITOR.plugins.foo.hello(). It's the most common pattern shared among CKEditor core plugins.

answered Jun 26, 2014 at 14:07

oleq

15.9k1 gold badge40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

psantiago · Accepted Answer · 2014-06-26 14:21:13Z

0

Assuming the plugin was added something like:

CKEDITOR.plugins.add('foobar',
{
    hello: function() { alert('hello'); }
});

(e.g., 'hello' is a function on the object passed to CKEDITOR.plugins.add, and not just a function in the file).

CKEDITOR.plugins.registered.foobar.hello() should work.

Edit: To call hello in your example, you'd need to attach it to the object you're passing to CKEDITOR.plugins.add. e.g.

var hello = function() {
        alert('hello!');
    };

CKEDITOR.plugins.add("foobar", {
        lang: 'de,en,jp,pl,pt-br,sv,zh,zh-cn', // %REMOVE_LINE_CORE%
        version: 0.10,
        init: function(editor) {...},
        hello: hello
        });

edited Jun 26, 2014 at 14:21

answered Jun 26, 2014 at 14:03

psantiago

7246 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to call CKEditor 4 plugin function in-page?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related