为什么wysihtml5没有加载到我的文本区域

Why is wysihtml5 not loading in my textarea?

本文关键字：我的 文本 区域 加载 wysihtml5 为什么      更新时间：2023-09-26

脚本对页面正文中的文本区域运行良好。然而，它在Javascript动态创建的文本区域不起作用。如下所示，我已附上剧本。PHP inc/toolbar.PHP包含可编辑文本区域的工具栏。如何在所有文本区域中添加视觉编辑器？这是我正在开发的时事通讯CMS的一部分。我只想把编辑器嵌入到文本区域。我已经在这里上传了演示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;
}

一种方法是在主体中添加元素后，在addRow函数中添加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;
    var editor = new wysihtml5.Editor("casesum",{
      toolbar:      "toolbar3",
      stylesheets:  "css/wyiswyg.css",
      parserRules:  wysihtml5ParserRules
    });
}

只需使用jQuery就绪包装您的代码

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
  });
})

我尝试过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
  });
}
相关文章：