使用jQuery将文本插入到CKEditor的光标位置

Question

我正试图使用jQuery向现有的CKEditor添加一段文本。当链接被点击时，需要完成此操作。

我尝试了这个解决方案，它适用于常规文本区域，但不适用于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();
      }
    })
  }
});

还有一个选项是使用：$('#editor').val()，但是它会将文本追加到末尾或开头而不是当前光标位置。

那么，有没有一种方法可以实现这个功能？

- Phoenix

Answer 1

你应该使用这个。

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

- Devjosh

---

太好了！谢谢！我做了一个微小的更改：CKEDITOR.instances[$(this).attr("id")].insertText(myValue); 这样我就不需要担心ID了。 - Phoenix

CKEditor v5中已经发生了变化-请参阅如何将内容插入编辑器？ - undefined

Answer 2

CKEditor本身具有插入文本的机制。如果您直接更新textarea，则实际上绕过了CKEditor跟踪输入的一些机制。请尝试以下操作：

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

更多信息请点击这里

- Rory McCrossan

---

你是国王。 - Lior

Answer 3

我认为需要提醒的是，如果你正在使用 ckeditor 的 jQuery 适配器，可以使用以下方式通过 jQuery 插入文本，这种方式看起来更加简洁。

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

如果你需要插入HTML，则可以这样操作。

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

- byoungb

Answer 4

我需要类似的东西。我正在使用 CKEditor 3.6（由于预算限制），JQuery 和 Bootstrap。我想要一个按钮列表，当点击时将一些文本插入到 CKeditor 的正文中。我从我的数据元素创建了一个按钮列表，然后添加了一个点击事件。我的对象是一个带有数据属性的输入按钮，我读取该属性以获取要粘贴的值。

.insertText("texthere") 将为您提供将值放置在光标所在位置的操作。

$(function () {
  $(".dataelement").click(function () {
          InsertDataElement($(this).data("valtxt"));
      });
});
function InsertDataElement(valtxt) {
    CKEDITOR.instances['FullDescription'].insertText(valtxt);
}

- Jeanine Lindsay