How to show TinyMCE editor in jquery modal window on click

Question

I have made a blog application where I have this form for writing the blog. It has a title field, an instance of of tinymce editor for the blog body, a text field for adding tags and the submit button.

What I want to do is to by default show the whole form to the user when the page loads. The user can fill in the title. Now when the user comes on the text-editor, there will be a button on clicking which only the text editor will open in the modal window and the user can type in that.

Once the user clicks on the cross, then the text is copied to the underlying text editor. I am not that good at javascript and I have looked a few blogs, but that didn't help. Any directions will be really appreciated. I am adding a snapshot of how the blog page looks like.

Answer 1

You need to start off by initializing your TinyMCE editor with something like this (add in any options you want):

$(function() {
    tinyMCE.init({
            mode: "none",
            theme: "simple",
    });

    //whatever code
});

You can set up any mode you like but I'm going to go with dynamic creation (mode: none) because it gives you more control. Initialize your modal in "whatever code" then create your editor inside the modal with the code below:

tinyMCE.execCommand('mceAddControl', false, 'id_of_textarea');

To get/set the content of your editor you would do this:

tinyMCE.activeEditor.getContent();
tinyMCE.activeEditor.setContent('data in here');

You'll need to close your tinyMCE editor before you close your modal or it will fail to load next time the modal opens. To close it you need to execute the following code:

tinyMCE.execCommand('mceRemoveControl', false, 'id_of_textarea');