Date Posted:17-02-2017<\/p>\n
This post we will explain on how to integrate tinymce into \u00a0webpage.<\/p>\n
This example we add two type of textara one is static and dynamic texarea \u00a0with tinymce editor<\/p>\n
First Step,create new file and Include the script source files inside head<\/p>\n
\r\n\r\n <script src=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.8.1.min.js\"><\/script>\r\n <script src=\"\/\/cdn.tinymce.com\/4\/tinymce.min.js\"><\/script>\r\n\r\n<\/pre>\nSecond step add one textarea field and button with onclick event in inside of the body tag<\/p>\n
[script]\r\n<textarea><\/textarea>\r\n<button onclick=\"ShowEditModal\">Submit<\/button>\r\n[\/script]<\/pre>\nThird step, add tinymce init function and create ShowEditModal function, \u00a0when the user clicking the button ShowEditTextarea function excutes, this function creating dynamic textarea.<\/p>\n
<script>\r\ntinymce.init({\r\nselector: 'textarea',\r\nheight: 500,\r\nmenubar: false,\r\nplugins: [\r\n'advlist autolink lists link image charmap print preview anchor',\r\n'searchreplace visualblocks code fullscreen',\r\n'insertdatetime media table contextmenu paste code'\r\n],\r\ntoolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'\r\n});\r\n\r\nfunction ShowEditModal(id)\r\n{\r\n var uid =id; \/\/ it will get id of clicked row\r\n $('#dynamic-content').html(''); \/\/ leave it blank before ajax call\r\n $.ajax({\r\n url: 'tinyajax.php',\r\n type: 'POST',\r\n data: 'id='+id,\r\n dataType: 'html'\r\n })\r\n .done(function(data){\r\n console.log(data);\r\n $('#dynamic-content').html('');\r\n $('#dynamic-content').html(data); \/\/ load response\r\n tinymce.EditorManager.editors = [];\r\n tinymce.init({selector:'textarea'});\/\/this will reinitialze tinymce\r\n })\r\n .fail(function(){\r\n });\r\n}\r\n<\/script>\r\n\r\n\r\n<\/pre>\ntinyajax.php<\/strong><\/p>\n
This page return the textarea field to respective ajax call<\/p>\n
\r\n<textarea><textarea>\r\n\r\n<\/pre>\nGive is we mention \u00a0index.php like this<\/p>\n
\r\n<!DOCTYPE html>\r\n <html>\r\n <head>\r\n <title>TinyMce Editor<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\" type=\"text\/css\" media=\"all\">\r\n <script type=\"text\/javascript\" charset=\"utf8\" src=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.8.1.min.js\"><\/script>\r\n <script src=\"\/\/cdn.tinymce.com\/4\/tinymce.min.js\"><\/script>\r\n\r\n<\/head>\r\n <body>\r\n <form action=\"#\" method=\"POST\" role=\"form\">\r\n\r\n<div class=\"form-group\">\r\n <label for=\"\">Onload Textare<\/label>\r\n <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>\r\n <\/div>\r\n<div id=\"dynamic-content\"><\/div><!-- This Tag Dispaly dynamic textarea with tinymce editor window -->\r\n <button onclick=\"ShowEditModal(this.id)\" id=\"onclick\" type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n <\/form>\r\n <script>\r\n tinymce.init({\r\n selector: 'textarea',\r\n height: 500,\r\n menubar: false,\r\n plugins: [\r\n 'advlist autolink lists link image charmap print preview anchor',\r\n 'searchreplace visualblocks code fullscreen',\r\n 'insertdatetime media table contextmenu paste code'\r\n ],\r\n toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'\r\n });\r\nfunction ShowEditModal(id)\r\n {\r\n\r\n$('#dynamic-content').html(''); \/\/ leave it blank before ajax call\r\n\r\n$.ajax({\r\n url: 'tinyajax.php',\r\n type: 'POST',\r\n data: 'id='+id,\r\n dataType: 'html'\r\n })\r\n .done(function(data){\r\n\r\nconsole.log(data);\r\n $('#dynamic-content').html('');\r\n $('#dynamic-content').html(data); \/\/ load response\r\n tinymce.EditorManager.editors = [];\r\n\r\ntinymce.init({selector:'textarea'});\/\/this will reinitialze tinymce\r\n\r\n\/\/applyMCE();\r\n\r\n})\r\n .fail(function(){\r\n\r\n});\r\n\r\n}\r\n\r\n<\/script>\r\n <\/body>\r\n <\/html>\r\n\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"