inyMCE is a powerful and flexible Rich Text Editor (RTE)<\/strong> that allows users to create and format content directly within a web application. It provides a familiar editing experience with features such as text formatting, lists, links, images, tables, and other content-editing options.<\/p>\n\n\n\n In this tutorial, we will learn how to integrate the TinyMCE Rich Text Editor<\/strong> into a web page. We will cover both:<\/p>\n\n\n\n This approach is useful when creating content management systems, blog editors, or any application that requires rich text editing capabilities.<\/p>\n\n\n\n Before following this tutorial, make sure you have the following:<\/p>\n\n\n\n Add the following JavaScript libraries inside the Note:<\/strong> For production environments, it is recommended to use the latest version of TinyMCE and jQuery from their official sources.<\/p>\n<\/blockquote>\n Create a textarea that will be initialized with TinyMCE and a button that loads another textarea dynamically using AJAX.<\/p>\n Add the following TinyMCE configuration script.<\/p>\n When the user clicks the button, an AJAX request loads a new textarea and reinitializes TinyMCE.<\/p>\n This file returns the textarea that will be loaded dynamically through AJAX.<\/p>\n\n
Prerequisites<\/h2>\n\n\n\n
\n
tinyajax.php<\/code>) to return the dynamically generated <textarea><\/code>.<\/li>\n\n\n\nIMPLEMENTATION<\/h2>\n\n\n
Step 1: Include Required Libraries<\/h2>\n
<head><\/code> section of your page.<\/p>\n<script src=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.8.1.min.js\"><\/script>\n<script src=\"\/\/cdn.tinymce.com\/4\/tinymce.min.js\"><\/script><\/code><\/pre>\n\n
<\/div>\nStep 2: Add a Textarea and Button<\/h2>\n
<textarea><\/textarea>\n<button onclick=\"ShowEditModal(this.id)\" id=\"onclick\">Submit<\/button><\/code><\/pre>\n
<\/div>\nStep 3: Initialize TinyMCE<\/h2>\n
<script>\ntinymce.init({\n selector: 'textarea',\n height: 500,\n menubar: false,\n plugins: [\n 'advlist autolink lists link image charmap print preview anchor',\n 'searchreplace visualblocks code fullscreen',\n 'insertdatetime media table contextmenu paste code'\n ]<\/span>,\n toolbar:\n 'undo redo | insert | styleselect | bold italic | ' +\n 'alignleft aligncenter alignright alignjustify | ' +\n 'bullist numlist outdent indent | link image'\n});\n<\/script><\/code><\/pre>\n
<\/div>\nStep 4: Load Dynamic Textarea Using AJAX<\/h2>\n
<script>\nfunction ShowEditModal(id)\n{\n $('#dynamic-content').html('');\n\n $.ajax({\n url: 'tinyajax.php',\n type: 'POST',\n data: 'id=' + id,\n dataType: 'html'\n })\n .done(function(data) {\n\n $('#dynamic-content').html(data);\n\n \/\/ Remove existing editor instances\n tinymce.EditorManager.editors = [];\n\n \/\/ Reinitialize TinyMCE for dynamically added textarea\n tinymce.init({\n selector: 'textarea'\n });\n\n })\n .fail(function() {\n console.log('Failed to load content.');\n });\n}\n<\/script><\/code><\/pre>\n
<\/div>\ntinyajax.php<\/h2>\n
<textarea><\/textarea><\/code><\/pre>\n
<\/div>\nComplete Example (index.php)<\/h2>\n
<!DOCTYPE html>\n<html>\n<head>\n <title>TinyMCE Editor Example<\/title>\n\n <link rel=\"stylesheet\"\n href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\">\n\n <script src=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.8.1.min.js\"><\/script>\n <script src=\"\/\/cdn.tinymce.com\/4\/tinymce.min.js\"><\/script>\n<\/head>\n\n<body>\n\n<form action=\"#\" method=\"POST\">\n\n <div class=\"form-group\">\n <label>Onload Textarea<\/label>\n\n <textarea id=\"description1\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\nNullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan.\n <\/textarea>\n <\/div>\n\n <div id=\"dynamic-content\"><\/div>\n\n <button onclick=\"ShowEditModal(this.id)\"\n id=\"onclick\"\n type=\"button\"\n class=\"btn btn-primary\">\n Load Dynamic Editor\n <\/button>\n\n<\/form>\n\n<script>\ntinymce.init({\n selector: 'textarea',\n height: 500,\n menubar: false,\n plugins: [\n 'advlist autolink lists link image charmap print preview anchor',\n 'searchreplace visualblocks code fullscreen',\n 'insertdatetime media table contextmenu paste code'\n ]<\/span>,\n toolbar:\n 'undo redo | insert | styleselect | bold italic | ' +\n 'alignleft aligncenter alignright alignjustify | ' +\n 'bullist numlist outdent indent | link image'\n});\n\nfunction ShowEditModal(id)\n{\n $('#dynamic-content').html('');\n\n $.ajax({\n url: 'tinyajax.php',\n type: 'POST',\n data: 'id=' + id,\n dataType: 'html'\n })\n .done(function(data) {\n\n $('#dynamic-content').html(data);\n\n tinymce.EditorManager.editors = [];\n\n tinymce.init({\n selector: 'textarea'\n });\n\n })\n .fail(function() {\n console.log('Failed to load content.');\n });\n}\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n