{"id":11138,"date":"2024-02-02T21:35:29","date_gmt":"2024-02-02T16:35:29","guid":{"rendered":"https:\/\/codehim.com\/?p=11138"},"modified":"2024-02-03T13:11:22","modified_gmt":"2024-02-03T08:11:22","slug":"full-featured-text-editor-using-tinymce-editor","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/","title":{"rendered":"Full-featured Text Editor Using TinyMCE Editor"},"content":{"rendered":"

This code creates a full-featured text editor using the TinyMCE Editor. The HTML code embeds TinyMCE with various customization options, including a centered logo, demo content, and links. The CSS ensures a clean display, and the JavaScript initializes TinyMCE with a modern theme and diverse plugins for enhanced functionality.<\/p>\n

It allows easy text formatting, linking, and even includes templates. This code is helpful for effortlessly integrating a powerful text editor into your web applications without extensive coding, providing users with a seamless content creation experience.<\/p>\n

How to Create Full-featured Text Editor Using Tinymce Editor<\/h2>\n

1. Firstly, include the necessary dependencies by adding the TinyMCE CSS and JavaScript files to your HTML. Ensure you have a textarea element where the editor will be initialized.<\/p>\n

<!-- Add TinyMCE CSS -->\r\n<\/span> <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/www.tiny.cloud\/css\/style.css\"<\/span>><\/span><\/pre>\n
2. Create the HTML textarea element where the rich text editor will be initialized:<\/p>\n
<!-- Your HTML content with a textarea element --><\/span> \r\n<textarea<\/span>><\/span><\/textarea<\/span>><\/span><\/pre>\n
3. You can define additional CSS styles to customize the text editor:<\/p>\n
body {\r\n  padding: 5px;\r\n}<\/pre>\n
4. Load the TinyMCE editor JavaScript libarary<\/a> by adding the following CDN link before closing the body tag:<\/p>\n
<script src='https:\/\/cdn.tiny.cloud\/1\/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc\/tinymce\/4\/tinymce.min.js'><\/script><\/pre>\n
5. Finally, add the following JavaScript function to initialize the text editor. In your JavaScript code, configure TinyMCE by initializing it with the desired settings. Customize the selector<\/code>, height<\/code>, theme<\/code>, and plugins<\/code> according to your preferences. The example below initializes TinyMCE with a modern theme and various plugins.<\/p>\n
tinymce.init({\r\n  selector: 'textarea',\r\n  height: 500,\r\n  theme: 'modern',\r\n  plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern help',\r\n  toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',\r\n  image_advtab: true,\r\n  templates: [\r\n    { title: 'Test template 1', content: 'Test 1' },\r\n    { title: 'Test template 2', content: 'Test 2' }\r\n  ],\r\n  content_css: [\r\n    '\/\/fonts.googleapis.com\/css?family=Lato:300,300i,400,400i',\r\n    '\/\/www.tinymce.com\/css\/codepen.min.css'\r\n  ]\r\n });<\/pre>\n
That’s all! hopefully, you have successfully created a Full-featured Text Editor Using TinyMCE Editor. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a full-featured text editor using the TinyMCE Editor. The HTML code embeds TinyMCE with various customization options,…<\/p>\n","protected":false},"author":1,"featured_media":11218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-11138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input"],"acf":[],"yoast_head":"\nFull-featured Text Editor Using TinyMCE Editor — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Full-featured Text Editor Using TinyMCE Editor. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full-featured Text Editor Using TinyMCE Editor — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Full-featured Text Editor Using TinyMCE Editor. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-02T16:35:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-03T08:11:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Full-featured Text Editor Using TinyMCE Editor\",\"datePublished\":\"2024-02-02T16:35:29+00:00\",\"dateModified\":\"2024-02-03T08:11:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\"},\"wordCount\":239,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png\",\"articleSection\":[\"Text & Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\",\"url\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\",\"name\":\"Full-featured Text Editor Using TinyMCE Editor — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png\",\"datePublished\":\"2024-02-02T16:35:29+00:00\",\"dateModified\":\"2024-02-03T08:11:22+00:00\",\"description\":\"Here is a free code snippet to create a Full-featured Text Editor Using TinyMCE Editor. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png\",\"width\":1280,\"height\":960,\"caption\":\"Full-featured Text Editor Using TinyMCE Editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text & Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Full-featured Text Editor Using TinyMCE Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Full-featured Text Editor Using TinyMCE Editor — CodeHim","description":"Here is a free code snippet to create a Full-featured Text Editor Using TinyMCE Editor. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/","og_locale":"en_US","og_type":"article","og_title":"Full-featured Text Editor Using TinyMCE Editor — CodeHim","og_description":"Here is a free code snippet to create a Full-featured Text Editor Using TinyMCE Editor. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-02-02T16:35:29+00:00","article_modified_time":"2024-02-03T08:11:22+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Full-featured Text Editor Using TinyMCE Editor","datePublished":"2024-02-02T16:35:29+00:00","dateModified":"2024-02-03T08:11:22+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/"},"wordCount":239,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png","articleSection":["Text & Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/","url":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/","name":"Full-featured Text Editor Using TinyMCE Editor — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png","datePublished":"2024-02-02T16:35:29+00:00","dateModified":"2024-02-03T08:11:22+00:00","description":"Here is a free code snippet to create a Full-featured Text Editor Using TinyMCE Editor. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/Full-featured-Text-Editor-Using-TinyMCE-Editor.png","width":1280,"height":960,"caption":"Full-featured Text Editor Using TinyMCE Editor"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/full-featured-text-editor-using-tinymce-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text & Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Full-featured Text Editor Using TinyMCE Editor"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":763,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11138"}],"version-history":[{"count":2,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11138\/revisions"}],"predecessor-version":[{"id":11236,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11138\/revisions\/11236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11218"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}