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插件（令人讨厌）没有破坏方法，因此你必须手动重新初始化最初生成的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作为引用（而不是类）来设置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编辑器？

1 个答案: