CODEWITHSUNDEEP
javascriptckeditor
cytsunny
cytsunny

Reputation: 5030

Is there a way to add button to link plugin of CKEditor on the run?

There are ways to add function to the toolbar for CKEditor on the run. For example,

https://stackoverflow.com/a/25443349/1273587

How to add a custom button to the toolbar that calls a JavaScript function?

And there are ways to add new choice to existing link plugin of CKEditor

https://ssdtutorials.com/courses/ckeditor-internal-page-link

http://blog.xoundboy.com/?p=393

Is there a way to add button to existing link plugin on the run? I have a button to add to the link plugin that depends on user data and therefore the button must be added on the run.

Upvotes: 4

Views: 1497

Answers (2)

Krzysztof Przygoda
Krzysztof Przygoda

Reputation: 1305

I needed it to customise CKE based on the context. Also useful when drawing CDN version. Here goes an example:

// Must be called before first editor instance creation (i.e. CKEDITOR.replace() action).
function registerPlugin()
{
    // Exit if CKEDITOR not present
    if (typeof CKEDITOR == undefined) return;

    var pluginName = 'filegator'

    // Exit if plugin already registered
    if(CKEDITOR.config.extraPlugins.search(pluginName) >= 0) return;

    // (1) Append plugin in config
    CKEDITOR.config.extraPlugins += ',' + pluginName;
    // FYI: To change entire CKE default config use:
    // CKEDITOR.config = {your config here, like this found in config.js};

    // (2) Register the plugin within the editor.

    // (2a) File version
    //CKEDITOR.plugins.addExternal( 'filegator', 'ckeditor/plugins/filegator/', 'plugin.js' );

    // (2b) Inline version
    CKEDITOR.plugins.add(pluginName, {

        // Register the icons. They must match command names.
        //icons: 'openFilegator',

        // The plugin initialization logic goes inside this method.
        init: function( editor ) {

            // Define the editor command that inserts a timestamp.
            editor.addCommand( 'openFilegator', {

                // Define the function that will be fired when the command is executed.
                exec: function( editor ) {
                    var now = new Date();
                    // Insert the timestamp into the document.
                    editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
                }
            });

            // Create the toolbar button that executes the above command.
            editor.ui.addButton( 'Filegator', {
                label: 'Open Filegator',
                command: 'openFilegator',
                toolbar: 'links',
                className: 'cke-openFilegator',
                icon: '/iframes/openFilegator.png',
            });
        }
    });
}

Then somewhere, after <script src="//cdn.ckeditor.com/4.9.0/standard/ckeditor.js"></script>:

registerPlugin();
// Replace the <textarea id="editor1"> with a CKEditor instance.
CKEDITOR.replace( 'editor1' );        
CKEDITOR.replace( 'editor2' );
CKEDITOR.replace( 'editor3' );
// etc.

Upvotes: 0

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6570

I have used the internpage plugin and changed the source to support dynamically changing the list of links that appears. In the code at the link above you see they define a setup function, which is called every time the dialog is opened and the select shown:

setup : function (f) {
    this.allowOnChange = false;
    this.setValue(f.url ? f.url.url : '');
    this.allowOnChange = true;
}

All you need to do is change or refresh the list of items in the select using the available methods:

  • this.clear() - removes all items in the select
  • this.remove(index) - removes an item in the select
  • this.add(text,url) - adds an item in the select
  • this.getElement() - gets the actual select element

Note that this.items remains unchanged when using these methods so you can use that property to automatically refresh the select.

Here is a working demo: https://jsfiddle.net/ud4csxyc/

Press the red button a few times and you will see the list of items is changed.

I hope it's what you wanted.

Upvotes: 3

Related Questions