TinyMce 在动态创建的文本区域上不可编辑和点击

Question

我的场景是通过单击添加按钮生成新的文本区域，它类似于转发器字段。 我想在每个新创建的 textarea 和所有其他已经存在的文本区域上设置 Tinymce。 我遇到的问题是现有的 textarea 工作正常，但其他动态生成的不能正常工作。 TinyMCE 文本区域正在显示，但完全不可点击或编辑。

HTML 代码：

<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<tr class="empty-row screen-reader-text">
    <td>
         <input type="text" class="widefat" name="index[]" />
    </td>
    
    <td><input type="text" class="widefat" name="name[]" /></td>

    <td><input type="file" class="widefat" name="attachment[]" />
    <input type="hidden" name="attachment_current[]" >
    </td>
    
    <td>
    <textarea class="widefat tiny" name="anno_text[]" ></textarea>
    </td>
    
    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
      
    <td><a class="button remove-row" href="#">Remove</a></td>
</tr>
</tbody>
</table>

<p><a id="add-row" class="button" href="#">Add another</a></p>

jQuery 代码：

jQuery(document).ready(function( $ ){
     $.fn.extend({
initTiny: function() {
  tinymce.init({
    mode: "textareas",
    height: 100
  });
}
});
    
    
    $( '#add-row' ).on('click', function() {
        var row = $( '.empty-row.screen-reader-text' ).clone(true);
        row.removeClass( 'empty-row screen-reader-text' );
        row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );

     $("textarea", row).initTiny();
        return false;
    });

 $(".tiny").initTiny();

    $( '.remove-row' ).on('click', function() {
        $(this).parents('tr').remove();
        return false;
    });
});

我得到的结果是我附上了一张图片。

第一个 tinymce 编辑器工作正常，但之后就没有一个可点击的 tinymce 编辑器

Answer 1

考虑以下示例。

jQuery(function($) {
  $.fn.extend({
    initTiny: function() {
      console.log("Init TinyMCE");
      tinymce.init({
        selector: "textarea.tiny",
        height: 100
      });
    }
  });

  $("#add-row").click(function() {
    var row = $(".row-template").html();
    console.log("Row Cloned");
    $(row).appendTo('#repeatable-fieldset-one > tbody');
    console.log("Row Appended", $("#repeatable-fieldset-one tbody tr").length);
    $(".tiny").initTiny();
  });

  $("#add-row").trigger("click");

  $("#repeatable-fieldset-one").on("click", ".remove-row", function() {
    if (confirm("Are you sure you want to remove the Row?")) {
      $(this).closest("tr").remove();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js" integrity="sha512-XNYSOn0laKYg55QGFv1r3sIlQWCAyNKjCa+XXF5uliZH+8ohn327Ewr2bpEnssV9Zw3pB3pmVvPQNrnCTRZtCg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/jquery.tinymce.min.js" integrity="sha512-nmHWouzLZ3EkXUiXVLpRy/scUPyOOwWkAZ6p8GJnswtVIfSgQ6dFjfCv4VrUA9YgutCRqUDyjHGfQ+/3OEbH4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<template class="row-template">
  <tr>
    <td>
      <input type="text" class="widefat" name="index[]" />
    </td>
    <td><input type="text" class="widefat" name="name[]" /></td>
    <td><input type="file" class="widefat" name="attachment[]" />
      <input type="hidden" name="attachment_current[]">
    </td>
    <td>
      <textarea class="widefat tiny" name="anno_text[]"></textarea>
    </td>
    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
    <td><a class="button remove-row" href="#">Remove</a></td>
  </tr>
</template>

<table id="repeatable-fieldset-one">
  <tbody>
  </tbody>
</table>

<p><a id="add-row" class="button" href="#">Add another</a></p>

查看更多：

• multiple tinymce textareas
• https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x@mode/
• https://api.jquery.com/jQuery.fn.extend/