如何在同一页面上克隆并拥有多个 wysihtml 编辑器？

Question

当我想在一个页面上添加多个 wysihtml 插件时，我遇到了问题。我有一些 jQuery 代码可以克隆 div 及其内容并将其添加到页面。到目前为止，效果很好，但是当我添加 wysihtml5 的启动时，它对添加的元素不起作用。我得到双菜单和输入的接缝被禁用。

我可以使用以下命令启用脚本：$('.mini-textarea').wysihtml5();

我的克隆工作代码是：

$(".cloneContentFromDiv").click(function(e){
    e.preventDefault();
    $('.clone-this-div').first().clone().appendTo('.apend-to-this');

});

我是否必须删除并重新启动 wysihtml5 功能？如果可以，如何以最佳方式做到这一点？

解决方案会是这样的吗：

//clone and add product specs
$(".cloneContentFromDiv").click(function(e){
    e.preventDefault();

    $('.clone-this-div').first().clone().appendTo('.apend-to-this').find('.name').val('');  

    $('.textarea').remove();
    $('.textarea').wysihtml5();

});

Answer 1

Wysihtml5 插件（烦人）没有 destroy 方法，因此您必须手动重新初始化最初生成的 Wysihtml5 元素，否则您会看到奇怪的人工制品，例如您现在看到的双工具栏。

我把原文区域包裹在div周围，方便以后查找和销毁：

<div class="richtextedit">
    <textarea id="textarea-1" class="textarea"></textarea>
</div>

保存对克隆元素的引用：

var newElem = $('.clone-this-div').first().clone();

克隆元素后，您需要手动销毁克隆元素中生成的 Wysihtml5 元素，并从头开始重建它：

var num = $('.textarea').length + 1; //num is the total count of the cloned textareas

newElem.find('.richtextedit').html('');
newElem.find('.richtextedit').html('<textarea id="textarea-'+num+'" class="textarea"></textarea>');

然后您可以将克隆的元素添加到页面中并使用 id 作为参考（而不是 class）设置 Wysihtml5 元素，这样它就不会影响页面上其他正在工作的 Wysihtml5。

newElem.appendTo('.apend-to-this'); 

$('#textarea-'+num).wysihtml5();

请注意，您不需要使用

修改文本区域的原始内容

.find('.name').val('')

因为你已经重构了元素。

用我上面的步骤替换下面的 3 行，你应该可以开始了。

$('.clone-this-div').first().clone().appendTo('.apend-to-this').find('.name').val('');  

$('.textarea').remove();
$('.textarea').wysihtml5();

如何在同一页面上克隆并拥有多个 wysihtml 编辑器？

How to clone and have multiple wysihtml editors on the same page?

jquery

wysiwyg