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.

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

Step 3: Create function to apply tinymce on control.

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

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

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

You can download source code and Demo from below link.

Leave a Reply

Your email address will not be published. Required fields are marked *