X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/source/HtmlEditor.html?ds=sidebyside diff --git a/docs/source/HtmlEditor.html b/docs/source/HtmlEditor.html index 963b9d24..fe1d6809 100644 --- a/docs/source/HtmlEditor.html +++ b/docs/source/HtmlEditor.html @@ -1,12 +1,18 @@ - -
- -/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.form.HtmlEditor * @extends Ext.form.Field * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be @@ -175,7 +181,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * @param {Boolean} sourceEdit True if source edit, false if standard editing. */ 'editmodechange' - ) + ); }, // private @@ -202,8 +208,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { */ createToolbar : function(editor){ var items = []; - var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled(); - + var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled(); + function btn(id, toggle, handler){ return { @@ -221,15 +227,15 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { } - if(this.enableFont && !Ext.isSafari2){ - var fontSelectItem = new Ext.Toolbar.Item({ - autoEl: { - tag:'select', - cls:'x-font-select', - html: this.createFontOptions() - } + if(this.enableFont && !Ext.isSafari2){ + var fontSelectItem = new Ext.Toolbar.Item({ + autoEl: { + tag:'select', + cls:'x-font-select', + html: this.createFontOptions() + } }); - + items.push( fontSelectItem, '-' @@ -339,33 +345,31 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { }) ); } - } - - // 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(); - }); - - - + } + + // 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; + this.tb.doLayout(); }, onDisable: function(){ @@ -379,24 +383,32 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { }, setReadOnly: function(readOnly){ + + Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly); if(this.initialized){ - var newDM = readOnly ? 'off' : 'on', - doc = this.getDoc(); - if(String(doc.designMode).toLowerCase() != newDM){ - doc.designMode = newDM; + if(Ext.isIE){ + this.getEditorBody().contentEditable = !readOnly; + }else{ + this.setDesignMode(!readOnly); + } + var bd = this.getEditorBody(); + if(bd){ + bd.style.cursor = this.readOnly ? 'default' : 'text'; } - this.disableItems(!readOnly); + this.disableItems(readOnly); } - Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly); }, /** * 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 */ getDocMarkup : function(){ - return ''; + var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2; + return String.format('', this.iframePad, h); }, // private @@ -422,7 +434,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { 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.el.applyStyles('margin-top:-1px;margin-bottom:-1px;'); } this.wrap = this.el.wrap({ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'} @@ -431,8 +443,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.createToolbar(this); this.disableItems(true); - // is this needed? - // this.tb.doLayout(); + + this.tb.doLayout(); this.createIFrame(); @@ -447,9 +459,9 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { var iframe = document.createElement('iframe'); iframe.name = Ext.id(); iframe.frameBorder = '0'; - iframe.src = Ext.SSL_SECURE_URL; - this.wrap.dom.appendChild(iframe); + iframe.style.overflow = 'auto'; + this.wrap.dom.appendChild(iframe); this.iframe = iframe; this.monitorTask = Ext.TaskMgr.start({ @@ -473,7 +485,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { var doc = this.getDoc(); if(doc.body || doc.readyState == 'complete'){ Ext.TaskMgr.stop(task); - doc.designMode="on"; + this.setDesignMode(true); this.initEditor.defer(10, this); } }, @@ -491,12 +503,34 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { if(!doc){ return; } - if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){ + if(!doc.editorInitialized || this.getDesignMode() != 'on'){ this.initFrame(); } } }, + /* 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; @@ -535,45 +569,55 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * @param {Boolean} sourceEdit (optional) True for source edit, false for standard */ toggleSourceEdit : function(sourceEditMode){ - if(sourceEditMode === undefined){ + var iframeHeight, + elHeight, + ls; + + if (sourceEditMode === undefined) { sourceEditMode = !this.sourceEditMode; } this.sourceEditMode = sourceEditMode === true; var btn = this.tb.getComponent('sourceedit'); - - if(btn.pressed !== this.sourceEditMode){ + + if (btn.pressed !== this.sourceEditMode) { btn.toggle(this.sourceEditMode); - if(!btn.xtbHidden){ + if (!btn.xtbHidden) { return; } } - if(this.sourceEditMode){ + if (this.sourceEditMode) { + // grab the height of the containing panel before we hide the iframe + ls = this.getSize(); + + iframeHeight = Ext.get(this.iframe).getHeight(); + 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.readOnly){ - this.disableItems(false); + this.el.dom.style.height = iframeHeight + 'px'; + } + else { + elHeight = parseInt(this.el.dom.style.height, 10); + 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(); - } - var lastSize = this.lastSize; - if(lastSize){ - delete this.lastSize; - this.setSize(lastSize); + + this.setSize(ls); + this.iframe.style.height = elHeight + 'px'; } this.fireEvent('editmodechange', this, this.sourceEditMode); }, // private used internally - createLink : function(){ + createLink : function() { var url = prompt(this.createLinkText, this.defaultLinkValue); if(url && url != 'http:/'+'/'){ this.relayCmd('createlink', url); @@ -670,14 +714,12 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.getEditorBody().innerHTML = v; if(Ext.isGecko){ // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8 - var d = this.getDoc(), - mode = d.designMode.toLowerCase(); - - d.designMode = mode.toggle('on', 'off'); - d.designMode = mode; + this.setDesignMode(false); //toggle off first + this.setDesignMode(true); } this.fireEvent('push', this, v); } + } }, @@ -700,15 +742,15 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { //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'), + ss = this.el.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); - + doc = this.getDoc(); if(doc){ @@ -767,7 +809,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.wrap.remove(); } } - + if(this.el){ this.el.removeAllListeners(); this.el.remove(); @@ -778,7 +820,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { // private onFirstFocus : function(){ this.activated = true; - this.disableItems(false); + this.disableItems(this.readOnly); if(Ext.isGecko){ // prevent silly gecko errors this.win.focus(); var s = this.win.getSelection(); @@ -848,7 +890,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { return; } - var btns = this.tb.items.map, + var btns = this.tb.items.map, doc = this.getDoc(); if(this.enableFont && !Ext.isSafari2){ @@ -965,7 +1007,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { fixKeys : function(){ // load time branching for fastest keydown performance if(Ext.isIE){ return function(e){ - var k = e.getKey(), + var k = e.getKey(), doc = this.getDoc(), r; if(k == e.TAB){ @@ -1229,6 +1271,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * @hide */ }); -Ext.reg('htmleditor', Ext.form.HtmlEditor);- +Ext.reg('htmleditor', Ext.form.HtmlEditor); +