Insert text at the cursor position to a CKEditor using jQuery

问题

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?

回答1:

You should use this

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

回答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

回答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>');

来源：https://stackoverflow.com/questions/10224075/insert-text-at-the-cursor-position-to-a-ckeditor-using-jquery

标签

jquery

ckeditor