Dynamically Adding and Removing TinyMCE 3 Wysiwyg Editor

In this tutorial we will learn how to add and remove tinymce editor on HTML control.Tinymce is most popular and platform independent web-based JavaScript HTML WYSIWYG control.TinyMCE enables you to convert HTML textarea and div input fields or other HTML elements into WYSIWYG editor instances.

Tinymce will not work when you are loading and unloading textarea/div element using ajax.tinymce is not work again on control if you do not detach tinymce from HTML input control.So in this tutorial i will provide you simple JavaScript code to add and remove tinymce on textarea/div elements.

SImple Exmaple of Tinymce 3 Wysiwyg Editor

tinymce_result

Simple Steps to Instantiate TinyMCE Dynamically

Step 1: We will include tinymce library files in head section of index.html.

%MINIFYHTMLca1bbd98108fbb9aadc6c7fc198f0bb58%%MINIFYHTMLca1bbd98108fbb9aadc6c7fc198f0bb59%

Step 2: We will create textarea control in index.html.


Step 3: Create function to apply tinymce on control.

function applyMCE() {
    tinyMCE.init({
        mode : "textareas",
        theme : "simple",
        editor_selector : "tinymce-enabled-message"       
    });      
}

Step 3: Call above function at the end of DOM.

applyMCE()

Step 4: Add tinymce editot on control.

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

Step 5: Remove tinymce from control.

tinyMCE.execCommand('mceFocus', false, editorId);                    
tinyMCE.execCommand('mceRemoveControl', false, editorId);

If you want to add tinymce based on control id then you need to call below script:

var editorId = 'description'; 
//added tinymce
tinyMCE.execCommand('mceAddControl', false, editorId);
//remove tinymce
tinyMCE.execCommand('mceFocus', false, editorId);                    
tinyMCE.execCommand('mceRemoveControl', false, editorId);

Some times we dont know tinymce is applied or not, in this type situation you need to check instance is created, if created then first remove then add as like below script.

var editorId = 'description';                   
                    if(tinyMCE.getInstanceById(editorId)) 
                    { 
                        tinyMCE.execCommand('mceFocus', false, editorId);                    
                        tinyMCE.execCommand('mceRemoveControl', false, editorId);
                    }

You can download source code and Demo from below link.