Widgets and Richcombo?

Hey,

i'm trying to achieve the following with a custom plugin:

A richbox inserted into the toolbar lists a few available modules, coming from a cms. On select of one option from the Richcombo box, a widget should be inserted into the document having some special module calls as content.

By now, i got my plugin to insert the specific widget on choose of one option from the richcombo. My problem now is to load a specific dialog BEFORE.

Here's what i have:

plugin.js:

...

// register the dialog
CKEDITOR.dialog.add('module_settings', 'path/to/dialog.js');

editor.ui.addRichcombo( 'Modules', {
    label: 'Insert Module',
    onClick: function(value) {
 
        editor.widgets.add('module_1', {
            template: '<div class="cms_module">....</div>',
            dialog: 'module_settings',
            upcast: function(element) {
                return ement.name == 'div' && element.hasClass('cms_module');
             }
        });

    }

...

Now, when i select one option from the richcombo, nothing happens - not a widget is inserted, no dialog opens.

I tried simply upcasting of an element then just after registering the widget:

editor.insertHtml('<div class="cms_module">...</div>');

With that after selecting a richcombo item, a widget appears in the editor and on dbl click it opens the dialog to modify its settings. So i'm pretty sure i didn't make mistakes at all. :P

So how do i achieve the button-to-dialog-to-widget effect, but with a richcombo instead of a button?

Thanks for your help!

Greetings from germany
Chris

Mon, 10/20/2014 - 23:58

elimantara

Joined: 10/10/2014

Posts: 4

Hi,

How did you get your plugin to insert a widget when one of the richcombo options is clicked?
I did something like this inside the addRichCombo():

onClick: function(value) {
editor.widgets.add( 'simplebox', {
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content...</p></div>' +
'</div>',
},

But it didn't work. Could you help me out?

Tue, 10/21/2014 - 09:14

chris.ribal

Joined: 14/02/2014

Posts: 3

Hey elimantara,

the solution is very simple. Each time you register a new widget with editor.widgets.add('WIDGET_NAME', {...}), a new command is registered named by your widget name. Then, all you have to do is call this command from wherever you want to insert the widget. Here's my solution (simplified):

CKEDITOR.plugins.add('module', {
    init: function( editor ) {
    
        // register the widget
        editor.widgets.add('my_widget', {
            template: '<div class="widget">Text here</div>',
            upcast: function( element ) { ... },
            init: function() { ... }
        });

        editor.ui.addRichCombo('MyWidgets',
        {
            label: 'My Widgets',
            title: 'My Widgets',
            values: [ ... ],
            onClick: function( value ) {
                
                 // call the widget's command registered in plugin's init function
                 editor.execCommand( 'my_widget' );

            }
        });

    }
});

Hope that helps?

Greetings from germany