Question

我有jsfiddle 在这里，当用户在ckeditor上输入过滤词时会向用户发出警告。在我的示例中，过滤后的词are ants and words。所以如果您输入这些词，它会提醒用户。

HTML

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

JS

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     

 });
 });

现在我的问题出现了，如果我有两个或更多的ckeditor，如this 它似乎没有用。尽管编辑出现但警报没有出现。

HTML

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

JS

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     

 });
 });
}

怎么办？

Answer 1

不要使用for循环执行此操作，而是使用jquery each执行此操作，例如：

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

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

  .....

<强> FIDDLE

Answer 2

您的问题与i的价值有关。触发事件（contentDom，keyup）后，i为3。因此，听众正在尝试使用CKEDITOR.instance("editor3")，这根本不存在。解决方案是通过单独的函数添加侦听器，该函数接受i作为参数：

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

DEMO

关键事件不适用于多个ckeditors

2 个答案: