tinymce editor in dynamical content inside bootstrap modal dialog

I need to use tinymce (http://www.tinymce.com/) editor in dynamically crated content inside bootstrap modal dialogue. The official document doesn't help and my online search found few tips. After a few tries, following are key steps to use tinymce in dynamic content:

First, we need to make the focus in event work properly inside bootstrap dialog  (http://www.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_boostrap_dialog)

// Prevent bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

Second, after the modal dialog statement, initialize tinymce.

$('#myDialogElement').modal();
$('#myTextArea').tinymce( { width: '100%', menubar: false});

Third, remove the tinymce editor when the modal dialog closes, as the first step, this is called in jQuery initialization.

$('#myDialogElement')on('hidden.bs.modal', function (e) {
        // need to remove the editor to make it work the next time
        tinymce.remove();
});

In the above code, we NuGet the jQuery version tinymce. Both jquery.tinymce.min.js and tinymce.js are included in the Web page.