web-dev-qa-db-ja.com

ckeditorコンテンツのイベントが変更されました

可能であれば、ckeditorのコンテンツが変更された場合、どうすればよいですか？たとえば、ページを開いたときに、ckeditorのコンテンツ（別名textarea）にすでにいくつかのテキストが挿入されています。その後、さらに何かを入力するか、そのテキストの一部を削除します。テキストが変更されたときに変数を変更するために起動できるイベントはありますか？

私は通常のテキストエリアにこれを持っています：

$("input,textarea").on("input", function () {
    booleanvar= true;
});

これがあるどこかで可能な解決策を見た：

$('.ckeditor').ckeditorGet().on('key', function (e) {
    //some code
});

試してみましたが、うまくいきませんでした。そして、はい、私は私のckeditorのtextareaがクラスとして「ckeditor」を持っていることを知っているので、それが機能しない理由ではありません。

それで、ckeditorのある種のtextchangedイベントに到達するために使用できる例のようなものですか？

jqueryckeditor
13
Micael Florêncio

はい、あなたが聞くことができる非常に便利なchangeがあります。ここにドキュメント： http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

たとえば、次のように使用します（editor1をエディターインスタンスに変更します）。

CKEDITOR.instances.editor1.on('change', function() { 
    console.log("TEST");
});
32
Nenotlep

[〜＃〜] ckeditor [〜＃〜]の変更のために、それは私を大いに助けます。

<textarea id="ckeditor_textarea " name="ckeditor_textarea ">Add Yore Data</textarea>

<script type="text/javascript">
var editor = CKEDITOR.replace( 'ckeditor_textarea ', {});
// editor is object of your CKEDITOR
editor.on('change',function(){
    console.log("test");
});
</script>
5
Dave

1つのページに多数のckeditor（バージョン4）がある場合は、次のコードを使用できます。

CKEDITOR.on('instanceCreated', function(event) {
 var editor = event.editor,
 element = editor.element;
 editor.on('change', function() {
 console.log(element.getId());
 });
 });
1
Bilmelimi Bİlmemelimi

CKEditor4の単純なjQueryイベントバインディング

$.fn.onDataChange = function (func) {
    var func = func || function () { };
    CKEDITOR.instances[$(this).attr('id')].on('change', function () {
        func();
    });
}
0
PseudoNinja

これが私のようなこの投稿に出くわす他の誰かに役立つことを願っています。CKEditor5を使用している場合は、これを試すことができます。

ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
    editor.model.document.on('change:data', (evt, data) => {
        console.log(editor.getData());
    });
})
.catch(error => {
    console.error('Editor initialization error.', error);
});
0
Rohim Chou