Question

我有这个用JavaScript克隆的HTML ...

<tr class="empty-row screen-reader-text">
    <td><a class="button remove-row" href="#">-</a></td>
    <td><input type="text" class="widefat" name="name[]" /></td>


    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
    <td><a class="sort">|||</a></td>
    <td>
        <textarea id="editor"></textarea>
    </td>
</tr>

单击一个按钮时，它将克隆上面的HTML表行，并使用此JS / jQuery .clone(true)将其作为新行插入到DOM中...

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#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');
        return false;
    });
});
</script>

我的问题

我需要从ID为editor ...

的上面的HTML中获取textarea

<textarea id="editor"></textarea>

我需要运行此JavaScript将其转换为WordPress中的WYSIWYG编辑器，其中id下面的值是添加到DOM的每个新行/编辑器的唯一值...

tinyMCE.execCommand('mceAddControl', false, id);

因为HTML行是用clone(true)克隆的，所以它会复制上一行中相同的编辑器实例，因为我无法设置和启动一个新的编辑器来使用唯一的ID。

那么我怎样才能重现所有这些功能，同时允许添加到DOM的新行具有自定义ID值，并在新行添加到DOM后对该新ID运行tinyMCE.execCommand('mceAddControl', false, id);？ / p>

Answer 1

我建议你在克隆后删除重复的ID并使用它的类名。如果ID是重复的，TinyMCE不会创建编辑器。

$(".screen-reader-text").clone().find("textarea").removeAttr("id").addClass("editor");

然后编辑器绑定代码将是

tinyMCE.execCommand('mceAddControl', false, ".editor");

使用jQuery将自定义ID添加到克隆的HTML节点？

1 个答案: