关键事件不适用于多个ckeditor [英] Key events not working for multiple ckeditors

问题描述

我有这个 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     

 });
 });

现在，如果我有2个或更多的ckeditor，例如> 此 它似乎不起作用.尽管出现了编辑器，但没有出现警报.

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     

 });
 });
}

该怎么办?

解决方案

您的问题与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
}

演示

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>

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     

 });
 });

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>

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     

 });
 });
}

What to do?

解决方案

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

这篇关于关键事件不适用于多个ckeditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！