web-dev-qa-db-ja.com

jQueryを使用して、カーソル位置のテキストをCKEditorに挿入します

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()を使用するオプションもありますが、これはテキストをカーソルではなく末尾または先頭に追加します。

それで、これを達成する方法はありますか？

jqueryckeditor
28
Phoenix

あなたはこれを使うべきです

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

CKEditor自体には、テキストを挿入するメカニズムがあります。 textareaを直接更新する場合、CKEditorが入力したテキストを追跡しなければならないメカニズムのいくつかをバイパスしていることになります。これを試して：

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

詳細はこちら

17
Rory McCrossan

CkeditorのjQueryアダプターを使用している場合は、jQueryでこのようにテキストを挿入できるので、少し見栄えがよくなることを言っておきます。

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

またはHTMLを挿入する場合

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