Dynamically Adding and Removing TinyMCE 4 Wysiwyg Editor

In this tutorial, we will learn how to add and remove tinymce 4 editor on HTML control.TinyMCE is used to convert HTML textarea and div input fields or other HTML elements into WYSIWYG editor instances.

The TinyMCE 4 has been released, So many readers request me for a tutorial about how to add dynamically Tinymce 4 WYSIWYG editor instances using jquery. Tinymce is not working on loading and unloading textarea/div element using Ajax so we will first attach then detached WYSIWYG control.

Tinymce is a very popular and platform-independent web-based JavaScript HTML WYSIWYG control. In this tutorial, I will provide you with simple JavaScript code to add and remove TinyMCE 4 on textarea/div elements.

Simple Example of Tinymce 4 Wysiwyg Editor

Simple Steps to Instantiate TinyMCE Dynamically

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

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

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

<textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>

Step 3: Create function to apply tinymce on control.

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

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

applyMCE()

Step 4: Add and Remove tinymce 4 editor on control. You need to pass editorid to the below function.

function AddRemoveTinyMce(editorId) {
 if(tinyMCE.get(editorId)) 
 {
  tinyMCE.EditorManager.execCommand('mceFocus', false, editorId);                    
  tinyMCE.EditorManager.execCommand('mceRemoveEditor', true, editorId);

 } else {
  tinymce.EditorManager.execCommand('mceAddEditor', false, editorId);    
 }
}

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

var editorId = 'description'; 
//added tinymce
tinymce.EditorManager.execCommand('mceAddEditor', false, editorId);
//remove tinymce
tinyMCE.EditorManager.execCommand('mceFocus', false, editorId);                    
tinyMCE.EditorManager.execCommand('mceRemoveEditor', true, editorId);

You can download source code and Demo from below link.