Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / HtmlEditor.html
index acf5b0e..e6b4b9d 100644 (file)
@@ -1,34 +1,48 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-form.field.HtmlEditor-method-constructor'><span id='Ext-form.field.HtmlEditor'>/**
-</span></span> * @class Ext.form.field.HtmlEditor
- * @extends Ext.Component
- *
- * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-form-field-HtmlEditor'>/**
+</span> * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
  * automatically hidden when needed. These are noted in the config options where appropriate.
- * 
+ *
  * The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
- * enabled by default unless the global {@link Ext.tip.QuickTipManager} singleton is {@link Ext.tip.QuickTipManager#init initialized}.
- * 
- * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
- * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
+ * enabled by default unless the global {@link Ext.tip.QuickTipManager} singleton is
+ * {@link Ext.tip.QuickTipManager#init initialized}.
  *
- * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor1.png Ext.form.HtmlEditor component}
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an
+ * Editor within any element that has display set to 'none' can cause problems in Safari and Firefox due to their
+ * default iframe reloading bugs.
  *
- * ## Example usage
+ * # Example usage
  *
- * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor2.png Ext.form.HtmlEditor component}
+ * Simple example rendered with default options:
  *
- *     // Simple example rendered with default options:
- *     Ext.tip.QuickTips.init();  // enable tooltips
+ *     @example
+ *     Ext.tip.QuickTipManager.init();  // enable tooltips
  *     Ext.create('Ext.form.HtmlEditor', {
  *         width: 580,
  *         height: 250,
- *         renderTo: Ext.getBody()        
+ *         renderTo: Ext.getBody()
  *     });
- * 
- * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor2.png Ext.form.HtmlEditor component}
- * 
- *     // Passed via xtype into a container and with custom options:
- *     Ext.tip.QuickTips.init();  // enable tooltips
+ *
+ * Passed via xtype into a container and with custom options:
+ *
+ *     @example
+ *     Ext.tip.QuickTipManager.init();  // enable tooltips
  *     new Ext.panel.Panel({
  *         title: 'HTML Editor',
  *         renderTo: Ext.getBody(),
  *             enableAlignments: false
  *         }
  *     });
- *
- * @constructor
- * Create a new HtmlEditor
- * @param {Object} config
- * @xtype htmleditor
  */
 Ext.define('Ext.form.field.HtmlEditor', {
     extend:'Ext.Component',
@@ -66,58 +75,69 @@ Ext.define('Ext.form.field.HtmlEditor', {
     ],
 
     fieldSubTpl: [
-        '&lt;div class=&quot;{toolbarWrapCls}&quot;&gt;&lt;/div&gt;',
-        '&lt;textarea id=&quot;{id}&quot; name=&quot;{name}&quot; tabIndex=&quot;-1&quot; class=&quot;{textareaCls}&quot; ',
+        '&lt;div id=&quot;{cmpId}-toolbarWrap&quot; class=&quot;{toolbarWrapCls}&quot;&gt;&lt;/div&gt;',
+        '&lt;textarea id=&quot;{cmpId}-textareaEl&quot; name=&quot;{name}&quot; tabIndex=&quot;-1&quot; class=&quot;{textareaCls}&quot; ',
             'style=&quot;{size}&quot; autocomplete=&quot;off&quot;&gt;&lt;/textarea&gt;',
-        '&lt;iframe name=&quot;{iframeName}&quot; frameBorder=&quot;0&quot; style=&quot;overflow:auto;{size}&quot; src=&quot;{iframeSrc}&quot;&gt;&lt;/iframe&gt;',
+        '&lt;iframe id=&quot;{cmpId}-iframeEl&quot; name=&quot;{iframeName}&quot; frameBorder=&quot;0&quot; style=&quot;overflow:auto;{size}&quot; src=&quot;{iframeSrc}&quot;&gt;&lt;/iframe&gt;',
         {
             compiled: true,
             disableFormats: true
         }
     ],
 
-<span id='Ext-form.field.HtmlEditor-cfg-enableFormat'>    /**
-</span>     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableFormat'>    /**
+</span>     * @cfg {Boolean} enableFormat
+     * Enable the bold, italic and underline buttons
      */
     enableFormat : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableFontSize'>    /**
-</span>     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableFontSize'>    /**
+</span>     * @cfg {Boolean} enableFontSize
+     * Enable the increase/decrease font size buttons
      */
     enableFontSize : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableColors'>    /**
-</span>     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableColors'>    /**
+</span>     * @cfg {Boolean} enableColors
+     * Enable the fore/highlight color buttons
      */
     enableColors : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableAlignments'>    /**
-</span>     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableAlignments'>    /**
+</span>     * @cfg {Boolean} enableAlignments
+     * Enable the left, center, right alignment buttons
      */
     enableAlignments : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableLists'>    /**
-</span>     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableLists'>    /**
+</span>     * @cfg {Boolean} enableLists
+     * Enable the bullet and numbered list buttons. Not available in Safari.
      */
     enableLists : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableSourceEdit'>    /**
-</span>     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableSourceEdit'>    /**
+</span>     * @cfg {Boolean} enableSourceEdit
+     * Enable the switch to source edit button. Not available in Safari.
      */
     enableSourceEdit : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableLinks'>    /**
-</span>     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableLinks'>    /**
+</span>     * @cfg {Boolean} enableLinks
+     * Enable the create link button. Not available in Safari.
      */
     enableLinks : true,
-<span id='Ext-form.field.HtmlEditor-cfg-enableFont'>    /**
-</span>     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
+<span id='Ext-form-field-HtmlEditor-cfg-enableFont'>    /**
+</span>     * @cfg {Boolean} enableFont
+     * Enable font selection. Not available in Safari.
      */
     enableFont : true,
-<span id='Ext-form.field.HtmlEditor-cfg-createLinkText'>    /**
-</span>     * @cfg {String} createLinkText The default text for the create link prompt
+<span id='Ext-form-field-HtmlEditor-cfg-createLinkText'>    /**
+</span>     * @cfg {String} createLinkText
+     * The default text for the create link prompt
      */
     createLinkText : 'Please enter the URL for the link:',
-<span id='Ext-form.field.HtmlEditor-cfg-defaultLinkValue'>    /**
-</span>     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+<span id='Ext-form-field-HtmlEditor-cfg-defaultLinkValue'>    /**
+</span>     * @cfg {String} [defaultLinkValue='http://']
+     * The default value for the create link prompt
      */
     defaultLinkValue : 'http:/'+'/',
-<span id='Ext-form.field.HtmlEditor-cfg-fontFamilies'>    /**
-</span>     * @cfg {Array} fontFamilies An array of available font families
+<span id='Ext-form-field-HtmlEditor-cfg-fontFamilies'>    /**
+</span>     * @cfg {String[]} fontFamilies
+     * An array of available font families
      */
     fontFamilies : [
         'Arial',
@@ -127,8 +147,10 @@ Ext.define('Ext.form.field.HtmlEditor', {
         'Verdana'
     ],
     defaultFont: 'tahoma',
-<span id='Ext-form.field.HtmlEditor-cfg-defaultValue'>    /**
-</span>     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &amp;#160; (Non-breaking space) in Opera and IE6, &amp;#8203; (Zero-width space) in all other browsers).
+<span id='Ext-form-field-HtmlEditor-cfg-defaultValue'>    /**
+</span>     * @cfg {String} defaultValue
+     * A default value to be put into the editor to resolve focus issues (defaults to (Non-breaking space) in Opera
+     * and IE6, ​(Zero-width space) in all other browsers).
      */
     defaultValue: (Ext.isOpera || Ext.isIE6) ? '&amp;#160;' : '&amp;#8203;',
 
@@ -144,56 +166,55 @@ Ext.define('Ext.form.field.HtmlEditor', {
     hideMode:'offsets',
 
     maskOnDisable: true,
-    
+
     // private
     initComponent : function(){
         var me = this;
 
         me.addEvents(
-<span id='Ext-form.field.HtmlEditor-event-initialize'>            /**
+<span id='Ext-form-field-HtmlEditor-event-initialize'>            /**
 </span>             * @event initialize
              * Fires when the editor is fully initialized (including the iframe)
              * @param {Ext.form.field.HtmlEditor} this
              */
             'initialize',
-<span id='Ext-form.field.HtmlEditor-event-activate'>            /**
+<span id='Ext-form-field-HtmlEditor-event-activate'>            /**
 </span>             * @event activate
-             * Fires when the editor is first receives the focus. Any insertion must wait
-             * until after this event.
+             * Fires when the editor is first receives the focus. Any insertion must wait until after this event.
              * @param {Ext.form.field.HtmlEditor} this
              */
             'activate',
-<span id='Ext-form.field.HtmlEditor-event-beforesync'>             /**
+<span id='Ext-form-field-HtmlEditor-event-beforesync'>             /**
 </span>             * @event beforesync
-             * Fires before the textarea is updated with content from the editor iframe. Return false
-             * to cancel the sync.
+             * Fires before the textarea is updated with content from the editor iframe. Return false to cancel the
+             * sync.
              * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'beforesync',
-<span id='Ext-form.field.HtmlEditor-event-beforepush'>             /**
+<span id='Ext-form-field-HtmlEditor-event-beforepush'>             /**
 </span>             * @event beforepush
-             * Fires before the iframe editor is updated with content from the textarea. Return false
-             * to cancel the push.
+             * Fires before the iframe editor is updated with content from the textarea. Return false to cancel the
+             * push.
              * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'beforepush',
-<span id='Ext-form.field.HtmlEditor-event-sync'>             /**
+<span id='Ext-form-field-HtmlEditor-event-sync'>             /**
 </span>             * @event sync
              * Fires when the textarea is updated with content from the editor iframe.
              * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'sync',
-<span id='Ext-form.field.HtmlEditor-event-push'>             /**
+<span id='Ext-form-field-HtmlEditor-event-push'>             /**
 </span>             * @event push
              * Fires when the iframe editor is updated with content from the textarea.
              * @param {Ext.form.field.HtmlEditor} this
              * @param {String} html
              */
             'push',
-<span id='Ext-form.field.HtmlEditor-event-editmodechange'>             /**
+<span id='Ext-form-field-HtmlEditor-event-editmodechange'>             /**
 </span>             * @event editmodechange
              * Fires when the editor switches edit modes
              * @param {Ext.form.field.HtmlEditor} this
@@ -209,11 +230,11 @@ Ext.define('Ext.form.field.HtmlEditor', {
         me.initField();
     },
 
-    /*
-     * Protected method that will not generally be called directly. It
-     * is called when the editor creates its toolbar. Override this method if you need to
+<span id='Ext-form-field-HtmlEditor-method-createToolbar'>    /**
+</span>     * Called when the editor creates its toolbar. Override this method if you need to
      * add custom toolbar buttons.
      * @param {Ext.form.field.HtmlEditor} editor
+     * @protected
      */
     createToolbar : function(editor){
         var me = this,
@@ -241,7 +262,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
         if (me.enableFont &amp;&amp; !Ext.isSafari2) {
             fontSelectItem = Ext.widget('component', {
                 renderTpl: [
-                    '&lt;select class=&quot;{cls}&quot;&gt;',
+                    '&lt;select id=&quot;{id}-selectEl&quot; class=&quot;{cls}&quot;&gt;',
                         '&lt;tpl for=&quot;fonts&quot;&gt;',
                             '&lt;option value=&quot;{[values.toLowerCase()]}&quot; style=&quot;font-family:{.}&quot;&lt;tpl if=&quot;values.toLowerCase()==parent.defaultFont&quot;&gt; selected&lt;/tpl&gt;&gt;{.}&lt;/option&gt;',
                         '&lt;/tpl&gt;',
@@ -252,9 +273,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
                     fonts: me.fontFamilies,
                     defaultFont: me.defaultFont
                 },
-                renderSelectors: {
-                    selectEl: 'select'
-                },
+                childEls: ['selectEl'],
                 onDisable: function() {
                     var selectEl = this.selectEl;
                     if (selectEl) {
@@ -420,7 +439,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
         this.callParent(arguments);
     },
 
-<span id='Ext-form.field.HtmlEditor-method-setReadOnly'>    /**
+<span id='Ext-form-field-HtmlEditor-method-setReadOnly'>    /**
 </span>     * Sets the read only state of this field.
      * @param {Boolean} readOnly Whether the field should be read only.
      */
@@ -453,20 +472,20 @@ Ext.define('Ext.form.field.HtmlEditor', {
         }
     },
 
-<span id='Ext-form.field.HtmlEditor-method-getDocMarkup'>    /**
-</span>     * Protected method that will not generally be called directly. It
-     * is called when the editor initializes the iframe with HTML contents. Override this method if you
+<span id='Ext-form-field-HtmlEditor-method-getDocMarkup'>    /**
+</span>     * Called when the editor initializes the iframe with HTML contents. Override this method if you
      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
      *
-     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility.
+     * **Note:** IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility.
      * Also note that forcing IE7 mode works when the page is loaded normally, but if you are using IE's Web
      * Developer Tools to manually set the document mode, that will take precedence and override what this
      * code sets by default. This can be confusing when developing, but is not a user-facing issue.
+     * @protected
      */
     getDocMarkup: function() {
         var me = this,
             h = me.iframeEl.getHeight() - me.iframePad * 2;
-        return Ext.String.format('&lt;html&gt;&lt;head&gt;&lt;style type=&quot;text/css&quot;&gt;body{border:0;margin:0;padding:{0}px;height:{1}px;cursor:text}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;', me.iframePad, h);
+        return Ext.String.format('&lt;html&gt;&lt;head&gt;&lt;style type=&quot;text/css&quot;&gt;body{border:0;margin:0;padding:{0}px;height:{1}px;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;cursor:text}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;', me.iframePad, h);
     },
 
     // private
@@ -487,16 +506,11 @@ Ext.define('Ext.form.field.HtmlEditor', {
 
     // private
     onRender: function() {
-        var me = this,
-            renderSelectors = me.renderSelectors;
+        var me = this;
 
-        Ext.applyIf(renderSelectors, me.getLabelableSelectors());
+        me.onLabelableRender();
 
-        Ext.applyIf(renderSelectors, {
-            toolbarWrap: 'div.' + Ext.baseCSSPrefix + 'html-editor-tb',
-            iframeEl: 'iframe',
-            textareaEl: 'textarea'
-        });
+        me.addChildEls('toolbarWrap', 'iframeEl', 'textareaEl');
 
         me.callParent(arguments);
 
@@ -528,6 +542,8 @@ Ext.define('Ext.form.field.HtmlEditor', {
     getSubTplData: function() {
         var cssPrefix = Ext.baseCSSPrefix;
         return {
+            cmpId: this.id,
+            id: this.getInputId(),
             toolbarWrapCls: cssPrefix + 'html-editor-tb',
             textareaCls: cssPrefix + 'hidden',
             iframeName: Ext.id(),
@@ -537,7 +553,8 @@ Ext.define('Ext.form.field.HtmlEditor', {
     },
 
     getSubTplMarkup: function() {
-        return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
+        var data = this.getSubTplData();
+        return this.getTpl('fieldSubTpl').apply(data);
     },
 
     getBodyNaturalWidth: function() {
@@ -581,8 +598,9 @@ Ext.define('Ext.form.field.HtmlEditor', {
         }
     },
 
-    /* private
-     * set current design mode. To enable, mode can be true or 'on', off otherwise
+<span id='Ext-form-field-HtmlEditor-method-setDesignMode'>    /**
+</span>     * @private
+     * Sets current design mode. To enable, mode can be true or 'on', off otherwise
      */
     setDesignMode: function(mode) {
         var me = this,
@@ -609,7 +627,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
         });
     },
 
-<span id='Ext-form.field.HtmlEditor-method-toggleSourceEdit'>    /**
+<span id='Ext-form-field-HtmlEditor-method-toggleSourceEdit'>    /**
 </span>     * Toggles the editor between standard and source edit mode.
      * @param {Boolean} sourceEditMode (optional) True for source edit, false for standard
      */
@@ -675,11 +693,11 @@ Ext.define('Ext.form.field.HtmlEditor', {
         return this;
     },
 
-<span id='Ext-form.field.HtmlEditor-method-cleanHtml'>    /**
-</span>     * Protected method that will not generally be called directly. If you need/want
-     * custom HTML cleanup, this is the method you should override.
+<span id='Ext-form-field-HtmlEditor-method-cleanHtml'>    /**
+</span>     * If you need/want custom HTML cleanup, this is the method you should override.
      * @param {String} html The HTML to be cleaned
      * @return {String} The cleaned HTML
+     * @protected
      */
     cleanHtml: function(html) {
         html = String(html);
@@ -698,9 +716,9 @@ Ext.define('Ext.form.field.HtmlEditor', {
         return html;
     },
 
-<span id='Ext-form.field.HtmlEditor-method-syncValue'>    /**
-</span>     * @protected method that will not generally be called directly. Syncs the contents
-     * of the editor iframe with the textarea.
+<span id='Ext-form-field-HtmlEditor-method-syncValue'>    /**
+</span>     * Syncs the contents of the editor iframe with the textarea.
+     * @protected
      */
     syncValue : function(){
         var me = this,
@@ -735,9 +753,9 @@ Ext.define('Ext.form.field.HtmlEditor', {
         return value;
     },
 
-<span id='Ext-form.field.HtmlEditor-method-pushValue'>    /**
-</span>     * @protected method that will not generally be called directly. Pushes the value of the textarea
-     * into the iframe editor.
+<span id='Ext-form-field-HtmlEditor-method-pushValue'>    /**
+</span>     * Pushes the value of the textarea into the iframe editor.
+     * @protected
      */
     pushValue: function() {
         var me = this,
@@ -783,7 +801,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
             ss['background-attachment'] = 'fixed'; // w3c
             dbody.bgProperties = 'fixed'; // ie
 
-            Ext.core.DomHelper.applyStyles(dbody, ss);
+            Ext.DomHelper.applyStyles(dbody, ss);
 
             doc = me.getDoc();
 
@@ -866,7 +884,7 @@ Ext.define('Ext.form.field.HtmlEditor', {
             } catch(e) {
                 // ignore (why?)
             }
-            Ext.destroyMembers('tb', 'toolbarWrap', 'iframeEl', 'textareaEl');
+            Ext.destroyMembers(me, 'tb', 'toolbarWrap', 'iframeEl', 'textareaEl');
         }
         me.callParent();
     },
@@ -957,9 +975,9 @@ Ext.define('Ext.form.field.HtmlEditor', {
         this.updateToolbar();
     },
 
-<span id='Ext-form.field.HtmlEditor-method-updateToolbar'>    /**
-</span>     * Protected method that will not generally be called directly. It triggers
-     * a toolbar update by reading the markup state of the current selection in the editor.
+<span id='Ext-form-field-HtmlEditor-method-updateToolbar'>    /**
+</span>     * Triggers a toolbar update by reading the markup state of the current selection in the editor.
+     * @protected
      */
     updateToolbar: function() {
         var me = this,
@@ -1010,11 +1028,11 @@ Ext.define('Ext.form.field.HtmlEditor', {
         this.relayCmd(btn.getItemId());
     },
 
-<span id='Ext-form.field.HtmlEditor-method-relayCmd'>    /**
-</span>     * Executes a Midas editor command on the editor document and performs necessary focus and
-     * toolbar updates. &lt;b&gt;This should only be called after the editor is initialized.&lt;/b&gt;
+<span id='Ext-form-field-HtmlEditor-method-relayCmd'>    /**
+</span>     * Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates.
+     * **This should only be called after the editor is initialized.**
      * @param {String} cmd The Midas command
-     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     * @param {String/Boolean} [value=null] The value to pass to the command
      */
     relayCmd: function(cmd, value) {
         Ext.defer(function() {
@@ -1025,10 +1043,9 @@ Ext.define('Ext.form.field.HtmlEditor', {
         }, 10, this);
     },
 
-<span id='Ext-form.field.HtmlEditor-method-execCmd'>    /**
-</span>     * Executes a Midas editor command directly on the editor document.
-     * For visual commands, you should use {@link #relayCmd} instead.
-     * &lt;b&gt;This should only be called after the editor is initialized.&lt;/b&gt;
+<span id='Ext-form-field-HtmlEditor-method-execCmd'>    /**
+</span>     * Executes a Midas editor command directly on the editor document. For visual commands, you should use
+     * {@link #relayCmd} instead. **This should only be called after the editor is initialized.**
      * @param {String} cmd The Midas command
      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
      */
@@ -1068,9 +1085,9 @@ Ext.define('Ext.form.field.HtmlEditor', {
         }
     },
 
-<span id='Ext-form.field.HtmlEditor-method-insertAtCursor'>    /**
-</span>     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
-     * to insert text.
+<span id='Ext-form-field-HtmlEditor-method-insertAtCursor'>    /**
+</span>     * Inserts the passed text at the current cursor position.
+     * Note: the editor must be initialized and activated to insert text.
      * @param {String} text
      */
     insertAtCursor : function(text){
@@ -1157,33 +1174,31 @@ Ext.define('Ext.form.field.HtmlEditor', {
         return null; // not needed, so null
     }(),
 
-<span id='Ext-form.field.HtmlEditor-method-getToolbar'>    /**
-</span>     * Returns the editor's toolbar. &lt;b&gt;This is only available after the editor has been rendered.&lt;/b&gt;
+<span id='Ext-form-field-HtmlEditor-method-getToolbar'>    /**
+</span>     * Returns the editor's toolbar. **This is only available after the editor has been rendered.**
      * @return {Ext.toolbar.Toolbar}
      */
     getToolbar : function(){
         return this.toolbar;
     },
 
-<span id='Ext-form.field.HtmlEditor-property-buttonTips'>    /**
-</span>     * Object collection of toolbar tooltips for the buttons in the editor. The key
-     * is the command id associated with that button and the value is a valid QuickTips object.
-     * For example:
-&lt;pre&gt;&lt;code&gt;
-{
-    bold : {
-        title: 'Bold (Ctrl+B)',
-        text: 'Make the selected text bold.',
-        cls: 'x-html-editor-tip'
-    },
-    italic : {
-        title: 'Italic (Ctrl+I)',
-        text: 'Make the selected text italic.',
-        cls: 'x-html-editor-tip'
-    },
-    ...
-&lt;/code&gt;&lt;/pre&gt;
-    * @type Object
+<span id='Ext-form-field-HtmlEditor-property-buttonTips'>    /**
+</span>     * @property {Object} buttonTips
+     * Object collection of toolbar tooltips for the buttons in the editor. The key is the command id associated with
+     * that button and the value is a valid QuickTips object. For example:
+     *
+     *     {
+     *         bold : {
+     *             title: 'Bold (Ctrl+B)',
+     *             text: 'Make the selected text bold.',
+     *             cls: 'x-html-editor-tip'
+     *         },
+     *         italic : {
+     *             title: 'Italic (Ctrl+I)',
+     *             text: 'Make the selected text italic.',
+     *             cls: 'x-html-editor-tip'
+     *         },
+     *         ...
      */
     buttonTips : {
         bold : {
@@ -1259,58 +1274,60 @@ Ext.define('Ext.form.field.HtmlEditor', {
     }
 
     // hide stuff that is not compatible
-<span id='Ext-form.field.HtmlEditor-event-blur'>    /**
+<span id='Ext-form-field-HtmlEditor-event-blur'>    /**
 </span>     * @event blur
      * @hide
      */
-<span id='Ext-form.field.HtmlEditor-event-change'>    /**
+<span id='Ext-form-field-HtmlEditor-event-change'>    /**
 </span>     * @event change
      * @hide
      */
-<span id='Ext-form.field.HtmlEditor-event-focus'>    /**
+<span id='Ext-form-field-HtmlEditor-event-focus'>    /**
 </span>     * @event focus
      * @hide
      */
-<span id='Ext-form.field.HtmlEditor-event-specialkey'>    /**
+<span id='Ext-form-field-HtmlEditor-event-specialkey'>    /**
 </span>     * @event specialkey
      * @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-fieldCls'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-fieldCls'>    /**
 </span>     * @cfg {String} fieldCls @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-focusCls'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-focusCls'>    /**
 </span>     * @cfg {String} focusCls @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-autoCreate'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-autoCreate'>    /**
 </span>     * @cfg {String} autoCreate @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-inputType'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-inputType'>    /**
 </span>     * @cfg {String} inputType @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-invalidCls'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-invalidCls'>    /**
 </span>     * @cfg {String} invalidCls @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-invalidText'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-invalidText'>    /**
 </span>     * @cfg {String} invalidText @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-msgFx'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-msgFx'>    /**
 </span>     * @cfg {String} msgFx @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-allowDomMove'>    /**
-</span>     * @cfg {Boolean} allowDomMove  @hide
+<span id='Ext-form-field-HtmlEditor-cfg-allowDomMove'>    /**
+</span>     * @cfg {Boolean} allowDomMove @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-applyTo'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-applyTo'>    /**
 </span>     * @cfg {String} applyTo @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-readOnly'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-readOnly'>    /**
 </span>     * @cfg {String} readOnly  @hide
      */
-<span id='Ext-form.field.HtmlEditor-cfg-tabIndex'>    /**
+<span id='Ext-form-field-HtmlEditor-cfg-tabIndex'>    /**
 </span>     * @cfg {String} tabIndex  @hide
      */
-<span id='Ext-form.field.HtmlEditor-method-validate'>    /**
+<span id='Ext-form-field-HtmlEditor-method-validate'>    /**
 </span>     * @method validate
      * @hide
      */
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>