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_ment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
        <textarea id="product_ment" class="product_ment"></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_ment",
                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.

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_ment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
        <textarea id="product_ment" class="product_ment"></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_ment",
                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.

• javascript
• jquery
• tinymce
• tinymce-4

Share Improve this question Follow asked Sep 17, 2017 at 12:43 NgalexNgalex 4111 gold badge11 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./docs/api/tinymce/root_tinymce/#remove