5

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.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
user2183282
  • 133
  • 2
  • 7
  • Are you sure that editor has a selection when you were calling `insertHtml`? I'm sure that both methods `insertText` and `insertHtml` work when are used correctly. Check this sample: http://ckeditor.com/latest/samples/api.html - "insert HTML" buttton WFM. – Reinmar May 30 '13 at 10:48

1 Answers1

0

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>';
});
hellork
  • 420
  • 2
  • 5