TinyMCE重新加载编辑器

时间:2017-09-17 12:43:03

标签: javascript jquery tinymce tinymce-4

我有简单的模态窗口和textarea:

<div class="box-modal" id="product_modal">
    <div class="box-modal_close arcticmodal-close"><img id="closePopupImage" src="/images/icons/popup_icon_close.png"></div>
    <div id="product_fields">
        <span class="product_label">{'TEXT_PRODUCT_NAME'|tr}:</span>
        <input type="text" class="product_name">
        <span>{'TEXT_PRODUCT_PRICE'|tr}:</span>
        <input type="text" class="product_price">
        <span>{'TEXT_PRODUCT_AMOUNT'|tr}:</span>
        <input type="text" class="product_amount">
        <br>
        <span class="product_label pr_comment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
        <textarea id="product_comment" class="product_comment"></textarea>
        <img class="add_one_more" src="/images/icons/add_button.png" title="{'TEXT_ADD_ONE_MORE'|tr}">
    </div>
</div>

我有一个带有类的按钮,类为.add_products_btn。

我的js:

 function makeTinyMceEditor() {
            tinymce.init({
                selector: "#product_comment",
                plugins: "link"
            });
    }

$(".add_products_btn").click(function () {
        $("#product_modal").arcticmodal();
        makeTinyMceEditor();
    });

所以当我第一次点击按钮时,我的tinymce工作正常。但是当我点击第二个按钮时,我的tinymce不起作用(想想因为每次点击按钮时textarea的id都是相同的)。 如何从编辑器中删除旧的id instanse以便再次使用它们?

感谢。

1 个答案:

答案 0 :(得分:0)

您需要使用remove() API在关闭Modal窗口之前从 中分离TinyMCE。然后,您可以在重新创建模态时再次使用init()

https://www.tinymce.com/docs/api/tinymce/root_tinymce/#remove