我有这个用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 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);
的同时重现所有这些功能? 最佳答案
我建议您在克隆后删除重复的ID,并使用由其插入的类名。如果ID重复,TinyMCE将不会创建编辑器。
$(".screen-reader-text").clone().find("textarea").removeAttr("id").addClass("editor");
然后,编辑器绑定代码将是,
tinyMCE.execCommand('mceAddControl', false, ".editor");
关于javascript - 使用jQuery向克隆的HTML节点添加自定义ID?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36736602/