TinyMCE reload editor

Question

I have simple modal window with 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>

I have table with button with class .add_products_btn.

My js:

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

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

So when I click in button in first time my tinymce works fine. But when I click on the second button my tinymce doesn't work (think because textarea's ids are the same every time when I click on the button). How can I remove old id instanse from editor for use them again?

Thanks.

Answer 1

You need to use the remove() API to detach TinyMCE from the DOM before you close your Modal window. You can then use init() again when the modal is recreated.

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