动态创建wysihtml5

时间:2015-02-17 09:26:51

标签: javascript html wysihtml5

您好我正在尝试使用wysihtml5 0.3.0创建多个textareas。 首先生成HTML然后初始化编辑器,我必须为每个textarea自定义模糊。

    <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>

始终在模糊事件中获取最后一个textarea和未定义的值: blur3 undefined,blur3 undefined,blur3 undefined

有人可以帮助我,提前谢谢。

1 个答案:

答案 0 :(得分:0)

你陷入了一个功能封闭问题。当您定义每个onblur事件时,您告诉Javascript为所有这些事件读取相同的i值(最后它变为i=3)。

将其更改为:

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