X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/HtmlEditor.html diff --git a/docs/source/HtmlEditor.html b/docs/source/HtmlEditor.html index 04d0c950..acf5b0ef 100644 --- a/docs/source/HtmlEditor.html +++ b/docs/source/HtmlEditor.html @@ -1,97 +1,123 @@ - - - - The source code - - - - -
/** - * @class Ext.form.HtmlEditor - * @extends Ext.form.Field +Sencha Documentation Project
/**
+ * @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
- * 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.QuickTips} singleton is {@link Ext.QuickTips#init initialized}. - *

Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT - * supported by this editor. - *

An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within + * 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. - *

Example usage: - *

-// Simple example rendered with default options:
-Ext.QuickTips.init();  // enable tooltips
-new Ext.form.HtmlEditor({
-    renderTo: Ext.getBody(),
-    width: 800,
-    height: 300
-});
-
-// Passed via xtype into a container and with custom options:
-Ext.QuickTips.init();  // enable tooltips
-new Ext.Panel({
-    title: 'HTML Editor',
-    renderTo: Ext.getBody(),
-    width: 600,
-    height: 300,
-    frame: true,
-    layout: 'fit',
-    items: {
-        xtype: 'htmleditor',
-        enableColors: false,
-        enableAlignments: false
-    }
-});
-
+ * + * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor1.png Ext.form.HtmlEditor component} + * + * ## Example usage + * + * {@img Ext.form.HtmlEditor/Ext.form.HtmlEditor2.png Ext.form.HtmlEditor component} + * + * // Simple example rendered with default options: + * Ext.tip.QuickTips.init(); // enable tooltips + * Ext.create('Ext.form.HtmlEditor', { + * width: 580, + * height: 250, + * 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 + * new Ext.panel.Panel({ + * title: 'HTML Editor', + * renderTo: Ext.getBody(), + * width: 550, + * height: 250, + * frame: true, + * layout: 'fit', + * items: { + * xtype: 'htmleditor', + * enableColors: false, + * enableAlignments: false + * } + * }); + * * @constructor * Create a new HtmlEditor * @param {Object} config * @xtype htmleditor */ +Ext.define('Ext.form.field.HtmlEditor', { + extend:'Ext.Component', + mixins: { + labelable: 'Ext.form.Labelable', + field: 'Ext.form.field.Field' + }, + alias: 'widget.htmleditor', + alternateClassName: 'Ext.form.HtmlEditor', + requires: [ + 'Ext.tip.QuickTipManager', + 'Ext.picker.Color', + 'Ext.toolbar.Item', + 'Ext.toolbar.Toolbar', + 'Ext.util.Format', + 'Ext.layout.component.field.HtmlEditor' + ], -Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { -
/** - * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true) + fieldSubTpl: [ + '<div class="{toolbarWrapCls}"></div>', + '<textarea id="{id}" name="{name}" tabIndex="-1" class="{textareaCls}" ', + 'style="{size}" autocomplete="off"></textarea>', + '<iframe name="{iframeName}" frameBorder="0" style="overflow:auto;{size}" src="{iframeSrc}"></iframe>', + { + compiled: true, + disableFormats: true + } + ], + + /** + * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true) */ enableFormat : true, -
/** - * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true) + /** + * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true) */ enableFontSize : true, -
/** - * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true) + /** + * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true) */ enableColors : true, -
/** - * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true) + /** + * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true) */ enableAlignments : true, -
/** - * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true) + /** + * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true) */ enableLists : true, -
/** - * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true) + /** + * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true) */ enableSourceEdit : true, - /** - * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true) + /** + * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true) */ enableLinks : true, -
/** - * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true) + /** + * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true) */ enableFont : true, -
/** - * @cfg {String} createLinkText The default text for the create link prompt + /** + * @cfg {String} createLinkText The default text for the create link prompt */ createLinkText : 'Please enter the URL for the link:', -
/** - * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /) + /** + * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /) */ defaultLinkValue : 'http:/'+'/', -
/** - * @cfg {Array} fontFamilies An array of available font families + /** + * @cfg {Array} fontFamilies An array of available font families */ fontFamilies : [ 'Arial', @@ -101,133 +127,148 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { 'Verdana' ], defaultFont: 'tahoma', -
/** - * @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). + /** + * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &#160; (Non-breaking space) in Opera and IE6, &#8203; (Zero-width space) in all other browsers). */ - defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​', + defaultValue: (Ext.isOpera || Ext.isIE6) ? '&#160;' : '&#8203;', + + fieldBodyCls: Ext.baseCSSPrefix + 'html-editor-wrap', + + componentLayout: 'htmleditor', // private properties - actionMode: 'wrap', - validationEvent : false, - deferHeight: true, initialized : false, activated : false, sourceEditMode : false, - onFocus : Ext.emptyFn, iframePad:3, hideMode:'offsets', - defaultAutoCreate : { - tag: "textarea", - style:"width:500px;height:300px;", - autocomplete: "off" - }, + maskOnDisable: true, + // private initComponent : function(){ - this.addEvents( -
/** - * @event initialize + var me = this; + + me.addEvents( + /** + * @event initialize * Fires when the editor is fully initialized (including the iframe) - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this */ 'initialize', -
/** - * @event activate + /** + * @event activate * Fires when the editor is first receives the focus. Any insertion must wait * until after this event. - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this */ 'activate', -
/** - * @event beforesync + /** + * @event beforesync * Fires before the textarea is updated with content from the editor iframe. Return false * to cancel the sync. - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this * @param {String} html */ 'beforesync', -
/** - * @event beforepush + /** + * @event beforepush * Fires before the iframe editor is updated with content from the textarea. Return false * to cancel the push. - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this * @param {String} html */ 'beforepush', -
/** - * @event sync + /** + * @event sync * Fires when the textarea is updated with content from the editor iframe. - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this * @param {String} html */ 'sync', -
/** - * @event push + /** + * @event push * Fires when the iframe editor is updated with content from the textarea. - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this * @param {String} html */ 'push', -
/** - * @event editmodechange + /** + * @event editmodechange * Fires when the editor switches edit modes - * @param {HtmlEditor} this + * @param {Ext.form.field.HtmlEditor} this * @param {Boolean} sourceEdit True if source edit, false if standard editing. */ 'editmodechange' - ) - }, + ); - // private - createFontOptions : function(){ - var buf = [], fs = this.fontFamilies, ff, lc; - for(var i = 0, len = fs.length; i< len; i++){ - ff = fs[i]; - lc = ff.toLowerCase(); - buf.push( - '' - ); - } - return buf.join(''); + me.callParent(arguments); + + // Init mixins + me.initLabelable(); + 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 * add custom toolbar buttons. - * @param {HtmlEditor} editor + * @param {Ext.form.field.HtmlEditor} editor */ createToolbar : function(editor){ - var items = []; - var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled(); - + var me = this, + items = [], + tipsEnabled = Ext.tip.QuickTipManager && Ext.tip.QuickTipManager.isEnabled(), + baseCSSPrefix = Ext.baseCSSPrefix, + fontSelectItem, toolbar, undef; function btn(id, toggle, handler){ return { itemId : id, - cls : 'x-btn-icon', - iconCls: 'x-edit-'+id, + cls : baseCSSPrefix + 'btn-icon', + iconCls: baseCSSPrefix + 'edit-'+id, enableToggle:toggle !== false, scope: editor, handler:handler||editor.relayBtnCmd, clickEvent:'mousedown', - tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined, - overflowText: editor.buttonTips[id].title || undefined, + tooltip: tipsEnabled ? editor.buttonTips[id] || undef : undef, + overflowText: editor.buttonTips[id].title || undef, tabIndex:-1 }; } - if(this.enableFont && !Ext.isSafari2){ - var fontSelectItem = new Ext.Toolbar.Item({ - autoEl: { - tag:'select', - cls:'x-font-select', - html: this.createFontOptions() - } + if (me.enableFont && !Ext.isSafari2) { + fontSelectItem = Ext.widget('component', { + renderTpl: [ + '<select class="{cls}">', + '<tpl for="fonts">', + '<option value="{[values.toLowerCase()]}" style="font-family:{.}"<tpl if="values.toLowerCase()==parent.defaultFont"> selected</tpl>>{.}</option>', + '</tpl>', + '</select>' + ], + renderData: { + cls: baseCSSPrefix + 'font-select', + fonts: me.fontFamilies, + defaultFont: me.defaultFont + }, + renderSelectors: { + selectEl: 'select' + }, + onDisable: function() { + var selectEl = this.selectEl; + if (selectEl) { + selectEl.dom.disabled = true; + } + Ext.Component.superclass.onDisable.apply(this, arguments); + }, + onEnable: function() { + var selectEl = this.selectEl; + if (selectEl) { + selectEl.dom.disabled = false; + } + Ext.Component.superclass.onEnable.apply(this, arguments); + } }); items.push( @@ -236,7 +277,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { ); } - if(this.enableFormat){ + if (me.enableFormat) { items.push( btn('bold'), btn('italic'), @@ -244,70 +285,74 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { ); } - if(this.enableFontSize){ + if (me.enableFontSize) { items.push( '-', - btn('increasefontsize', false, this.adjustFont), - btn('decreasefontsize', false, this.adjustFont) + btn('increasefontsize', false, me.adjustFont), + btn('decreasefontsize', false, me.adjustFont) ); } - if(this.enableColors){ + if (me.enableColors) { items.push( '-', { - itemId:'forecolor', - cls:'x-btn-icon', - iconCls: 'x-edit-forecolor', - clickEvent:'mousedown', - tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined, + itemId: 'forecolor', + cls: baseCSSPrefix + 'btn-icon', + iconCls: baseCSSPrefix + 'edit-forecolor', + overflowText: editor.buttonTips.forecolor.title, + tooltip: tipsEnabled ? editor.buttonTips.forecolor || undef : undef, tabIndex:-1, - menu : new Ext.menu.ColorMenu({ - allowReselect: true, - focus: Ext.emptyFn, - value:'000000', - plain:true, - listeners: { - scope: this, - select: function(cp, color){ - this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color); - this.deferFocus(); + menu : Ext.widget('menu', { + plain: true, + items: [{ + xtype: 'colorpicker', + allowReselect: true, + focus: Ext.emptyFn, + value: '000000', + plain: true, + clickEvent: 'mousedown', + handler: function(cp, color) { + me.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color); + me.deferFocus(); + this.up('menu').hide(); } - }, - clickEvent:'mousedown' + }] }) }, { - itemId:'backcolor', - cls:'x-btn-icon', - iconCls: 'x-edit-backcolor', - clickEvent:'mousedown', - tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined, + itemId: 'backcolor', + cls: baseCSSPrefix + 'btn-icon', + iconCls: baseCSSPrefix + 'edit-backcolor', + overflowText: editor.buttonTips.backcolor.title, + tooltip: tipsEnabled ? editor.buttonTips.backcolor || undef : undef, tabIndex:-1, - menu : new Ext.menu.ColorMenu({ - focus: Ext.emptyFn, - value:'FFFFFF', - plain:true, - allowReselect: true, - listeners: { - scope: this, - select: function(cp, color){ - if(Ext.isGecko){ - this.execCmd('useCSS', false); - this.execCmd('hilitecolor', color); - this.execCmd('useCSS', true); - this.deferFocus(); - }else{ - this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color); - this.deferFocus(); + menu : Ext.widget('menu', { + plain: true, + items: [{ + xtype: 'colorpicker', + focus: Ext.emptyFn, + value: 'FFFFFF', + plain: true, + allowReselect: true, + clickEvent: 'mousedown', + handler: function(cp, color) { + if (Ext.isGecko) { + me.execCmd('useCSS', false); + me.execCmd('hilitecolor', color); + me.execCmd('useCSS', true); + me.deferFocus(); + } else { + me.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color); + me.deferFocus(); } + this.up('menu').hide(); } - }, - clickEvent:'mousedown' + }] }) } ); } - if(this.enableAlignments){ + if (me.enableAlignments) { items.push( '-', btn('justifyleft'), @@ -316,327 +361,330 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { ); } - if(!Ext.isSafari2){ - if(this.enableLinks){ + if (!Ext.isSafari2) { + if (me.enableLinks) { items.push( '-', - btn('createlink', false, this.createLink) + btn('createlink', false, me.createLink) ); } - if(this.enableLists){ + if (me.enableLists) { items.push( '-', btn('insertorderedlist'), btn('insertunorderedlist') ); } - if(this.enableSourceEdit){ + if (me.enableSourceEdit) { items.push( '-', btn('sourceedit', true, function(btn){ - this.toggleSourceEdit(!this.sourceEditMode); + me.toggleSourceEdit(!me.sourceEditMode); }) ); } - } - - // build the toolbar - var tb = new Ext.Toolbar({ - renderTo: this.wrap.dom.firstChild, - items: items - }); - - if (fontSelectItem) { - this.fontSelect = fontSelectItem.el; - - this.mon(this.fontSelect, 'change', function(){ - var font = this.fontSelect.dom.value; - this.relayCmd('fontname', font); - this.deferFocus(); - }, this); - } - - - // stop form submits - this.mon(tb.el, 'click', function(e){ - e.preventDefault(); - }); - - this.tb = tb; + } + + // build the toolbar + toolbar = Ext.widget('toolbar', { + renderTo: me.toolbarWrap, + enableOverflow: true, + items: items + }); + + if (fontSelectItem) { + me.fontSelect = fontSelectItem.selectEl; + + me.mon(me.fontSelect, 'change', function(){ + me.relayCmd('fontname', me.fontSelect.dom.value); + me.deferFocus(); + }); + } + + // stop form submits + me.mon(toolbar.el, 'click', function(e){ + e.preventDefault(); + }); + + me.toolbar = toolbar; }, - onDisable: function(){ - this.wrap.mask(); - Ext.form.HtmlEditor.superclass.onDisable.call(this); + onDisable: function() { + this.bodyEl.mask(); + this.callParent(arguments); }, - onEnable: function(){ - this.wrap.unmask(); - Ext.form.HtmlEditor.superclass.onEnable.call(this); + onEnable: function() { + this.bodyEl.unmask(); + this.callParent(arguments); }, - setReadOnly: function(readOnly){ - - Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly); - if(this.initialized){ - this.setDesignMode(!readOnly); - var bd = this.getEditorBody(); - if(bd){ - bd.style.cursor = this.readOnly ? 'default' : 'text'; - } - this.disableItems(readOnly); - } + /** + * Sets the read only state of this field. + * @param {Boolean} readOnly Whether the field should be read only. + */ + setReadOnly: function(readOnly) { + var me = this, + textareaEl = me.textareaEl, + iframeEl = me.iframeEl, + body; + + me.readOnly = readOnly; + + if (textareaEl) { + textareaEl.dom.readOnly = readOnly; + } + + if (me.initialized) { + body = me.getEditorBody(); + if (Ext.isIE) { + // Hide the iframe while setting contentEditable so it doesn't grab focus + iframeEl.setDisplayed(false); + body.contentEditable = !readOnly; + iframeEl.setDisplayed(true); + } else { + me.setDesignMode(!readOnly); + } + if (body) { + body.style.cursor = readOnly ? 'default' : 'text'; + } + me.disableItems(readOnly); + } }, -
/** - * Protected method that will not generally be called directly. It + /** + * 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 * 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. */ - getDocMarkup : function(){ - return ''; + getDocMarkup: function() { + var me = this, + h = me.iframeEl.getHeight() - me.iframePad * 2; + return Ext.String.format('<html><head><style type="text/css">body{border:0;margin:0;padding:{0}px;height:{1}px;cursor:text}</style></head><body></body></html>', me.iframePad, h); }, // private - getEditorBody : function(){ + getEditorBody: function() { var doc = this.getDoc(); return doc.body || doc.documentElement; }, // private - getDoc : function(){ - return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document); + getDoc: function() { + return (!Ext.isIE && this.iframeEl.dom.contentDocument) || this.getWin().document; }, // private - getWin : function(){ - return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name]; + getWin: function() { + return Ext.isIE ? this.iframeEl.dom.contentWindow : window.frames[this.iframeEl.dom.name]; }, // private - onRender : function(ct, position){ - Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position); - this.el.dom.style.border = '0 none'; - this.el.dom.setAttribute('tabIndex', -1); - this.el.addClass('x-hidden'); - if(Ext.isIE){ // fix IE 1px bogus margin - this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;') - } - this.wrap = this.el.wrap({ - cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'} + onRender: function() { + var me = this, + renderSelectors = me.renderSelectors; + + Ext.applyIf(renderSelectors, me.getLabelableSelectors()); + + Ext.applyIf(renderSelectors, { + toolbarWrap: 'div.' + Ext.baseCSSPrefix + 'html-editor-tb', + iframeEl: 'iframe', + textareaEl: 'textarea' }); - this.createToolbar(this); + me.callParent(arguments); - this.disableItems(true); + me.textareaEl.dom.value = me.value || ''; - this.tb.doLayout(); + // Start polling for when the iframe document is ready to be manipulated + me.monitorTask = Ext.TaskManager.start({ + run: me.checkDesignMode, + scope: me, + interval:100 + }); - this.createIFrame(); + me.createToolbar(me); + me.disableItems(true); + }, - if(!this.width){ - var sz = this.el.getSize(); - this.setSize(sz.width, this.height || sz.height); + initRenderTpl: function() { + var me = this; + if (!me.hasOwnProperty('renderTpl')) { + me.renderTpl = me.getTpl('labelableRenderTpl'); } - this.resizeEl = this.positionEl = this.wrap; + return me.callParent(); }, - createIFrame: function(){ - var iframe = document.createElement('iframe'); - iframe.name = Ext.id(); - iframe.frameBorder = '0'; - iframe.style.overflow = 'auto'; + initRenderData: function() { + return Ext.applyIf(this.callParent(), this.getLabelableRenderData()); + }, - this.wrap.dom.appendChild(iframe); - this.iframe = iframe; + getSubTplData: function() { + var cssPrefix = Ext.baseCSSPrefix; + return { + toolbarWrapCls: cssPrefix + 'html-editor-tb', + textareaCls: cssPrefix + 'hidden', + iframeName: Ext.id(), + iframeSrc: Ext.SSL_SECURE_URL, + size: 'height:100px;' + }; + }, - this.monitorTask = Ext.TaskMgr.start({ - run: this.checkDesignMode, - scope: this, - interval:100 - }); + getSubTplMarkup: function() { + return this.getTpl('fieldSubTpl').apply(this.getSubTplData()); }, - initFrame : function(){ - Ext.TaskMgr.stop(this.monitorTask); - var doc = this.getDoc(); - this.win = this.getWin(); + getBodyNaturalWidth: function() { + return 565; + }, + + initFrameDoc: function() { + var me = this, + doc, task; + + Ext.TaskManager.stop(me.monitorTask); + + doc = me.getDoc(); + me.win = me.getWin(); doc.open(); - doc.write(this.getDocMarkup()); + doc.write(me.getDocMarkup()); doc.close(); - var task = { // must defer to wait for browser to be ready - run : function(){ - var doc = this.getDoc(); - if(doc.body || doc.readyState == 'complete'){ - Ext.TaskMgr.stop(task); - this.setDesignMode(true); - this.initEditor.defer(10, this); + task = { // must defer to wait for browser to be ready + run: function() { + var doc = me.getDoc(); + if (doc.body || doc.readyState === 'complete') { + Ext.TaskManager.stop(task); + me.setDesignMode(true); + Ext.defer(me.initEditor, 10, me); } }, interval : 10, duration:10000, - scope: this + scope: me }; - Ext.TaskMgr.start(task); + Ext.TaskManager.start(task); }, - - checkDesignMode : function(){ - if(this.wrap && this.wrap.dom.offsetWidth){ - var doc = this.getDoc(); - if(!doc){ - return; - } - if(!doc.editorInitialized || this.getDesignMode() != 'on'){ - this.initFrame(); - } + checkDesignMode: function() { + var me = this, + doc = me.getDoc(); + if (doc && (!doc.editorInitialized || me.getDesignMode() !== 'on')) { + me.initFrameDoc(); } }, - - /* private - * set current design mode. To enable, mode can be true or 'on', off otherwise - */ - setDesignMode : function(mode){ - var doc ; - if(doc = this.getDoc()){ - if(this.readOnly){ - mode = false; - } - doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off'; - } - - }, - - // private - getDesignMode : function(){ - var doc = this.getDoc(); - if(!doc){ return ''; } - return String(doc.designMode).toLowerCase(); - - }, - - disableItems: function(disabled){ - if(this.fontSelect){ - this.fontSelect.dom.disabled = disabled; - } - this.tb.items.each(function(item){ - if(item.getItemId() != 'sourceedit'){ - item.setDisabled(disabled); + + /* private + * set current design mode. To enable, mode can be true or 'on', off otherwise + */ + setDesignMode: function(mode) { + var me = this, + doc = me.getDoc(); + if (doc) { + if (me.readOnly) { + mode = false; } - }); + doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off'; + } }, // private - onResize : function(w, h){ - Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments); - if(this.el && this.iframe){ - if(Ext.isNumber(w)){ - var aw = w - this.wrap.getFrameWidth('lr'); - this.el.setWidth(aw); - this.tb.setWidth(aw); - this.iframe.style.width = Math.max(aw, 0) + 'px'; - } - if(Ext.isNumber(h)){ - var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight(); - this.el.setHeight(ah); - this.iframe.style.height = Math.max(ah, 0) + 'px'; - var bd = this.getEditorBody(); - if(bd){ - bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px'; - } + getDesignMode: function() { + var doc = this.getDoc(); + return !doc ? '' : String(doc.designMode).toLowerCase(); + }, + + disableItems: function(disabled) { + this.getToolbar().items.each(function(item){ + if(item.getItemId() !== 'sourceedit'){ + item.setDisabled(disabled); } - } + }); }, -
/** - * Toggles the editor between standard and source edit mode. - * @param {Boolean} sourceEdit (optional) True for source edit, false for standard + /** + * Toggles the editor between standard and source edit mode. + * @param {Boolean} sourceEditMode (optional) True for source edit, false for standard */ - toggleSourceEdit : function(sourceEditMode){ - if(sourceEditMode === undefined){ - sourceEditMode = !this.sourceEditMode; + toggleSourceEdit: function(sourceEditMode) { + var me = this, + iframe = me.iframeEl, + textarea = me.textareaEl, + hiddenCls = Ext.baseCSSPrefix + 'hidden', + btn = me.getToolbar().getComponent('sourceedit'); + + if (!Ext.isBoolean(sourceEditMode)) { + sourceEditMode = !me.sourceEditMode; } - this.sourceEditMode = sourceEditMode === true; - var btn = this.tb.getComponent('sourceedit'); + me.sourceEditMode = sourceEditMode; - if(btn.pressed !== this.sourceEditMode){ - btn.toggle(this.sourceEditMode); - if(!btn.xtbHidden){ - return; - } + if (btn.pressed !== sourceEditMode) { + btn.toggle(sourceEditMode); } - if(this.sourceEditMode){ - this.disableItems(true); - this.syncValue(); - this.iframe.className = 'x-hidden'; - this.el.removeClass('x-hidden'); - this.el.dom.removeAttribute('tabIndex'); - this.el.focus(); - }else{ - if(this.initialized){ - this.disableItems(this.readOnly); - } - this.pushValue(); - this.iframe.className = ''; - this.el.addClass('x-hidden'); - this.el.dom.setAttribute('tabIndex', -1); - this.deferFocus(); + if (sourceEditMode) { + me.disableItems(true); + me.syncValue(); + iframe.addCls(hiddenCls); + textarea.removeCls(hiddenCls); + textarea.dom.removeAttribute('tabIndex'); + textarea.focus(); } - var lastSize = this.lastSize; - if(lastSize){ - delete this.lastSize; - this.setSize(lastSize); + else { + if (me.initialized) { + me.disableItems(me.readOnly); + } + me.pushValue(); + iframe.removeCls(hiddenCls); + textarea.addCls(hiddenCls); + textarea.dom.setAttribute('tabIndex', -1); + me.deferFocus(); } - this.fireEvent('editmodechange', this, this.sourceEditMode); + me.fireEvent('editmodechange', me, sourceEditMode); + me.doComponentLayout(); }, // private used internally - createLink : function(){ + createLink : function() { var url = prompt(this.createLinkText, this.defaultLinkValue); - if(url && url != 'http:/'+'/'){ + if (url && url !== 'http:/'+'/') { this.relayCmd('createlink', url); } }, - // private - initEvents : function(){ - this.originalValue = this.getValue(); - }, - -
/** - * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide - * @method - */ - markInvalid : Ext.emptyFn, - -
/** - * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide - * @method - */ - clearInvalid : Ext.emptyFn, + clearInvalid: Ext.emptyFn, // docs inherit from Field - setValue : function(v){ - Ext.form.HtmlEditor.superclass.setValue.call(this, v); - this.pushValue(); + setValue: function(value) { + var me = this, + textarea = me.textareaEl; + me.mixins.field.setValue.call(me, value); + if (value === null || value === undefined) { + value = ''; + } + if (textarea) { + textarea.dom.value = value; + } + me.pushValue(); return this; }, -
/** - * Protected method that will not generally be called directly. If you need/want + /** + * Protected method that will not generally be called directly. 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 */ cleanHtml: function(html) { html = String(html); - if(Ext.isWebKit){ // strip safari nonsense - html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, ''); + if (Ext.isWebKit) { // strip safari nonsense + html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, ''); } /* @@ -644,99 +692,105 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * value and compares it to the character code of the first character in the string * because it can cause encoding issues when posted to the server. */ - if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){ + if (html.charCodeAt(0) === this.defaultValue.replace(/\D/g, '')) { html = html.substring(1); } return html; }, -
/** - * Protected method that will not generally be called directly. Syncs the contents + /** + * @protected method that will not generally be called directly. Syncs the contents * of the editor iframe with the textarea. */ syncValue : function(){ - if(this.initialized){ - var bd = this.getEditorBody(); - var html = bd.innerHTML; - if(Ext.isWebKit){ - var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element! - var m = bs.match(/text-align:(.*?);/i); - if(m && m[1]){ - html = '
' + html + '
'; + var me = this, + body, html, bodyStyle, match; + if (me.initialized) { + body = me.getEditorBody(); + html = body.innerHTML; + if (Ext.isWebKit) { + bodyStyle = body.getAttribute('style'); // Safari puts text-align styles on the body element! + match = bodyStyle.match(/text-align:(.*?);/i); + if (match && match[1]) { + html = '<div style="' + match[0] + '">' + html + '</div>'; } } - html = this.cleanHtml(html); - if(this.fireEvent('beforesync', this, html) !== false){ - this.el.dom.value = html; - this.fireEvent('sync', this, html); + html = me.cleanHtml(html); + if (me.fireEvent('beforesync', me, html) !== false) { + me.textareaEl.dom.value = html; + me.fireEvent('sync', me, html); } } }, //docs inherit from Field getValue : function() { - this[this.sourceEditMode ? 'pushValue' : 'syncValue'](); - return Ext.form.HtmlEditor.superclass.getValue.call(this); + var me = this, + value; + if (!me.sourceEditMode) { + me.syncValue(); + } + value = me.rendered ? me.textareaEl.dom.value : me.value; + me.value = value; + return value; }, -
/** - * Protected method that will not generally be called directly. Pushes the value of the textarea + /** + * @protected method that will not generally be called directly. Pushes the value of the textarea * into the iframe editor. */ - pushValue : function(){ - if(this.initialized){ - var v = this.el.dom.value; - if(!this.activated && v.length < 1){ - v = this.defaultValue; + pushValue: function() { + var me = this, + v; + if(me.initialized){ + v = me.textareaEl.dom.value || ''; + if (!me.activated && v.length < 1) { + v = me.defaultValue; } - if(this.fireEvent('beforepush', this, v) !== false){ - this.getEditorBody().innerHTML = v; - if(Ext.isGecko){ + if (me.fireEvent('beforepush', me, v) !== false) { + me.getEditorBody().innerHTML = v; + if (Ext.isGecko) { // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8 - this.setDesignMode(false); //toggle off first - + me.setDesignMode(false); //toggle off first + me.setDesignMode(true); } - this.setDesignMode(true); - this.fireEvent('push', this, v); + me.fireEvent('push', me, v); } - } }, // private deferFocus : function(){ - this.focus.defer(10, this); + this.focus(false, true); }, - // docs inherit from Field - focus : function(){ - if(this.win && !this.sourceEditMode){ - this.win.focus(); - }else{ - this.el.focus(); - } + getFocusEl: function() { + var me = this, + win = me.win; + return win && !me.sourceEditMode ? win : me.textareaEl; }, // private initEditor : function(){ //Destroying the component during/before initEditor can cause issues. - try{ - var dbody = this.getEditorBody(), - ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat'), + try { + var me = this, + dbody = me.getEditorBody(), + ss = me.textareaEl.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'), doc, fn; ss['background-attachment'] = 'fixed'; // w3c dbody.bgProperties = 'fixed'; // ie - Ext.DomHelper.applyStyles(dbody, ss); + Ext.core.DomHelper.applyStyles(dbody, ss); - doc = this.getDoc(); + doc = me.getDoc(); - if(doc){ - try{ + if (doc) { + try { Ext.EventManager.removeAll(doc); - }catch(e){} + } catch(e) {} } /* @@ -745,7 +799,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function. */ - fn = this.onEditorEvent.createDelegate(this); + fn = Ext.Function.bind(me.onEditorEvent, me); Ext.EventManager.on(doc, { mousedown: fn, dblclick: fn, @@ -754,190 +808,246 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { buffer:100 }); - if(Ext.isGecko){ - Ext.EventManager.on(doc, 'keypress', this.applyCommand, this); + // These events need to be relayed from the inner document (where they stop + // bubbling) up to the outer document. This has to be done at the DOM level so + // the event reaches listeners on elements like the document body. The effected + // mechanisms that depend on this bubbling behavior are listed to the right + // of the event. + fn = me.onRelayedEvent; + Ext.EventManager.on(doc, { + mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront) + mousemove: fn, // window resize drag detection + mouseup: fn, // window resize termination + click: fn, // not sure, but just to be safe + dblclick: fn, // not sure again + scope: me + }); + + if (Ext.isGecko) { + Ext.EventManager.on(doc, 'keypress', me.applyCommand, me); } - if(Ext.isIE || Ext.isWebKit || Ext.isOpera){ - Ext.EventManager.on(doc, 'keydown', this.fixKeys, this); + if (me.fixKeys) { + Ext.EventManager.on(doc, 'keydown', me.fixKeys, me); } + + // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK! + Ext.EventManager.on(window, 'unload', me.beforeDestroy, me); doc.editorInitialized = true; - this.initialized = true; - this.pushValue(); - this.setReadOnly(this.readOnly); - this.fireEvent('initialize', this); - }catch(e){} + + me.initialized = true; + me.pushValue(); + me.setReadOnly(me.readOnly); + me.fireEvent('initialize', me); + } catch(ex) { + // ignore (why?) + } }, // private - onDestroy : function(){ - if(this.monitorTask){ - Ext.TaskMgr.stop(this.monitorTask); + beforeDestroy : function(){ + var me = this, + monitorTask = me.monitorTask, + doc, prop; + + if (monitorTask) { + Ext.TaskManager.stop(monitorTask); } - if(this.rendered){ - Ext.destroy(this.tb); - var doc = this.getDoc(); - if(doc){ - try{ + if (me.rendered) { + try { + doc = me.getDoc(); + if (doc) { Ext.EventManager.removeAll(doc); - for (var prop in doc){ - delete doc[prop]; + for (prop in doc) { + if (doc.hasOwnProperty(prop)) { + delete doc[prop]; + } } - }catch(e){} - } - if(this.wrap){ - this.wrap.dom.innerHTML = ''; - this.wrap.remove(); + } + } catch(e) { + // ignore (why?) } + Ext.destroyMembers('tb', 'toolbarWrap', 'iframeEl', 'textareaEl'); } + me.callParent(); + }, - if(this.el){ - this.el.removeAllListeners(); - this.el.remove(); - } - this.purgeListeners(); + // private + onRelayedEvent: function (event) { + // relay event from the iframe's document to the document that owns the iframe... + + var iframeEl = this.iframeEl, + iframeXY = iframeEl.getXY(), + eventXY = event.getXY(); + + // the event from the inner document has XY relative to that document's origin, + // so adjust it to use the origin of the iframe in the outer document: + event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]]; + + event.injectEvent(iframeEl); // blame the iframe for the event... + + event.xy = eventXY; // restore the original XY (just for safety) }, // private onFirstFocus : function(){ - this.activated = true; - this.disableItems(this.readOnly); - if(Ext.isGecko){ // prevent silly gecko errors - this.win.focus(); - var s = this.win.getSelection(); - if(!s.focusNode || s.focusNode.nodeType != 3){ - var r = s.getRangeAt(0); - r.selectNodeContents(this.getEditorBody()); - r.collapse(true); - this.deferFocus(); + var me = this, + selection, range; + me.activated = true; + me.disableItems(me.readOnly); + if (Ext.isGecko) { // prevent silly gecko errors + me.win.focus(); + selection = me.win.getSelection(); + if (!selection.focusNode || selection.focusNode.nodeType !== 3) { + range = selection.getRangeAt(0); + range.selectNodeContents(me.getEditorBody()); + range.collapse(true); + me.deferFocus(); + } + try { + me.execCmd('useCSS', true); + me.execCmd('styleWithCSS', false); + } catch(e) { + // ignore (why?) } - try{ - this.execCmd('useCSS', true); - this.execCmd('styleWithCSS', false); - }catch(e){} } - this.fireEvent('activate', this); + me.fireEvent('activate', me); }, // private - adjustFont: function(btn){ - var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1, - doc = this.getDoc(), - v = parseInt(doc.queryCommandValue('FontSize') || 2, 10); - if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){ + adjustFont: function(btn) { + var adjust = btn.getItemId() === 'increasefontsize' ? 1 : -1, + size = this.getDoc().queryCommandValue('FontSize') || '2', + isPxSize = Ext.isString(size) && size.indexOf('px') !== -1, + isSafari; + size = parseInt(size, 10); + if (isPxSize) { // Safari 3 values // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px - if(v <= 10){ - v = 1 + adjust; - }else if(v <= 13){ - v = 2 + adjust; - }else if(v <= 16){ - v = 3 + adjust; - }else if(v <= 18){ - v = 4 + adjust; - }else if(v <= 24){ - v = 5 + adjust; - }else { - v = 6 + adjust; + if (size <= 10) { + size = 1 + adjust; + } + else if (size <= 13) { + size = 2 + adjust; + } + else if (size <= 16) { + size = 3 + adjust; + } + else if (size <= 18) { + size = 4 + adjust; + } + else if (size <= 24) { + size = 5 + adjust; } - v = v.constrain(1, 6); - }else{ - if(Ext.isSafari){ // safari + else { + size = 6 + adjust; + } + size = Ext.Number.constrain(size, 1, 6); + } else { + isSafari = Ext.isSafari; + if (isSafari) { // safari adjust *= 2; } - v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0); + size = Math.max(1, size + adjust) + (isSafari ? 'px' : 0); } - this.execCmd('FontSize', v); + this.execCmd('FontSize', size); }, // private - onEditorEvent : function(e){ + onEditorEvent: function(e) { this.updateToolbar(); }, - -
/** - * Protected method that will not generally be called directly. It triggers + /** + * 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. */ - updateToolbar: function(){ + updateToolbar: function() { + var me = this, + btns, doc, name, fontSelect; - if(this.readOnly){ + if (me.readOnly) { return; } - if(!this.activated){ - this.onFirstFocus(); + if (!me.activated) { + me.onFirstFocus(); return; } - var btns = this.tb.items.map, - doc = this.getDoc(); + btns = me.getToolbar().items.map; + doc = me.getDoc(); - if(this.enableFont && !Ext.isSafari2){ - var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase(); - if(name != this.fontSelect.dom.value){ - this.fontSelect.dom.value = name; + if (me.enableFont && !Ext.isSafari2) { + name = (doc.queryCommandValue('FontName') || me.defaultFont).toLowerCase(); + fontSelect = me.fontSelect.dom; + if (name !== fontSelect.value) { + fontSelect.value = name; } } - if(this.enableFormat){ - btns.bold.toggle(doc.queryCommandState('bold')); - btns.italic.toggle(doc.queryCommandState('italic')); - btns.underline.toggle(doc.queryCommandState('underline')); + + function updateButtons() { + Ext.Array.forEach(Ext.Array.toArray(arguments), function(name) { + btns[name].toggle(doc.queryCommandState(name)); + }); } - if(this.enableAlignments){ - btns.justifyleft.toggle(doc.queryCommandState('justifyleft')); - btns.justifycenter.toggle(doc.queryCommandState('justifycenter')); - btns.justifyright.toggle(doc.queryCommandState('justifyright')); + if(me.enableFormat){ + updateButtons('bold', 'italic', 'underline'); } - if(!Ext.isSafari2 && this.enableLists){ - btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist')); - btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist')); + if(me.enableAlignments){ + updateButtons('justifyleft', 'justifycenter', 'justifyright'); + } + if(!Ext.isSafari2 && me.enableLists){ + updateButtons('insertorderedlist', 'insertunorderedlist'); } - Ext.menu.MenuMgr.hideAll(); + Ext.menu.Manager.hideAll(); - this.syncValue(); + me.syncValue(); }, // private - relayBtnCmd : function(btn){ + relayBtnCmd: function(btn) { this.relayCmd(btn.getItemId()); }, -
/** - * 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. + /** + * Executes a Midas editor command on the editor document and performs necessary focus and + * toolbar updates. <b>This should only be called after the editor is initialized.</b> * @param {String} cmd The Midas command * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null) */ - relayCmd : function(cmd, value){ - (function(){ - this.focus(); - this.execCmd(cmd, value); - this.updateToolbar(); - }).defer(10, this); + relayCmd: function(cmd, value) { + Ext.defer(function() { + var me = this; + me.focus(); + me.execCmd(cmd, value); + me.updateToolbar(); + }, 10, this); }, -
/** - * Executes a Midas editor command directly on the editor document. + /** + * 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. + * <b>This should only be called after the editor is initialized.</b> * @param {String} cmd The Midas command * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null) */ execCmd : function(cmd, value){ - var doc = this.getDoc(); - doc.execCommand(cmd, false, value === undefined ? null : value); - this.syncValue(); + var me = this, + doc = me.getDoc(), + undef; + doc.execCommand(cmd, false, value === undef ? null : value); + me.syncValue(); }, // private applyCommand : function(e){ - if(e.ctrlKey){ - var c = e.getCharCode(), cmd; - if(c > 0){ + if (e.ctrlKey) { + var me = this, + c = e.getCharCode(), cmd; + if (c > 0) { c = String.fromCharCode(c); - switch(c){ + switch (c) { case 'b': cmd = 'bold'; break; @@ -948,108 +1058,118 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { cmd = 'underline'; break; } - if(cmd){ - this.win.focus(); - this.execCmd(cmd); - this.deferFocus(); + if (cmd) { + me.win.focus(); + me.execCmd(cmd); + me.deferFocus(); e.preventDefault(); } } } }, -
/** - * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated + /** + * 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){ - if(!this.activated){ - return; - } - if(Ext.isIE){ - this.win.focus(); - var doc = this.getDoc(), - r = doc.selection.createRange(); - if(r){ - r.pasteHTML(text); - this.syncValue(); - this.deferFocus(); + var me = this, + range; + + if (me.activated) { + me.win.focus(); + if (Ext.isIE) { + range = me.getDoc().selection.createRange(); + if (range) { + range.pasteHTML(text); + me.syncValue(); + me.deferFocus(); + } + }else{ + me.execCmd('InsertHTML', text); + me.deferFocus(); } - }else{ - this.win.focus(); - this.execCmd('InsertHTML', text); - this.deferFocus(); } }, // private - fixKeys : function(){ // load time branching for fastest keydown performance - if(Ext.isIE){ + fixKeys: function() { // load time branching for fastest keydown performance + if (Ext.isIE) { return function(e){ - var k = e.getKey(), - doc = this.getDoc(), - r; - if(k == e.TAB){ + var me = this, + k = e.getKey(), + doc = me.getDoc(), + range, target; + if (k === e.TAB) { e.stopEvent(); - r = doc.selection.createRange(); - if(r){ - r.collapse(true); - r.pasteHTML('    '); - this.deferFocus(); + range = doc.selection.createRange(); + if(range){ + range.collapse(true); + range.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;'); + me.deferFocus(); } - }else if(k == e.ENTER){ - r = doc.selection.createRange(); - if(r){ - var target = r.parentElement(); - if(!target || target.tagName.toLowerCase() != 'li'){ + } + else if (k === e.ENTER) { + range = doc.selection.createRange(); + if (range) { + target = range.parentElement(); + if(!target || target.tagName.toLowerCase() !== 'li'){ e.stopEvent(); - r.pasteHTML('
'); - r.collapse(false); - r.select(); + range.pasteHTML('<br />'); + range.collapse(false); + range.select(); } } } }; - }else if(Ext.isOpera){ + } + + if (Ext.isOpera) { return function(e){ - var k = e.getKey(); - if(k == e.TAB){ + var me = this; + if (e.getKey() === e.TAB) { e.stopEvent(); - this.win.focus(); - this.execCmd('InsertHTML','    '); - this.deferFocus(); + me.win.focus(); + me.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;'); + me.deferFocus(); } }; - }else if(Ext.isWebKit){ + } + + if (Ext.isWebKit) { return function(e){ - var k = e.getKey(); - if(k == e.TAB){ + var me = this, + k = e.getKey(); + if (k === e.TAB) { e.stopEvent(); - this.execCmd('InsertText','\t'); - this.deferFocus(); - }else if(k == e.ENTER){ + me.execCmd('InsertText','\t'); + me.deferFocus(); + } + else if (k === e.ENTER) { e.stopEvent(); - this.execCmd('InsertHtml','

'); - this.deferFocus(); + me.execCmd('InsertHtml','<br /><br />'); + me.deferFocus(); } - }; + }; } + + return null; // not needed, so null }(), -
/** - * Returns the editor's toolbar. This is only available after the editor has been rendered. - * @return {Ext.Toolbar} + /** + * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b> + * @return {Ext.toolbar.Toolbar} */ getToolbar : function(){ - return this.tb; + return this.toolbar; }, -
/** - * Object collection of toolbar tooltips for the buttons in the editor. The key + /** + * 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: -

+<pre><code>
 {
     bold : {
         title: 'Bold (Ctrl+B)',
@@ -1062,195 +1182,135 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         cls: 'x-html-editor-tip'
     },
     ...
-
+</code></pre> * @type Object */ buttonTips : { bold : { title: 'Bold (Ctrl+B)', text: 'Make the selected text bold.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, italic : { title: 'Italic (Ctrl+I)', text: 'Make the selected text italic.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, underline : { title: 'Underline (Ctrl+U)', text: 'Underline the selected text.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, increasefontsize : { title: 'Grow Text', text: 'Increase the font size.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, decreasefontsize : { title: 'Shrink Text', text: 'Decrease the font size.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, backcolor : { title: 'Text Highlight Color', text: 'Change the background color of the selected text.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, forecolor : { title: 'Font Color', text: 'Change the color of the selected text.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, justifyleft : { title: 'Align Text Left', text: 'Align text to the left.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, justifycenter : { title: 'Center Text', text: 'Center text in the editor.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, justifyright : { title: 'Align Text Right', text: 'Align text to the right.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, insertunorderedlist : { title: 'Bullet List', text: 'Start a bulleted list.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, insertorderedlist : { title: 'Numbered List', text: 'Start a numbered list.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, createlink : { title: 'Hyperlink', text: 'Make the selected text a hyperlink.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' }, sourceedit : { title: 'Source Edit', text: 'Switch to source editing mode.', - cls: 'x-html-editor-tip' + cls: Ext.baseCSSPrefix + 'html-editor-tip' } } // hide stuff that is not compatible -
/** - * @event blur + /** + * @event blur * @hide */ -
/** - * @event change + /** + * @event change * @hide */ -
/** - * @event focus + /** + * @event focus * @hide */ -
/** - * @event specialkey + /** + * @event specialkey * @hide */ -
/** - * @cfg {String} fieldClass @hide - */ -
/** - * @cfg {String} focusClass @hide - */ -
/** - * @cfg {String} autoCreate @hide - */ -
/** - * @cfg {String} inputType @hide - */ -
/** - * @cfg {String} invalidClass @hide - */ -
/** - * @cfg {String} invalidText @hide - */ -
/** - * @cfg {String} msgFx @hide + /** + * @cfg {String} fieldCls @hide */ -
/** - * @cfg {String} validateOnBlur @hide + /** + * @cfg {String} focusCls @hide */ -
/** - * @cfg {Boolean} allowDomMove @hide + /** + * @cfg {String} autoCreate @hide */ -
/** - * @cfg {String} applyTo @hide + /** + * @cfg {String} inputType @hide */ -
/** - * @cfg {String} autoHeight @hide + /** + * @cfg {String} invalidCls @hide */ -
/** - * @cfg {String} autoWidth @hide + /** + * @cfg {String} invalidText @hide */ -
/** - * @cfg {String} cls @hide + /** + * @cfg {String} msgFx @hide */ -
/** - * @cfg {String} disabled @hide + /** + * @cfg {Boolean} allowDomMove @hide */ -
/** - * @cfg {String} disabledClass @hide + /** + * @cfg {String} applyTo @hide */ -
/** - * @cfg {String} msgTarget @hide + /** + * @cfg {String} readOnly @hide */ -
/** - * @cfg {String} readOnly @hide - */ -
/** - * @cfg {String} style @hide - */ -
/** - * @cfg {String} validationDelay @hide - */ -
/** - * @cfg {String} validationEvent @hide - */ -
/** - * @cfg {String} tabIndex @hide - */ -
/** - * @property disabled - * @hide - */ -
/** - * @method applyToMarkup - * @hide - */ -
/** - * @method disable - * @hide - */ -
/** - * @method enable - * @hide - */ -
/** - * @method validate - * @hide - */ -
/** - * @event valid - * @hide - */ -
/** - * @method setDisabled - * @hide + /** + * @cfg {String} tabIndex @hide */ -
/** - * @cfg keys + /** + * @method validate * @hide */ }); -Ext.reg('htmleditor', Ext.form.HtmlEditor);
- - \ No newline at end of file +
\ No newline at end of file