git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / HtmlEditor.html
diff --git a/docs/source/HtmlEditor.html b/docs/source/HtmlEditor.html
index 04d0c95..fe1d680 100644 (file)
--- a/docs/source/HtmlEditor.html
+++ b/docs/source/HtmlEditor.html
@@ -1,12 +1,18 @@
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.form.HtmlEditor"></div>/**
+<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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.form.HtmlEditor"></div>/**
  * @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
  * @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'
              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
              */
             'editmodechange'
-        )
+        );
     },
 
     // private
     },
 
     // private
@@ -202,7 +208,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
      */
     createToolbar : function(editor){
         var items = [];
      */
     createToolbar : function(editor){
         var items = [];
-        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();\r
+        var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
 
 
         function btn(id, toggle, handler){
 
 
         function btn(id, toggle, handler){
@@ -221,13 +227,13 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         }
 
 
         }
 
 
-        if(this.enableFont && !Ext.isSafari2){\r
-            var fontSelectItem = new Ext.Toolbar.Item({\r
-               autoEl: {\r
-                    tag:'select',\r
-                    cls:'x-font-select',\r
-                    html: this.createFontOptions()\r
-               }\r
+        if(this.enableFont && !Ext.isSafari2){
+            var fontSelectItem = new Ext.Toolbar.Item({
+               autoEl: {
+                    tag:'select',
+                    cls:'x-font-select',
+                    html: this.createFontOptions()
+               }
             });
 
             items.push(
             });
 
             items.push(
@@ -339,31 +345,31 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
                     })
                 );
             }
                     })
                 );
             }
-        }\r
-\r
-        // build the toolbar\r
-        var tb = new Ext.Toolbar({\r
-            renderTo: this.wrap.dom.firstChild,\r
-            items: items\r
-        });\r
-\r
-        if (fontSelectItem) {\r
-            this.fontSelect = fontSelectItem.el;\r
-\r
-            this.mon(this.fontSelect, 'change', function(){\r
-                var font = this.fontSelect.dom.value;\r
-                this.relayCmd('fontname', font);\r
-                this.deferFocus();\r
-            }, this);\r
-        }\r
-\r
-\r
-        // stop form submits\r
-        this.mon(tb.el, 'click', function(e){\r
-            e.preventDefault();\r
-        });\r
+        }
+
+        // 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 = tb;
+        this.tb.doLayout();
     },
 
     onDisable: function(){
     },
 
     onDisable: function(){
@@ -379,25 +385,30 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
     setReadOnly: function(readOnly){
 
         Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
     setReadOnly: function(readOnly){
 
         Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
-        if(this.initialized){\r
-            this.setDesignMode(!readOnly);\r
-            var bd = this.getEditorBody();\r
-            if(bd){\r
-                bd.style.cursor = this.readOnly ? 'default' : 'text';\r
-            }\r
-            this.disableItems(readOnly);\r
-        }\r
+        if(this.initialized){
+            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);
+        }
     },
 
     <div id="method-Ext.form.HtmlEditor-getDocMarkup"></div>/**
      * 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).
     },
 
     <div id="method-Ext.form.HtmlEditor-getDocMarkup"></div>/**
      * 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).
-     *\r
-     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility\r
+     *
+     * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
      */
     getDocMarkup : function(){
      */
     getDocMarkup : function(){
-        return '<html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
+        var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
+        return 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>', this.iframePad, h);
     },
 
     // private
     },
 
     // private
@@ -423,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.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'}
         }
         this.wrap = this.el.wrap({
             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
@@ -448,7 +459,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         var iframe = document.createElement('iframe');
         iframe.name = Ext.id();
         iframe.frameBorder = '0';
         var iframe = document.createElement('iframe');
         iframe.name = Ext.id();
         iframe.frameBorder = '0';
-        iframe.style.overflow = 'auto';\r
+        iframe.style.overflow = 'auto';
 
         this.wrap.dom.appendChild(iframe);
         this.iframe = iframe;
 
         this.wrap.dom.appendChild(iframe);
         this.iframe = iframe;
@@ -497,29 +508,29 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             }
         }
     },
             }
         }
     },
-\r
-    /* private\r
-     * set current design mode. To enable, mode can be true or 'on', off otherwise\r
-     */\r
-    setDesignMode : function(mode){\r
-        var doc ;\r
-        if(doc = this.getDoc()){\r
-            if(this.readOnly){\r
-                mode = false;\r
-            }\r
-            doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';\r
-        }\r
-\r
-    },\r
-\r
-    // private\r
+
+    /* 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(){
     getDesignMode : function(){
-        var doc = this.getDoc();\r
-        if(!doc){ return ''; }\r
-        return String(doc.designMode).toLowerCase();\r
-\r
-    },\r
-\r
+        var doc = this.getDoc();
+        if(!doc){ return ''; }
+        return String(doc.designMode).toLowerCase();
+
+    },
+
     disableItems: function(disabled){
         if(this.fontSelect){
             this.fontSelect.dom.disabled = disabled;
     disableItems: function(disabled){
         if(this.fontSelect){
             this.fontSelect.dom.disabled = disabled;
@@ -558,27 +569,39 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
      */
     toggleSourceEdit : function(sourceEditMode){
      * @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');
 
             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);
             btn.toggle(this.sourceEditMode);
-            if(!btn.xtbHidden){
+            if (!btn.xtbHidden) {
                 return;
             }
         }
                 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();
             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.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.disableItems(this.readOnly);
             }
             this.pushValue();
@@ -586,17 +609,15 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             this.el.addClass('x-hidden');
             this.el.dom.setAttribute('tabIndex', -1);
             this.deferFocus();
             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
         }
         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);
         var url = prompt(this.createLinkText, this.defaultLinkValue);
         if(url && url != 'http:/'+'/'){
             this.relayCmd('createlink', url);
@@ -693,13 +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
                 this.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\r
-\r
+                    this.setDesignMode(false);  //toggle off first
+                    this.setDesignMode(true);
                 }
                 }
-                this.setDesignMode(true);\r
                 this.fireEvent('push', this, v);
             }
                 this.fireEvent('push', this, v);
             }
-\r
+
         }
     },
 
         }
     },
 
@@ -722,7 +742,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
         //Destroying the component during/before initEditor can cause issues.
         try{
             var dbody = this.getEditorBody(),
         //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;
 
                 doc,
                 fn;
 
@@ -1251,6 +1271,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
      * @hide
      */
 });
      * @hide
      */
 });
-Ext.reg('htmleditor', Ext.form.HtmlEditor);</pre>    \r
-</body>\r
+Ext.reg('htmleditor', Ext.form.HtmlEditor);
+</pre>    
+</body>
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.