web-dev-qa-db-fra.com

Insérer du texte à la position du curseur dans un CKEditor à l'aide de jQuery

J'essaie d'ajouter un morceau de texte à un CKEditor existant en utilisant jQuery. Cela doit être fait lorsqu'un lien est cliqué.

J'ai essayé cette solution, qui fonctionne pour les zones de texte régulières, mais pas pour 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();
      }
    })
  }
});

Il existe également une option à utiliser: $('#editor').val(), mais cela ajoute le texte à la fin ou au début et non au curseur.

Alors, existe-t-il un moyen d'y parvenir?

28
Phoenix

Vous devez utiliser ceci

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

CKEditor lui-même dispose d'un mécanisme pour insérer du texte. Si vous mettez à jour le textarea directement, vous contournez en fait certains des mécanismes que CKEditor doit suivre pour savoir quel texte a été entré. Essaye ça:

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

Plus d'informations ici

17
Rory McCrossan

J'ai pensé que je devrais mentionner que si vous utilisez l'adaptateur jQuery pour ckeditor, vous pouvez insérer du texte avec jQuery de cette façon, qui semble un peu plus propre.

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

ou si vous insérez du HTML

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