Question

我的html是

<body>
<section class="section">
<textarea id="template">
    <p style="text-align: center;">
      <img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
    </p>

    <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1></textarea>
</section>

  <button class="btn">Click</button>

我的JS看起来像这样。

<script>
     $(document).ready(function(){
         var temp = `  <textarea id="template">
    <p style="text-align: center;">
      <img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
    </p>

    <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1>
  </textarea>`;
         $(".btn").on("click",function(){
            //  $(".section").append($("#template").html());
             $(".section").append(temp);
            //  $(".section").append(temp:String):tinymce.dom.DomQuery;
         });
     });
 </script>

我的TinyMce代码

    tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

您可以在此图中看到。第二次单击，tinyMce编辑器未加载。有人可以帮我吗？谢谢！

Answer 1

我已经找到了上面代码的解决方案：

我制作了一个自定义函数，用于包装tinyMce代码

function addTiny() {   
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

}

在JS中：

 <script>
     $(document).ready(function(){
        addTiny();
         $(".btn").on("click",function(){
                 $(".section").append("<br><textarea></textarea>");
                 addTiny();
             });
 });
 </script>

动态创建div，但不会为动态创建的div加载tinyMce

1 个答案: