tutorial - Insertar texto en la posición del cursor en un CKEditor usando jQuery

ckeditor versiones

Question

Estoy tratando de agregar un fragmento de texto a un CKEditor existente usando jQuery. Esto debe hacerse cuando se hace clic en un enlace.

Probé esta solución, que funciona para áreas comunes de texto, pero no para 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();
      }
    })
  }
});

También hay una opción para usar: $(''#editor'').val() , pero esto agrega el texto al final o al principio y no al cursor.

Entonces, ¿hay una manera de lograr esto?

Answer 1

CKEditor en sí tiene un mecanismo para insertar texto. Si actualiza el área de textarea directamente, en efecto, está evitando algunos de los mecanismos que CKEditor tiene para realizar un seguimiento de qué texto se ha ingresado. Prueba esto:

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

Mas informacion aqui

Answer 2

Deberias usar esto

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

Answer 3

Pensé que debería mencionar que si está utilizando el adaptador jQuery para ckeditor, puede insertar texto con jQuery de esta manera, que se ve un poco más limpio.

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

o si estas insertando HTML

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