CODEWITHSUNDEEP
pluginsckeditor
D.ig
D.ig

Reputation: 11

CkEditor: how to open my own plugin dialog

I'm new to CkEditor plugin development and have a simple question.

Following problem: I have a very 'special', non-consumer oriented media asset storage (stored as a tree hierarchy on the file system). The CkEditor user should find these media assets and so I implemented a plugin for this with a find that loads the tree on the left and displays the media assets on the left side. The user can now choose the tree item and choose the media asset on the left side. The plugin works, the code is generated with an img-Tag. When I double click on the new generated code, the 'image'-plugin-dialog gets loaded and not my custom dialog.

Question: What can I do to tell CkEditor to open my dialog? I suppose, there is an internal mapping from tag -> dialog and the img-Tag loads the img-Dialog. Which possibilities do I have? Do I have to use custom tags for that?

Upvotes: 0

Views: 538

Answers (2)

Atzmon
Atzmon

Reputation: 1318

The supported and easy way is to create your plugin as a widget with a dialog. You can control how CKEditor knows it's your special object and launches your dialog. You can either use an img with a special css style or create your own custom html tag (e.g. ).

Read the widget tutorial here (dialogs are explained in part 2 of this tutorial).

Upvotes: 0

D.ig
D.ig

Reputation: 11

The problem can be solved by using the 'doubleclick'-Hook, e.g. 

initDoubleClickHandler: function(editor) {
  editor.on( 'doubleclick', function(e) {
    var selection = editor.getSelection();
    var start = selection.getStartElement();
    var attribute = start.getAttribute('data-type');
    if ( attribute != undefined && attribute != null && attribute == 'myplugin' ) {
      e.data.dialog = 'myPluginDialog';
    }
  });
}

Upvotes: 1

Related Questions