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 used to convert HTML textarea and div input fields or other HTML elements into WYSIWYG editor instances.

in previous tutorial Dynamically Adding and Removing TinyMCE 3 WYSIWYG Editor, but now tinymce 4 has been released so many readers request me for 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 attached then detached WYSIWYG control.

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

Simple Example of Tinymce 4 Wysiwyg Editor

tinymce_result

Simple Steps to Instantiate TinyMCE Dynamically

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

Select Code
1
2
3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="all">
    <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.

Select Code
1
<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.

Select Code
1
2
3
4
5
6
function applyMCE() {
   tinyMCE.init({
    mode : "textareas",
    editor_selector : "tinymce-enabled-message",     
  });      
}

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

Select Code
1
applyMCE()

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

Select Code
1
2
3
4
5
6
7
8
9
10
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 below script:

Select Code
1
2
3
4
5
6
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.