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":"Date Posted:17-02-2017 This post we will explain on how to integrate tinymce into \u00a0webpage. This example we add two type […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-1078","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-ho","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1078\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}