TinyMCE with UIKIT 3 Modal

Question

I use TinyMCE version 4.3.10, with the latest version of UIkit 3, the problem is that if I insert the tinymce inside a textarea that is inside a div in modal, as soon as I open the div through the uk function -toggle. I load the tinymce screen but I can't write, in the code I noticed that the body is empty, what can I do?

Answer 1

I solved this by attaching TinyMCE after the modal is shown. Hook into the modal event 'shown' or 'beforeshow', as shown below. You should also remove TinyMCE when the modal is hidden.

UIkit.util.on('#my-modal', 'shown', () => {

      tinymce.init({
        selector: '#my-textarea',
        plugins: 'advlist autolink lists link charmap preview emoticons',
        toolbar: 'bold italic underline | backcolor forecolor | emoticons',
        toolbar_mode: 'floating',
        menubar:false,
        statusbar: false
      });
      
});

UIkit.util.on('#my-modal', 'beforehide', () => {
    tinymce.remove("#my-textarea");
});

UIkit.modal( "#my-modal" ).show();