{"id":515,"date":"2012-09-07T00:16:28","date_gmt":"2012-09-07T00:16:28","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=515"},"modified":"2012-09-07T00:16:28","modified_gmt":"2012-09-07T00:16:28","slug":"extjs-htmleditor-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/","title":{"rendered":"ExtJS HtmlEditor Example"},"content":{"rendered":"<p><strong>Problem<\/strong><\/p>\n<p>You want to display a control that allows editing HTML.<\/p>\n<p><a href=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/htmleditor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-516\" title=\"htmleditor\" src=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/htmleditor.png\" alt=\"\" width=\"472\" height=\"247\" srcset=\"https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/htmleditor.png 472w, https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/htmleditor-300x157.png 300w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/htmleditor-contents.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-517\" title=\"htmleditor-contents\" src=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/htmleditor-contents.png\" alt=\"\" width=\"472\" height=\"247\" srcset=\"https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/htmleditor-contents.png 472w, https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/htmleditor-contents-300x157.png 300w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Use the HtmlEditor xtype.<\/p>\n<pre lang=\"javascript\">\n<script>\nExt.onReady(function() {\nExt.tip.QuickTipManager.init();  \/\/ enable tooltips\n  var panel = new Ext.panel.Panel({\n    title: 'HTML Editor',\n    renderTo: \"html\",\n    width: 473,\n    height: 220,\n    default: '',\n    frame: true,\n    layout: 'fit',\n    items: {\n        xtype: 'htmleditor',\n        enableColors: true,\n        enableAlignments: true,\n        enableLists: true,\n        enableSourceEdit: true\n    }\n  });\n\n  Ext.create('Ext.Button', {\n    text    : 'Show HTML Contents',\n    renderTo: \"show\",\n    handler : function() {\n        alert(panel.items.getAt(0).getValue());\n    }\n  });\n});\n<\/script>\n<body id=\"ext-body\">\n\t<div id=\"html\"><\/div>\n\t<center>\n\t  <div id=\"show\"><\/div>\n  <\/center>\n<\/body>\n<\/html>\n<\/pre>\n<p><strong>Discussion<\/strong><\/p>\n<p>The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the WordPress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by the sample button code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the WordPress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;ExtJS HtmlEditor Example&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[213,216,219,224],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"gary\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Gary Sieling - Software Engineer\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"ExtJS HtmlEditor Example - Gary Sieling\" \/>\n\t\t<meta property=\"og:description\" content=\"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2012-09-07T00:16:28+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2012-09-07T00:16:28+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"ExtJS HtmlEditor Example - Gary Sieling\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#blogposting\",\"name\":\"ExtJS HtmlEditor Example - Gary Sieling\",\"headline\":\"ExtJS HtmlEditor Example\",\"author\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"http:\\\/\\\/172.104.26.128\\\/wp-content\\\/uploads\\\/2012\\\/09\\\/htmleditor.png\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#articleImage\"},\"datePublished\":\"2012-09-07T00:16:28+00:00\",\"dateModified\":\"2012-09-07T00:16:28+00:00\",\"inLanguage\":\"en-US\",\"commentCount\":1,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#webpage\"},\"articleSection\":\"Code Examples, extjs, extjs 4 examples, extjs htmleditor tutorial, extjs tutorials\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.garysieling.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/#listItem\",\"name\":\"Code Examples\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/#listItem\",\"position\":2,\"name\":\"Code Examples\",\"item\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#listItem\",\"name\":\"ExtJS HtmlEditor Example\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#listItem\",\"position\":3,\"name\":\"ExtJS HtmlEditor Example\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/category\\\/code-examples\\\/#listItem\",\"name\":\"Code Examples\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#organization\",\"name\":\"Gary Sieling\",\"description\":\"Software Engineer\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/\",\"name\":\"gary\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0be925276d848ffe98a6a9dc8cf33e67?s=96&d=identicon&r=g\",\"width\":96,\"height\":96,\"caption\":\"gary\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#webpage\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/\",\"name\":\"ExtJS HtmlEditor Example - Gary Sieling\",\"description\":\"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/extjs-htmleditor-example\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/author\\\/gary\\\/#author\"},\"datePublished\":\"2012-09-07T00:16:28+00:00\",\"dateModified\":\"2012-09-07T00:16:28+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/\",\"name\":\"Gary Sieling\",\"description\":\"Software Engineer\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.garysieling.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"ExtJS HtmlEditor Example - Gary Sieling","description":"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by","canonical_url":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#blogposting","name":"ExtJS HtmlEditor Example - Gary Sieling","headline":"ExtJS HtmlEditor Example","author":{"@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author"},"publisher":{"@id":"https:\/\/www.garysieling.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/htmleditor.png","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#articleImage"},"datePublished":"2012-09-07T00:16:28+00:00","dateModified":"2012-09-07T00:16:28+00:00","inLanguage":"en-US","commentCount":1,"mainEntityOfPage":{"@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#webpage"},"isPartOf":{"@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#webpage"},"articleSection":"Code Examples, extjs, extjs 4 examples, extjs htmleditor tutorial, extjs tutorials"},{"@type":"BreadcrumbList","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.garysieling.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/#listItem","name":"Code Examples"}},{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/#listItem","position":2,"name":"Code Examples","item":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#listItem","name":"ExtJS HtmlEditor Example"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#listItem","position":3,"name":"ExtJS HtmlEditor Example","previousItem":{"@type":"ListItem","@id":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/#listItem","name":"Code Examples"}}]},{"@type":"Organization","@id":"https:\/\/www.garysieling.com\/blog\/#organization","name":"Gary Sieling","description":"Software Engineer","url":"https:\/\/www.garysieling.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author","url":"https:\/\/www.garysieling.com\/blog\/author\/gary\/","name":"gary","image":{"@type":"ImageObject","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/0be925276d848ffe98a6a9dc8cf33e67?s=96&d=identicon&r=g","width":96,"height":96,"caption":"gary"}},{"@type":"WebPage","@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#webpage","url":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/","name":"ExtJS HtmlEditor Example - Gary Sieling","description":"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.garysieling.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/#breadcrumblist"},"author":{"@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author"},"creator":{"@id":"https:\/\/www.garysieling.com\/blog\/author\/gary\/#author"},"datePublished":"2012-09-07T00:16:28+00:00","dateModified":"2012-09-07T00:16:28+00:00"},{"@type":"WebSite","@id":"https:\/\/www.garysieling.com\/blog\/#website","url":"https:\/\/www.garysieling.com\/blog\/","name":"Gary Sieling","description":"Software Engineer","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.garysieling.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Gary Sieling - Software Engineer","og:type":"article","og:title":"ExtJS HtmlEditor Example - Gary Sieling","og:description":"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by","og:url":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/","article:published_time":"2012-09-07T00:16:28+00:00","article:modified_time":"2012-09-07T00:16:28+00:00","twitter:card":"summary_large_image","twitter:title":"ExtJS HtmlEditor Example - Gary Sieling","twitter:description":"Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. Discussion The HtmlEditor is fairly full featured, and seems to be comparable, if not better than the Wordpress HTML Editor control. Many configuration options are included. The HTML value of the contents can be retrieved programmatically, as shown by"},"aioseo_meta_data":{"post_id":"515","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"created":"2023-02-04 16:08:26","updated":"2026-07-06 00:47:32","ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.garysieling.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/\" title=\"Code Examples\">Code Examples<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tExtJS HtmlEditor Example\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.garysieling.com\/blog"},{"label":"Code Examples","link":"https:\/\/www.garysieling.com\/blog\/category\/code-examples\/"},{"label":"ExtJS HtmlEditor Example","link":"https:\/\/www.garysieling.com\/blog\/extjs-htmleditor-example\/"}],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/515"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}