动态创建wysihtml5

Create wysihtml5 dynamically

本文关键字：wysihtml5 创建 动态      更新时间：2024-01-02

嗨，我正在尝试使用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未定义

有人能帮我吗，提前谢谢。

您遇到了函数闭包问题。当您定义每个onblur事件时，您告诉Javascript为所有事件读取相同的i值（最终它变成i=3）。

将其更改为：

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