How can I call a plugin function without a toolbar button?

I have an external floating toolbar integrated in my cms. I insert images, videos and other pieces of static code with the InsertHTML() API of CKEditor.

Now I need to insert also video from URL, and there is the fantastic oembed plugin. How can I fire that plugin using a button in my cms without the toolbar button?

I load the plugin in my config, and I try to create this function:

function oembed() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var url = ''
var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');

// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
    // Insert HTML code.
    // !/api/CKEDITOR.editor-method-insertHtml
    editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
}
else
    alert( 'You must be in WYSIWYG mode!' );

}

The result is this:

Uncaught TypeError: Object [object Object] has no method 'embedCode'

Is there any way to create a new API like "InsertHTML" to call plugin functions without toolsbar buttons?

EDIT

Maybe I can use the createFakeElement API.

!/api/CKEDITOR.editor-method-createFakeElement

I add the class fakegallery to my doc.

I use this code but nothing happens:

      function Fake()
   {
      var editor = CKEDITOR.instances.editor1;
      var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
      alert( element.getOuterHtml() ); 
      editor.createFakeElement( element, 'fakegallery', 'div', false );

   }

How can I call a plugin function without a toolbar button?

I have an external floating toolbar integrated in my cms. I insert images, videos and other pieces of static code with the InsertHTML() API of CKEditor.

Now I need to insert also video from URL, and there is the fantastic oembed plugin. How can I fire that plugin using a button in my cms without the toolbar button?

I load the plugin in my config, and I try to create this function:

function oembed() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var url = 'http://www.youtube./watch?v=AQmbsmT12SE'
var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');

// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
    // Insert HTML code.
    // http://docs.ckeditor./#!/api/CKEDITOR.editor-method-insertHtml
    editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
}
else
    alert( 'You must be in WYSIWYG mode!' );

}

The result is this:

Uncaught TypeError: Object [object Object] has no method 'embedCode'

Is there any way to create a new API like "InsertHTML" to call plugin functions without toolsbar buttons?

EDIT

Maybe I can use the createFakeElement API.

http://docs.ckeditor./#!/api/CKEDITOR.editor-method-createFakeElement

I add the class fakegallery to my doc.

I use this code but nothing happens:

      function Fake()
   {
      var editor = CKEDITOR.instances.editor1;
      var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
      alert( element.getOuterHtml() ); 
      editor.createFakeElement( element, 'fakegallery', 'div', false );

   }

• javascript
• ckeditor

Share Improve this question Follow edited May 17, 2013 at 15:24 Roberto Pezzali asked May 16, 2013 at 10:48 Roberto PezzaliRoberto Pezzali 2,51422 gold badges3232 silver badges6060 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I found this post looking for the answer...

Checked out the link provided in the answers here [ http://docs.ckeditor./#!/api/CKEDITOR.editor-method-fire ], scrolled down to execCommand

This worked for me and only requires that you know the name of your plugin, so it'll always work. Obviously, you may need to change "editable" to your editor instance.

CKEDITOR.instances['editable'].execCommand('YOUR_PLUGIN_NAME_HERE');

If above fails, HACK:

This would work (first line of code below), but requires you to look at the source to find the correct #. If you have 1 custom plugin, no big deal. But if you have a dozen or more, like me, this is annoying, and could change as more plugins are added.

CKEDITOR.tools.callFunction(145,this);

Hope this helps!

Read this: http://docs.ckeditor./#!/api/CKEDITOR.editor-method-fire

editor.fire( 'MediaEmbed', data);

I think that this is the structure that your data needs to have:

var data = {title : 'Embed Media',
                 minWidth : 550,
                 minHeight : 200,
                 contents :
                       [
                          {
                             id : 'iframe',
                             expand : true,
                             elements :[{
                                id : 'embedArea',
                                type : 'textarea',
                                label : 'Paste Embed Code Here',
                                'autofocus':'autofocus',
                                setup: function(element){
                                },
                                mit: function(element){
                                }
                              }]
                          }
                       ]}

I'm not secure but this will help you on the way. Look at the Source code of the plugin to find the available mands. The mand name that i specified above is the only one that your plugin haves.

EDIT - Manual inserting

                var div = editor.document.createElement('div');
                div.setHtml("<embed src=" + url +" width=" + width +" height=" + height + ">");
                editor.insertElement(div);

You can add every attribute you like, Type?? maby? Autofocus??