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.