How to place an html element at the cursor position in Ckeditor?

Question

I have such difficulties to succeed in placing an html element I am drag/dropping in my Ckeditor. So far, I have just been able to place it at the very end of my content with "setData". But I want to place it at the position I am in my cursor.

I mean, instead of doing this :

<p>My content with <span>spans</span>, <a>links</a>, etc.</p><span>The html I am drag/droping</span>

I want to do this :

<p>My content with <span>spans</span>, <span>The html I am drag/droping</span>, <a>links</a>, etc.</p>

Right now, my code is looking like this :

CKEDITOR.instances['myContent'].insertHtml(' <span>The html I am drag/droping</span>');

• I have tried insertText but it never worked.
• I have then tried insertHtml but it worked only in IE.

Do you have any idea of how to fix it ? That would be a great help ! Thanks.

Answer 1

Use Ckeditor 'paste' (drop) events/methods instead of native.

Inside your plugin editor.on('instanceReady'... Assuming CKEditor 4.x

Paste and drop are handled by the same event, 'paste'. Ckeditor places contents of dataValue at the cursor position in the editor.

editor.on('paste', function(e){
    // get data from e.data.dataTransfer or wherever ...
    e.data.dataValue = ' <span>The html I am drag/droping</span>';
});