Создайте wysihtml5 динамически

Question

Привет, я пытаюсь создать несколько текстовых полей с wysihtml5 0.3.0. Сначала создайте HTML, затем инициализируйте редакторы, я должен настроить размытие для каждого текстового поля.

<div id="toolbar0" style="display: none;"> 
     <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> | 
     <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> 
     <a data-wysihtml5-action="change_view">switch to html view</a> 
     </div> 
     <textarea id="textarea0" placeholder="Enter text ..."></textarea> 
     <br> 
     <br> 
     <div id="toolbar1" style="display: none;"> 
     <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> | 
     <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> 
     <a data-wysihtml5-action="change_view">switch to html view</a> 
     </div> 
     <textarea id="textarea1" placeholder="Enter text ..."></textarea> 
     <br> 
     <br> 
     <div id="toolbar2" style="display: none;"> 
     <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> | 
     <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> 
     <a data-wysihtml5-action="change_view">switch to html view</a> 
     </div> 
     <textarea id="textarea2" placeholder="Enter text ..."></textarea> 
<script> 
    var editor = []; 
    var aux = []; 

     for(var i = 0; i <= 2; i++) 
     { 
      editor[i] = new wysihtml5.Editor("textarea" + i, { 
       toolbar:  "toolbar" + i, 
       parserRules: wysihtml5ParserRules 
      }); 

       aux[i] = editor[i].getValue(); 
       var log = document.getElementById("log"); 

       editor[i]   
       .on("blur", function() { 
        log.innerHTML += "<div>blur"+i+"</div><div>"+ aux[i] +"</div>"; 
       }) 
     } 
</script> 

Всегда в случае размытия получить последнее текстовое поле и неопределенное значение: blur3 неопределенного, blur3 неопределенного, blur3 неопределенных

Может кто-то помочь мне, спасибо заранее.

Answer 1

Вы столкнулись с проблемой закрытия функции. Когда вы определяете каждое событие onblur, вы указываете Javascript для чтения того же значения i для всех из них (и в конце он становится i=3).

Изменить его в этом:

editor[i].on("blur", function(index) { 
    return function() { log.innerHTML += "<div>blur"+index+"</div><div>"+ aux[index] +"</div>"}; 
}(i));