动态创建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));