动态生成textarea中TinyMCE编辑器无法点击编辑问题求助

问题根源 #

1. 原初始化逻辑使用mode: "textareas"全局配置，每次执行都会扫描页面所有textarea，容易造成已存在的编辑器实例重复绑定冲突
2. 动态生成的textarea没有唯一ID，TinyMCE依赖唯一DOM标识绑定编辑器实例，标识缺失/重复会导致后续实例无法正常交互
3. 删除行时未销毁对应TinyMCE实例，残留实例会干扰后续新增编辑器的绑定逻辑
4. 原HTML代码存在多余的空tr开标签，可能导致克隆行结构异常

修复步骤 #

1. 修正HTML结构 #

删除多余的隐藏行tr开标签，确保结构完整：

<!-- empty hidden one for jQuery -->
<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>

2. 替换JS逻辑 #

jQuery(document).ready(function( $ ){
    // 生成唯一ID辅助方法，确保每个textarea有唯一标识
    function generateUniqueId() {
        return 'tiny-editor-' + Math.random().toString(36).slice(2, 10);
    }

    $.fn.extend({
        initTiny: function() {
            return this.each(function() {
                // 为未设置ID的textarea生成唯一ID
                if(!this.id) {
                    this.id = generateUniqueId();
                }
                // 销毁已存在的同名实例，避免绑定冲突
                if(tinymce.get(this.id)) {
                    tinymce.remove(this.id);
                }
                // 仅针对当前textarea初始化，不要全局扫描
                tinymce.init({
                    selector: '#' + this.id,
                    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' );
        // 仅初始化新行内的编辑器
        row.find("textarea.tiny").initTiny();
        return false;
    });

    // 初始化页面加载时已存在的编辑器
    $("textarea.tiny").initTiny();

    $( '.remove-row' ).on('click', function() {
        var $row = $(this).parents('tr');
        // 删除DOM前先销毁对应编辑器实例，避免残留冲突
        $row.find('textarea.tiny').each(function() {
            if(tinymce.get(this.id)) {
                tinymce.remove(this.id);
            }
        });
        $row.remove();
        return false;
    });
});

效果验证 #

修改后新增的所有TinyMCE编辑器都可以正常点击、输入，删除行也不会产生实例残留问题。

内容的提问来源于stack exchange，提问作者Talha Arif