web-dev-qa-db-ja.com

Jqueryを使用したCKEditorからのonChangeイベントの検出

私はCKEditorとjQueryを使用していますが、ユーザーがフィールドの値を変更するたびにフラグをtrueに切り替えたいと思います。これらのフィールドの1つはCKEditorインスタンスです。

「wysiwyg」クラスを持つすべてのテキストエリアはCKEditorsに変換されますが、どういうわけか$('.wysiwyg').change()イベントは検出されません。私はいくつかのグーグルをしましたが、キーワードの組み合わせは無関係な結果しかもたらさないようです（私のgoogle-fuは吸う）。

助けてくれてありがとう:)

編集：

_for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')});
    }
_

上記のコードを試しましたが、機能しません。それはCKEditorオブジェクトを見つけることを意味するエラーを私に与えませんが、何らかの理由でリスナーがそれに接続されていませんか？

また、イベントの添付ファイルをalert(CKEDITOR.instances[i].name);だけに置き換えると、テキストエリアの名前が警告されるので、クリックイベントを何にも添付しようとしていないことがわかります:)

jqueryckeditordom-events
39
Gazillion

この投稿でプラグイン（および変更として検出されたものに関する説明）を取得できます： http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html =ので、次のようなことができます

for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
    }
53
AlfonsoML

私はonchangeを動作させることができませんでしたが、onblurは動作しているようで、あなたのニーズには十分かもしれません

CKEDITOR.instances['name'].on('blur', function() {alert(1);});
14
Alexei Tenitski

変更イベントがあります： http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

以下は、バージョン4.4.3を使用して作業しています。ソースとHTMLが変更されたときに処理する必要があります。

// Initialize the rich text editor.
var bodyEditor = CKEDITOR.replace('emailTemplate_Body',
{
    readOnly: false
});

// Handle when the Source changes.
bodyEditor.on('mode', function () {
    if (this.mode == 'source') {
        var editable = bodyEditor.editable();
        editable.attachListener(editable, 'input', function () {
            alert('source changed');
        });
    }
});

// Handle when the HTML changes.
bodyEditor.on('change', function () {
    alert('change fired');
});
14
Garry English

わかった！

最初に、クラスckeditorを使用してテキストエリアとしてWeb上のエディターを作成し、ckeditor.jsでそれらをrichTextEditorsにしました。次に、他の回答とは異なる解決策を試しましたが、それらを機能させることができませんでした。
次に、クラス名を（CKeditorに）変更したため、コード内のエディターを初期化する必要があります。私はこれを試してみましたが、動作します：

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

$('.CKeditor').ckeditor(function(){
     this.on('blur', function({if(this.checkDirty())alert('text changed!');});
});

そのため、エディターがフォーカスを失うと、エディターが汚れているかどうかをチェックし、汚れている場合は、変更された機能（この例ではアラート）を起動します。

後で、この方法でonchangesプラグインを再試行しました。

$('.CKeditor').ckeditor();
for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
}

プラグインでも動作するようになりました（@Alfonsoに感謝）。しかし、プラグインは変更イベントをあまりにも多く発生させると思うので、変更はぼかしでのみ評価される最初のソリューションを好みます。

お役に立てれば！そしてすべてのあなたの助けに感謝します。

11
Peto

CKEditorには'checkDirty()'という関数があります。 CKEditor値が変更されたかどうかを確認する最も簡単な方法は、コードにこのJSを追加することです。

CKEDITOR.instances['emailBody'].on('blur', function(e) {
    if (e.editor.checkDirty()) {
        var emailValChanged=true; // The action that you would like to call onChange
    }
});

注：emailBody-textareaフィールドのIDです

8
Ryan Wright

基本的に、エディターのコンテンツが元の状態から変更されたかどうかを示すことができます。

var editor = $('#ckeditor').ckeditorGet();

editor.on("instanceReady", function(){                    
     this.document.on("keyup", function(){
     console.log(editor.checkDirty());
   });
});
7
Simon

私は解決策を思いつきませんでしたが、次のリンクはCKEditorで利用可能なイベントについて詳しく説明しています：

http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html

これは私が探していた完璧な解決策ではありませんが、以下を使用してコンテンツが変更されたことを示しています。

CKEDITOR.on('currentInstance', function(){modified = true;});

これは、実際にはコンテンツが変更されたことを意味するのではなく、ユーザーがエディターから焦点を合わせたりぼかしたりしたことを意味します（何もないよりはましです）。

3
Gazillion

イベントを変更するには、プラグインonchange http://ckeditor.com/addon/onchange をダウンロードして、これを実行します

 
 var options_cke = {
 toolbar：
 
 {name： 'basicstyles'、items：['Bold'、 'Italic'、 'Underline'、 'Image'、 'TextColor']}、
 {name： 'paragraph'、items：['JustifyLeft'、 'JustifyCenter'、 'JustifyRight'、 'JustifyBlock'、 'BGColor']} 、
 {name： 'font'、items：['Font'、 'Styles']} 
 
、
 on：
 { 
 change：function（ev）
 {
 //ev.editor.focus();
 console.log（ev）; 
} 
} 
 
}; 
 var editor = $（ 'yourCkeEditorID'）。ckeditor（options_cke）;
2
Flegoff
editor = CKEDITOR.appendTo('container', {resize_enabled: false}); 
editor.on('key', function () { setTimeout(setHtmlData,10); });

等

2
user1005462

cKEditorのドキュメントサイトで確認できるものから、CKEditorにはイベント処理が組み込まれています。つまり、onChangeイベントをリッスンするには、JQueryの代わりにそれを使用する必要があります。これは主に、CKEditorsのようなエディターが「派手な」uisを作成するときに、変更のために間違った要素をリッスンすることになります。 CKEditor javascriptオブジェクトの参照を取得できれば、次のように記述できるはずです。

ckRefObj.on('onChange', function() { /* do your stuff here */ });

これがお役に立てば幸いです。

1
Simon H

このコードは、サイドバーリンクをクリックするとユーザーに警告します

$("#side-menu a").click(function(e){
  if(checkUnsaved()){
    if (confirm("You have unsaved changes.Do you want to save?")) {
      e.preventDefault();          
    }
    // or ur custom alert
  }
});

function checkUnsaved() {
    if(CKEDITOR)
        return CKEDITOR.instances['edit-body'].checkDirty(); // edit-body is the name of textarea in my case.
    else
        return false;
}
0
Serjas

私はサイトを初めて使用するため、単にコメントを追加することはできないようですが、Garryの答えは正解であり、独立して検証したので、これを追加したいと思いました。

CKEDITOR.instances [xxx] .on（ 'change'、function（）{alert（ 'value changed !!'）}）;

これはCKEditor 4+で機能し、元に戻すややり直しを含むすべての変更イベントをキャプチャし、Alfonsoのjsを新しいユーザーが不要にするようにします。

0
Stan Lin
$(document).ready(function () {        
    CKEDITOR.on('instanceReady', function (evt) {                    
        evt.editor.on('blur', function () {
            compare_ckeditor('txtLongDesc');
        });                    
    });
});

「変更」イベントについては知りませんが、CKeditorバージョン3.6を使用している場合、「ぼかし」イベントは私にとって完璧に機能します

0
Himalaya Garg