Insert text at the cursor position to a CKEditor using jQuery

Question

I'm trying to add a piece of text to an existing CKEditor using jQuery. This needs to be done when a link is clicked.

I tried this solution, which works for regular textareas, but not for CKEditor:

jQuery.fn.extend({
  insertAtCaret: function(myValue) {
    return this.each(function(i) {
      if (document.selection) {
        //For browsers like Internet Explorer
        this.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
        this.focus();
      } else if (this.selectionStart || this.selectionStart == '0') {
        //For browsers like Firefox and Webkit based
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;
        var scrollTop = this.scrollTop;
        this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
        this.focus();
        this.selectionStart = startPos + myValue.length;
        this.selectionEnd = startPos + myValue.length;
        this.scrollTop = scrollTop;
      } else {
        this.value += myValue;
        this.focus();
      }
    })
  }
});

There is also an option to use: $('#editor').val(), but this appends the text at the end or the beginning and not at the cursor.

So, is there a way to accomplish this?

Answer 1

You should use this

$.fn.insertAtCaret = function (myValue) {
    myValue = myValue.trim();
    CKEDITOR.instances['idofeditor'].insertText(myValue);
};

Answer 2

CKEditor itself has a mechanism to insert text. If you update the textarea directly you are in effect bypassing some of the mechanisms CKEditor has to keep track of what text has been entered. Try this:

CKEDITOR.instances.IDofEditor.insertText('some text here');

More information here

Answer 3

I thought I should mention that if you are using the jQuery adapter for ckeditor you can insert text with jQuery this way which looks a little cleaner.

$('textarea#id_body').ckeditor().editor.insertText('some text here');

or if you are inserting HTML

$('textarea#id_body').ckeditor().editor.insertHtml('<a href="#">text</a>');