{"id":3756,"date":"2019-01-15T18:17:59","date_gmt":"2019-01-15T18:17:59","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3756"},"modified":"2019-02-05T19:40:55","modified_gmt":"2019-02-05T19:40:55","slug":"add-wysiwyg-html-editor-to-textarea-ckeditor","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/","title":{"rendered":"Add WYSIWYG HTML Editor to Textarea with CKEditor"},"content":{"rendered":"<p><b>WYSIWYG Editor<\/b> is very useful when you want to allow the user to insert the formatted text content in textarea input field. Generally, the WYSIWYG editor is driven by JavaScript, converts formatted text to HTML before submitting the web form. The user can insert HTML content in the textarea and change the format directly in the text editor. When the editor content is submitted, the exact text format is posted as HTML to the server-side.<\/p>\n<p>There are many WYSIWYG editor plugins are available to <a href=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-website\/\">add text editor to textarea using jQuery<\/a>. CKEditor is the one of them to add a rich text editor to textarea. CKEditor is a WYSIWYG editor plugin that allows converting textarea to the fully-featured HTML editor. In this tutorial, we will show how can you <b>add CKEditor to textarea<\/b> in minutes.<\/p>\n<p>Before getting started, download the <a href=\"https:\/\/ckeditor.com\/ckeditor-4\/download\/\" target=\"_blank\">latest version of CKEditor<\/a> plugin. Extract the downloaded archive and place it in the root of your web application directory. You don&#8217;t need to download the CKEditor separately, all the required files are included in our source code.<\/p>\n<h2>Add CKEditor to Textarea<\/h2>\n<p>Create a textarea element in the webpage where you want to add WYSIWYG HTML Editor.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"10\"<\/span> <span class=\"hljs-attr\">cols<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"80\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span><\/pre>\n<p>Include the JS library file of CKEditor plugin.<\/p>\n<pre><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"ckeditor\/ckeditor.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>Use <b>CKEDITOR.replace()<\/b> method to replace the textarea field with CKEditor. You need to specify the ID of the element which will be replaced with WYSIWYG HTML editor.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\n    CKEDITOR.replace(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'editor'<\/span>);\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>The following example code shows how to add CKEditor on the webpage for replacing the textarea element with a rich text editor.<\/p>\n<pre><span class=\"hljs-meta\" style=\"color: rgb(174, 115, 19);\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"en-US\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">title<\/span>&gt;<\/span>CKEditor<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">title<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"utf-8\"<\/span>&gt;<\/span>\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Include CKEditor library --&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"ckeditor\/ckeditor.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"10\"<\/span> <span class=\"hljs-attr\">cols<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"80\"<\/span>&gt;<\/span>\n        This is my textarea to be replaced with CKEditor.\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\n\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Replace the &lt;textarea&gt; with a CKEditor<\/span>\n    CKEDITOR.replace(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'editor'<\/span>);\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/span>\n\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">html<\/span>&gt;<\/span><\/pre>\n<h2>Save CKEditor Editor Content<\/h2>\n<p>Once the <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span> is submitted, the editor content will be posted to the form action URL as HTML. You can get the HTML content of the CKEditor using the <b>$_REQUEST or $_POST method in PHP<\/b>.<\/p>\n<pre><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'editor'<\/span><span style=\"color: #007700\">]<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/save-html-editor-content-in-database-php-mysql\/\">Save WYSIWYG Editor Content in Database using PHP and MySQL<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WYSIWYG Editor is very useful when you want to allow the user to insert the formatted text content in textarea input field. Generally, the WYSIWYG editor is driven by JavaScript, converts formatted text to HTML <\/p>\n","protected":false},"author":1,"featured_media":3758,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[324,16,170],"class_list":["post-3756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-ckeditor","tag-jquery","tag-text-editor","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Add WYSIWYG HTML Editor to Textarea with CKEditor - CodexWorld<\/title>\n<meta name=\"description\" content=\"Add editor to textarea - Replace textarea element with WYSIWYG HTML editor using CKEditor plugin. Example code to add text editor to textarea with CKEditor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add WYSIWYG HTML Editor to Textarea with CKEditor - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Add editor to textarea - Replace textarea element with WYSIWYG HTML editor using CKEditor plugin. Example code to add text editor to textarea with CKEditor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-15T18:17:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-05T19:40:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\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:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Add WYSIWYG HTML Editor to Textarea with CKEditor\",\"datePublished\":\"2019-01-15T18:17:59+00:00\",\"dateModified\":\"2019-02-05T19:40:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/\"},\"wordCount\":315,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png\",\"keywords\":[\"CKEditor\",\"jQuery\",\"Text Editor\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/\",\"name\":\"Add WYSIWYG HTML Editor to Textarea with CKEditor - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png\",\"datePublished\":\"2019-01-15T18:17:59+00:00\",\"dateModified\":\"2019-02-05T19:40:55+00:00\",\"description\":\"Add editor to textarea - Replace textarea element with WYSIWYG HTML editor using CKEditor plugin. Example code to add text editor to textarea with CKEditor.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/add-wysiwyg-html-editor-to-textarea-ckeditor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add WYSIWYG HTML Editor to Textarea with CKEditor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add WYSIWYG HTML Editor to Textarea with CKEditor - CodexWorld","description":"Add editor to textarea - Replace textarea element with WYSIWYG HTML editor using CKEditor plugin. Example code to add text editor to textarea with CKEditor.","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:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/","og_locale":"en_US","og_type":"article","og_title":"Add WYSIWYG HTML Editor to Textarea with CKEditor - CodexWorld","og_description":"Add editor to textarea - Replace textarea element with WYSIWYG HTML editor using CKEditor plugin. Example code to add text editor to textarea with CKEditor.","og_url":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-01-15T18:17:59+00:00","article_modified_time":"2019-02-05T19:40:55+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Add WYSIWYG HTML Editor to Textarea with CKEditor","datePublished":"2019-01-15T18:17:59+00:00","dateModified":"2019-02-05T19:40:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/"},"wordCount":315,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png","keywords":["CKEditor","jQuery","Text Editor"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/","url":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/","name":"Add WYSIWYG HTML Editor to Textarea with CKEditor - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png","datePublished":"2019-01-15T18:17:59+00:00","dateModified":"2019-02-05T19:40:55+00:00","description":"Add editor to textarea - Replace textarea element with WYSIWYG HTML editor using CKEditor plugin. Example code to add text editor to textarea with CKEditor.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png","width":1366,"height":768,"caption":"add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Add WYSIWYG HTML Editor to Textarea with CKEditor"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/01\/add-wysiwyg-html-editor-to-textarea-with-ckeditor-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-YA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3756"}],"version-history":[{"count":6,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3756\/revisions"}],"predecessor-version":[{"id":3809,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3756\/revisions\/3809"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3758"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}