{"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,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[213,216,219,224],"aioseo_notices":[],"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}]}}