Key events not working for multiple ckeditors

问题

I have this jsfiddle Here a filter word is alerted to the user when he types it on the ckeditor.In my example the filtered words are ants and words.So if you type these words it will alert the user.

html

<input type="textarea" id="editor1"/>
<div id="dest"></div>

var filter = ['ants', 'words'], // our list of words
    regAry = new Array(), // we'll create one regex per word for testing
    alertedWords = new Array(), // keep track of how many words there were at the last alert, for each word
    reg = new RegExp("(/s" + filter.join("|") + "/s)", "g"); // one regex to rule them all!

for(var f in filter) { // setup...
    regAry[f] = new RegExp(filter[f], "g"); // one regex per word for testing
    alertedWords[f] = 0; // no alerts yet, so 0 for each word
}
var editor = CKEDITOR.replace( 'editor1' );
//var value = CKEDITOR.instances['editor1'].getData();
//alert(value);

 editor.on('contentDom', function() {
 editor.document.on('keyup', function(event) {

for(var index in regAry) { // loop over our list of words
    var value = CKEDITOR.instances['editor1'].getData();
       var test = value.match(regAry[index]); // test how many times this word appears
       if( test && test.length > alertedWords[index] ) // if it appears more than the last time we alerted...
       {
           alert("The following word/words  "+ CKEDITOR.instances['editor1'].getData().match(regAry[index])+" is banned"); // do an alert!
       }
        alertedWords[index] = (test ? test.length : 0); // update the word count for this word
    } // keep looping     

 });
 });

Now my problem arises if I have 2 or more ckeditors like this It doesnt seem to work.Although the editors appear but alerts dont appear.

html

<input type="textarea" id="editor1"/>
<input type="textarea" id="editor2"/>
<div id="dest"></div>

var filter = ['ants', 'words'], // our list of words
    regAry = new Array(), // we'll create one regex per word for testing
    alertedWords = new Array(), // keep track of how many words there were at the last alert, for each word
    reg = new RegExp("(/s" + filter.join("|") + "/s)", "g"); // one regex to rule them all!

for(var f in filter) { // setup...
    regAry[f] = new RegExp(filter[f], "g"); // one regex per word for testing
    alertedWords[f] = 0; // no alerts yet, so 0 for each word
}

for(var i=1;i<3;i++){
var editor = CKEDITOR.replace( 'editor'+i );
//var value = CKEDITOR.instances['editor1'].getData();
//alert(value);

 editor.on('contentDom', function() {
 editor.document.on('keyup', function(event) {

for(var index in regAry) { // loop over our list of words
    var value = CKEDITOR.instances['editor'+i].getData();
       var test = value.match(regAry[index]); // test how many times this word appears
       if( test && test.length > alertedWords[index] ) // if it appears more than the last time we alerted...
       {
           alert("The following word/words  "+ CKEDITOR.instances['editor'+i].getData().match(regAry[index])+" is banned"); // do an alert!
       }
        alertedWords[index] = (test ? test.length : 0); // update the word count for this word
    } // keep looping     

 });
 });
}

What to do?

回答1:

Your problem is related to value of i. When the events (contentDom,keyup) are triggered, the i is 3. So the listeners are trying to work with CKEDITOR.instance("editor3"),which does not exist at all. The solution will be, to add listeners by separate function, which accepts i as an argument:

for(var i=1; i<3; i++){
   addListeners(i);
}
function addListeners(i){
   //body of for loop
}

DEMO

回答2:

Dont do it with for loop but do it with jquery each, like:

$( 'input[type=textarea]').each( function(indx) {

  var editor = CKEDITOR.replace( $(this).attr('id') );

  .....

FIDDLE

来源：https://stackoverflow.com/questions/23126352/key-events-not-working-for-multiple-ckeditors

标签

javascript

jquery

ckeditor