Question

该脚本对于页面正文中的textarea工作得很好。但是，它在Javascript动态创建的textarea中不起作用。如下所示，我附上了剧本。 PHP inc / toolbar.php包含可编辑textarea的工具栏。如何在所有textareas中添加可视化编辑器？这是我正在开发的CMS新闻通讯的一部分。我只想让编辑器嵌入textarea。我已在此处上传了演示http://benchmarkinc.com.au/test/。请任何人帮忙解决这个问题。我非常确定这个http://toddmotto.com/attaching-event-handlers-to-dynamically-created-javascript-elements/教程正好展示了我面临的同样问题。但是，我无法解决我的问题。

  <script>

  //Case summary
    var editor = new wysihtml5.Editor("case_summary",{
    toolbar:      "toolbar2",
    stylesheets:  "css/wyiswyg.css",
    parserRules:  wysihtml5ParserRules
  });

          var editor = new wysihtml5.Editor("casesum",{
    toolbar:      "toolbar3",
    stylesheets:  "css/wyiswyg.css",
    parserRules:  wysihtml5ParserRules
  });

</script>


<textarea class="form-control" name="case_summary[]" id="case_summary" rows="20"></textarea>


function addRow(frm) {
    caseNum ++;
    var row = '<div class="form-group"><label>Summary: </label><textarea class="form-control" name="case_summary[]" rows="20" id="casesum"></textarea> </div> <div class="form-group"></label></div><div class="alert alert-danger" id="alertme">Please select at least one editon</div>    <div class="text-right"><button class="btn btn-danger" type="button" onclick="removeRow('+caseNum+');"><span class="glyphicon glyphicon-minus"></span> remove...</button></div><hr />   </div>';
    jQuery('#caseAdd').append(row);
    document.getElementById("case_title").value = document.case_title.value;
    document.getElementById("case_summary").value = document.case_summary.value;
}

Answer 1

一种方法是在您的wysihtml5函数中添加addRow处理程序后，将该元素添加到正文中。

function addRow(frm) {
    caseNum ++;
    var row = '<div class="form-group"><label>Summary: </label><textarea class="form-control" name="case_summary[]" rows="20" id="casesum"></textarea> </div> <div class="form-group"></label></div><div class="alert alert-danger" id="alertme">Please select at least one editon</div>    <div class="text-right"><button class="btn btn-danger" type="button" onclick="removeRow('+caseNum+');"><span class="glyphicon glyphicon-minus"></span> remove...</button></div><hr />   </div>';
    jQuery('#caseAdd').append(row);
    document.getElementById("case_title").value = document.case_title.value;
    document.getElementById("case_summary").value = document.case_summary.value;

    var editor = new wysihtml5.Editor("casesum",{
      toolbar:      "toolbar3",
      stylesheets:  "css/wyiswyg.css",
      parserRules:  wysihtml5ParserRules
    });
}

Answer 2

使用jQuery ready

包装你的代码

jQuery(document).ready(function(){
//Case summary
    var editor = new wysihtml5.Editor("case_summary",{
    toolbar:      "toolbar2",
    stylesheets:  "css/wyiswyg.css",
    parserRules:  wysihtml5ParserRules
  });

          var editor = new wysihtml5.Editor("casesum",{
    toolbar:      "toolbar3",
    stylesheets:  "css/wyiswyg.css",
    parserRules:  wysihtml5ParserRules
  });
})

Answer 3

我尝试使用Syed解决方案，但它没有用。我调整了一下只是添加了一个功能到wysihtml5编辑器，它工作正常。所以这里是最终的代码。虽然它的工作原理并不合理。谢谢你们的帮助。

function addRow(frm) {
    caseNum ++;
    var row = '<div class="form-group"><label>Summary: </label><textarea class="form-control" name="case_summary[]" rows="20" id="casesum"></textarea> </div> <div class="form-group"></label></div><div class="alert alert-danger" id="alertme">Please select at least one editon</div>    <div class="text-right"><button class="btn btn-danger" type="button" onclick="removeRow('+caseNum+');"><span class="glyphicon glyphicon-minus"></span> remove...</button></div><hr />   </div>';
    jQuery('#caseAdd').append(row);
    document.getElementById("case_title").value = document.case_title.value;
    document.getElementById("case_summary").value = document.case_summary.value;

   callEventHandler(); //function call
}

function callEventHandler()
{
var editor = new wysihtml5.Editor("casesum",{
    toolbar:      "toolbar3",
    stylesheets:  "css/wyiswyg.css",
    parserRules:  wysihtml5ParserRules
  });
}

为什么wysihtml5没有加载到我的textarea？

3 个答案: