开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
HtmlEditor.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：37k
源码类别：

中间件编程

开发平台：

JavaScript

HtmlEditor.js：源码内容
  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.form.HtmlEditor
  3.  * @extends Ext.form.Field
  4.  * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be 
  5.  * automatically hidden when needed.  These are noted in the config options where appropriate.
  6.  * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not 
  7.  * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
  8.  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
  9.  * supported by this editor.</b>
  10.  * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
  11.  * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
  12.  * <br><br>Example usage:
  13.  * <pre><code>
  14. // Simple example rendered with default options:
  15. Ext.QuickTips.init();  // enable tooltips
  16. new Ext.form.HtmlEditor({
  17.     renderTo: Ext.getBody(),
  18.     width: 800,
  19.     height: 300
  20. });
  22. // Passed via xtype into a container and with custom options:
  23. Ext.QuickTips.init();  // enable tooltips
  24. new Ext.Panel({
  25.     title: 'HTML Editor',
  26.     renderTo: Ext.getBody(),
  27.     width: 600,
  28.     height: 300,
  29.     frame: true,
  30.     layout: 'fit',
  31.     items: {
  32.         xtype: 'htmleditor',
  33.         enableColors: false,
  34.         enableAlignments: false
  35.     }
  36. });
  37. </code></pre>
  38.  * @constructor
  39.  * Create a new HtmlEditor
  40.  * @param {Object} config
  41.  * @xtype htmleditor
  42.  */
  44. Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
  45.     /**
  46.      * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
  47.      */
  48.     enableFormat : true,
  49.     /**
  50.      * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
  51.      */
  52.     enableFontSize : true,
  53.     /**
  54.      * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
  55.      */
  56.     enableColors : true,
  57.     /**
  58.      * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
  59.      */
  60.     enableAlignments : true,
  61.     /**
  62.      * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
  63.      */
  64.     enableLists : true,
  65.     /**
  66.      * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
  67.      */
  68.     enableSourceEdit : true,
  69.     /**
  70.      * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
  71.      */
  72.     enableLinks : true,
  73.     /**
  74.      * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
  75.      */
  76.     enableFont : true,
  77.     /**
  78.      * @cfg {String} createLinkText The default text for the create link prompt
  79.      */
  80.     createLinkText : 'Please enter the URL for the link:',
  81.     /**
  82.      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
  83.      */
  84.     defaultLinkValue : 'http:/'+'/',
  85.     /**
  86.      * @cfg {Array} fontFamilies An array of available font families
  87.      */
  88.     fontFamilies : [
  89.         'Arial',
  90.         'Courier New',
  91.         'Tahoma',
  92.         'Times New Roman',
  93.         'Verdana'
  94.     ],
  95.     defaultFont: 'tahoma',
  96.     /**
  97.      * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &#8203; (Zero-width space), &nbsp; (Non-breaking space) in Opera and IE6).
  98.      */
  99.     defaultValue: (Ext.isOpera || Ext.isIE6) ? '&nbsp;' : '&#8203;',
  101.     // private properties
  102.     actionMode: 'wrap',
  103.     validationEvent : false,
  104.     deferHeight: true,
  105.     initialized : false,
  106.     activated : false,
  107.     sourceEditMode : false,
  108.     onFocus : Ext.emptyFn,
  109.     iframePad:3,
  110.     hideMode:'offsets',
  111.     defaultAutoCreate : {
  112.         tag: "textarea",
  113.         style:"width:500px;height:300px;",
  114.         autocomplete: "off"
  115.     },
  117.     // private
  118.     initComponent : function(){
  119.         this.addEvents(
  120.             /**
  121.              * @event initialize
  122.              * Fires when the editor is fully initialized (including the iframe)
  123.              * @param {HtmlEditor} this
  124.              */
  125.             'initialize',
  126.             /**
  127.              * @event activate
  128.              * Fires when the editor is first receives the focus. Any insertion must wait
  129.              * until after this event.
  130.              * @param {HtmlEditor} this
  131.              */
  132.             'activate',
  133.              /**
  134.              * @event beforesync
  135.              * Fires before the textarea is updated with content from the editor iframe. Return false
  136.              * to cancel the sync.
  137.              * @param {HtmlEditor} this
  138.              * @param {String} html
  139.              */
  140.             'beforesync',
  141.              /**
  142.              * @event beforepush
  143.              * Fires before the iframe editor is updated with content from the textarea. Return false
  144.              * to cancel the push.
  145.              * @param {HtmlEditor} this
  146.              * @param {String} html
  147.              */
  148.             'beforepush',
  149.              /**
  150.              * @event sync
  151.              * Fires when the textarea is updated with content from the editor iframe.
  152.              * @param {HtmlEditor} this
  153.              * @param {String} html
  154.              */
  155.             'sync',
  156.              /**
  157.              * @event push
  158.              * Fires when the iframe editor is updated with content from the textarea.
  159.              * @param {HtmlEditor} this
  160.              * @param {String} html
  161.              */
  162.             'push',
  163.              /**
  164.              * @event editmodechange
  165.              * Fires when the editor switches edit modes
  166.              * @param {HtmlEditor} this
  167.              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
  168.              */
  169.             'editmodechange'
  170.         )
  171.     },
  173.     // private
  174.     createFontOptions : function(){
  175.         var buf = [], fs = this.fontFamilies, ff, lc;
  176.         for(var i = 0, len = fs.length; i< len; i++){
  177.             ff = fs[i];
  178.             lc = ff.toLowerCase();
  179.             buf.push(
  180.                 '<option value="',lc,'" style="font-family:',ff,';"',
  181.                     (this.defaultFont == lc ? ' selected="true">' : '>'),
  182.                     ff,
  183.                 '</option>'
  184.             );
  185.         }
  186.         return buf.join('');
  187.     },
  188.     
  189.     /*
  190.      * Protected method that will not generally be called directly. It
  191.      * is called when the editor creates its toolbar. Override this method if you need to
  192.      * add custom toolbar buttons.
  193.      * @param {HtmlEditor} editor
  194.      */
  195.     createToolbar : function(editor){
  196.         
  197.         var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
  198.         
  199.         function btn(id, toggle, handler){
  200.             return {
  201.                 itemId : id,
  202.                 cls : 'x-btn-icon',
  203.                 iconCls: 'x-edit-'+id,
  204.                 enableToggle:toggle !== false,
  205.                 scope: editor,
  206.                 handler:handler||editor.relayBtnCmd,
  207.                 clickEvent:'mousedown',
  208.                 tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
  209.                 overflowText: editor.buttonTips[id].title || undefined,
  210.                 tabIndex:-1
  211.             };
  212.         }
  214.         // build the toolbar
  215.         var tb = new Ext.Toolbar({
  216.             renderTo:this.wrap.dom.firstChild
  217.         });
  219.         // stop form submits
  220.         this.mon(tb.el, 'click', function(e){
  221.             e.preventDefault();
  222.         });
  224.         if(this.enableFont && !Ext.isSafari2){
  225.             this.fontSelect = tb.el.createChild({
  226.                 tag:'select',
  227.                 cls:'x-font-select',
  228.                 html: this.createFontOptions()
  229.             });
  230.             this.mon(this.fontSelect, 'change', function(){
  231.                 var font = this.fontSelect.dom.value;
  232.                 this.relayCmd('fontname', font);
  233.                 this.deferFocus();
  234.             }, this);
  236.             tb.add(
  237.                 this.fontSelect.dom,
  238.                 '-'
  239.             );
  240.         }
  242.         if(this.enableFormat){
  243.             tb.add(
  244.                 btn('bold'),
  245.                 btn('italic'),
  246.                 btn('underline')
  247.             );
  248.         }
  250.         if(this.enableFontSize){
  251.             tb.add(
  252.                 '-',
  253.                 btn('increasefontsize', false, this.adjustFont),
  254.                 btn('decreasefontsize', false, this.adjustFont)
  255.             );
  256.         }
  258.         if(this.enableColors){
  259.             tb.add(
  260.                 '-', {
  261.                     itemId:'forecolor',
  262.                     cls:'x-btn-icon',
  263.                     iconCls: 'x-edit-forecolor',
  264.                     clickEvent:'mousedown',
  265.                     tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
  266.                     tabIndex:-1,
  267.                     menu : new Ext.menu.ColorMenu({
  268.                         allowReselect: true,
  269.                         focus: Ext.emptyFn,
  270.                         value:'000000',
  271.                         plain:true,
  272.                         listeners: {
  273.                             scope: this,
  274.                             select: function(cp, color){
  275.                                 this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
  276.                                 this.deferFocus();
  277.                             }
  278.                         },
  279.                         clickEvent:'mousedown'
  280.                     })
  281.                 }, {
  282.                     itemId:'backcolor',
  283.                     cls:'x-btn-icon',
  284.                     iconCls: 'x-edit-backcolor',
  285.                     clickEvent:'mousedown',
  286.                     tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
  287.                     tabIndex:-1,
  288.                     menu : new Ext.menu.ColorMenu({
  289.                         focus: Ext.emptyFn,
  290.                         value:'FFFFFF',
  291.                         plain:true,
  292.                         allowReselect: true,
  293.                         listeners: {
  294.                             scope: this,
  295.                             select: function(cp, color){
  296.                                 if(Ext.isGecko){
  297.                                     this.execCmd('useCSS', false);
  298.                                     this.execCmd('hilitecolor', color);
  299.                                     this.execCmd('useCSS', true);
  300.                                     this.deferFocus();
  301.                                 }else{
  302.                                     this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
  303.                                     this.deferFocus();
  304.                                 }
  305.                             }
  306.                         },
  307.                         clickEvent:'mousedown'
  308.                     })
  309.                 }
  310.             );
  311.         }
  313.         if(this.enableAlignments){
  314.             tb.add(
  315.                 '-',
  316.                 btn('justifyleft'),
  317.                 btn('justifycenter'),
  318.                 btn('justifyright')
  319.             );
  320.         }
  322.         if(!Ext.isSafari2){
  323.             if(this.enableLinks){
  324.                 tb.add(
  325.                     '-',
  326.                     btn('createlink', false, this.createLink)
  327.                 );
  328.             }
  330.             if(this.enableLists){
  331.                 tb.add(
  332.                     '-',
  333.                     btn('insertorderedlist'),
  334.                     btn('insertunorderedlist')
  335.                 );
  336.             }
  337.             if(this.enableSourceEdit){
  338.                 tb.add(
  339.                     '-',
  340.                     btn('sourceedit', true, function(btn){
  341.                         this.toggleSourceEdit(!this.sourceEditMode);
  342.                     })
  343.                 );
  344.             }
  345.         }
  347.         this.tb = tb;
  348.     },
  350.     /**
  351.      * Protected method that will not generally be called directly. It
  352.      * is called when the editor initializes the iframe with HTML contents. Override this method if you
  353.      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
  354.      */
  355.     getDocMarkup : function(){
  356.         return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
  357.     },
  359.     // private
  360.     getEditorBody : function(){
  361.         return this.doc.body || this.doc.documentElement;
  362.     },
  364.     // private
  365.     getDoc : function(){
  366.         return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
  367.     },
  369.     // private
  370.     getWin : function(){
  371.         return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
  372.     },
  374.     // private
  375.     onRender : function(ct, position){
  376.         Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
  377.         this.el.dom.style.border = '0 none';
  378.         this.el.dom.setAttribute('tabIndex', -1);
  379.         this.el.addClass('x-hidden');
  380.         if(Ext.isIE){ // fix IE 1px bogus margin
  381.             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
  382.         }
  383.         this.wrap = this.el.wrap({
  384.             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
  385.         });
  387.         this.createToolbar(this);
  389.         this.disableItems(true);
  390.         // is this needed?
  391.         // this.tb.doLayout();
  393.         this.createIFrame();
  395.         if(!this.width){
  396.             var sz = this.el.getSize();
  397.             this.setSize(sz.width, this.height || sz.height);
  398.         }
  399.     },
  401.     createIFrame: function(){
  402.         var iframe = document.createElement('iframe');
  403.         iframe.name = Ext.id();
  404.         iframe.frameBorder = '0';
  405.         iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";
  406.         this.wrap.dom.appendChild(iframe);
  408.         this.iframe = iframe;
  410.         this.monitorTask = Ext.TaskMgr.start({
  411.             run: this.checkDesignMode,
  412.             scope: this,
  413.             interval:100
  414.         });
  415.     },
  417.     initFrame : function(){
  418.         Ext.TaskMgr.stop(this.monitorTask);
  419.         this.doc = this.getDoc();
  420.         this.win = this.getWin();
  422.         this.doc.open();
  423.         this.doc.write(this.getDocMarkup());
  424.         this.doc.close();
  426.         var task = { // must defer to wait for browser to be ready
  427.             run : function(){
  428.                 if(this.doc.body || this.doc.readyState == 'complete'){
  429.                     Ext.TaskMgr.stop(task);
  430.                     this.doc.designMode="on";
  431.                     this.initEditor.defer(10, this);
  432.                 }
  433.             },
  434.             interval : 10,
  435.             duration:10000,
  436.             scope: this
  437.         };
  438.         Ext.TaskMgr.start(task);
  439.     },
  442.     checkDesignMode : function(){
  443.         if(this.wrap && this.wrap.dom.offsetWidth){
  444.             var doc = this.getDoc();
  445.             if(!doc){
  446.                 return;
  447.             }
  448.             if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){
  449.                 this.initFrame();
  450.             }
  451.         }
  452.     },
  453.     
  454.     disableItems: function(disabled){
  455.         if(this.fontSelect){
  456.             this.fontSelect.dom.disabled = disabled;
  457.         }
  458.         this.tb.items.each(function(item){
  459.             if(item.itemId != 'sourceedit'){
  460.                 item.setDisabled(disabled);
  461.             }
  462.         });
  463.     },
  465.     // private
  466.     onResize : function(w, h){
  467.         Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
  468.         if(this.el && this.iframe){
  469.             if(typeof w == 'number'){
  470.                 var aw = w - this.wrap.getFrameWidth('lr');
  471.                 this.el.setWidth(this.adjustWidth('textarea', aw));
  472.                 this.tb.setWidth(aw);
  473.                 this.iframe.style.width = Math.max(aw, 0) + 'px';
  474.             }
  475.             if(typeof h == 'number'){
  476.                 var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
  477.                 this.el.setHeight(this.adjustWidth('textarea', ah));
  478.                 this.iframe.style.height = Math.max(ah, 0) + 'px';
  479.                 if(this.doc){
  480.                     this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
  481.                 }
  482.             }
  483.         }
  484.     },
  486.     /**
  487.      * Toggles the editor between standard and source edit mode.
  488.      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
  489.      */
  490.     toggleSourceEdit : function(sourceEditMode){
  491.         if(sourceEditMode === undefined){
  492.             sourceEditMode = !this.sourceEditMode;
  493.         }
  494.         this.sourceEditMode = sourceEditMode === true;
  495.         var btn = this.tb.items.get('sourceedit');
  496.         if(btn.pressed !== this.sourceEditMode){
  497.             btn.toggle(this.sourceEditMode);
  498.             if(!btn.xtbHidden){
  499.                 return;
  500.             }
  501.         }
  502.         if(this.sourceEditMode){
  503.             this.disableItems(true);
  504.             this.syncValue();
  505.             this.iframe.className = 'x-hidden';
  506.             this.el.removeClass('x-hidden');
  507.             this.el.dom.removeAttribute('tabIndex');
  508.             this.el.focus();
  509.         }else{
  510.             if(this.initialized){
  511.                 this.disableItems(false);
  512.             }
  513.             this.pushValue();
  514.             this.iframe.className = '';
  515.             this.el.addClass('x-hidden');
  516.             this.el.dom.setAttribute('tabIndex', -1);
  517.             this.deferFocus();
  518.         }
  519.         var lastSize = this.lastSize;
  520.         if(lastSize){
  521.             delete this.lastSize;
  522.             this.setSize(lastSize);
  523.         }
  524.         this.fireEvent('editmodechange', this, this.sourceEditMode);
  525.     },
  527.     // private used internally
  528.     createLink : function(){
  529.         var url = prompt(this.createLinkText, this.defaultLinkValue);
  530.         if(url && url != 'http:/'+'/'){
  531.             this.relayCmd('createlink', url);
  532.         }
  533.     },
  535.     // private (for BoxComponent)
  536.     adjustSize : Ext.BoxComponent.prototype.adjustSize,
  538.     // private (for BoxComponent)
  539.     getResizeEl : function(){
  540.         return this.wrap;
  541.     },
  543.     // private (for BoxComponent)
  544.     getPositionEl : function(){
  545.         return this.wrap;
  546.     },
  548.     // private
  549.     initEvents : function(){
  550.         this.originalValue = this.getValue();
  551.     },
  553.     /**
  554.      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
  555.      * @method
  556.      */
  557.     markInvalid : Ext.emptyFn,
  558.     
  559.     /**
  560.      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
  561.      * @method
  562.      */
  563.     clearInvalid : Ext.emptyFn,
  565.     // docs inherit from Field
  566.     setValue : function(v){
  567.         Ext.form.HtmlEditor.superclass.setValue.call(this, v);
  568.         this.pushValue();
  569.         return this;
  570.     },
  572.     /**
  573.      * Protected method that will not generally be called directly. If you need/want
  574.      * custom HTML cleanup, this is the method you should override.
  575.      * @param {String} html The HTML to be cleaned
  576.      * @return {String} The cleaned HTML
  577.      */
  578.     cleanHtml : function(html){
  579.         html = String(html);
  580.         if(html.length > 5){
  581.             if(Ext.isWebKit){ // strip safari nonsense
  582.                 html = html.replace(/sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
  583.             }
  584.         }
  585.         if(html == this.defaultValue){
  586.             html = '';
  587.         }
  588.         return html;
  589.     },
  591.     /**
  592.      * Protected method that will not generally be called directly. Syncs the contents
  593.      * of the editor iframe with the textarea.
  594.      */
  595.     syncValue : function(){
  596.         if(this.initialized){
  597.             var bd = this.getEditorBody();
  598.             var html = bd.innerHTML;
  599.             if(Ext.isWebKit){
  600.                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
  601.                 var m = bs.match(/text-align:(.*?);/i);
  602.                 if(m && m[1]){
  603.                     html = '<div style="'+m[0]+'">' + html + '</div>';
  604.                 }
  605.             }
  606.             html = this.cleanHtml(html);
  607.             if(this.fireEvent('beforesync', this, html) !== false){
  608.                 this.el.dom.value = html;
  609.                 this.fireEvent('sync', this, html);
  610.             }
  611.         }
  612.     },
  613.     
  614.     //docs inherit from Field
  615.     getValue : function() {
  616.         this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
  617.         return Ext.form.HtmlEditor.superclass.getValue.call(this);
  618.     },
  620.     /**
  621.      * Protected method that will not generally be called directly. Pushes the value of the textarea
  622.      * into the iframe editor.
  623.      */
  624.     pushValue : function(){
  625.         if(this.initialized){
  626.             var v = this.el.dom.value;
  627.             if(!this.activated && v.length < 1){
  628.                 v = this.defaultValue;
  629.             }
  630.             if(this.fireEvent('beforepush', this, v) !== false){
  631.                 this.getEditorBody().innerHTML = v;
  632.                 if(Ext.isGecko){
  633.                     // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
  634.                     var d = this.doc,
  635.                         mode = d.designMode.toLowerCase();
  636.                     
  637.                     d.designMode = mode.toggle('on', 'off');
  638.                     d.designMode = mode;
  639.                 }
  640.                 this.fireEvent('push', this, v);
  641.             }
  642.         }
  643.     },
  645.     // private
  646.     deferFocus : function(){
  647.         this.focus.defer(10, this);
  648.     },
  650.     // docs inherit from Field
  651.     focus : function(){
  652.         if(this.win && !this.sourceEditMode){
  653.             this.win.focus();
  654.         }else{
  655.             this.el.focus();
  656.         }
  657.     },
  659.     // private
  660.     initEditor : function(){
  661.         //Destroying the component during/before initEditor can cause issues.
  662.         try{
  663.             var dbody = this.getEditorBody();
  664.             var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
  665.             ss['background-attachment'] = 'fixed'; // w3c
  666.             dbody.bgProperties = 'fixed'; // ie
  668.             Ext.DomHelper.applyStyles(dbody, ss);
  670.             if(this.doc){
  671.                 try{
  672.                     Ext.EventManager.removeAll(this.doc);
  673.                 }catch(e){}
  674.             }
  676.             this.doc = this.getDoc();
  678.             Ext.EventManager.on(this.doc, {
  679.                 'mousedown': this.onEditorEvent,
  680.                 'dblclick': this.onEditorEvent,
  681.                 'click': this.onEditorEvent,
  682.                 'keyup': this.onEditorEvent,
  683.                 buffer:100,
  684.                 scope: this
  685.             });
  687.             if(Ext.isGecko){
  688.                 Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
  689.             }
  690.             if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
  691.                 Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
  692.             }
  693.             this.initialized = true;
  694.             this.fireEvent('initialize', this);
  695.             this.doc.editorInitialized = true;
  696.             this.pushValue();
  697.         }catch(e){}
  698.     },
  700.     // private
  701.     onDestroy : function(){
  702.         if(this.monitorTask){
  703.             Ext.TaskMgr.stop(this.monitorTask);
  704.         }
  705.         if(this.rendered){
  706.             Ext.destroy(this.tb);
  707.             if(this.wrap){
  708.                 this.wrap.dom.innerHTML = '';
  709.                 this.wrap.remove();
  710.             }
  711.         }
  712.         if(this.el){
  713.             this.el.removeAllListeners();
  714.             this.el.remove();
  715.         }
  716.  
  717.         if(this.doc){
  718.             try{
  719.                 Ext.EventManager.removeAll(this.doc);
  720.                 for (var prop in this.doc){
  721.                    delete this.doc[prop];
  722.                 }
  723.             }catch(e){}
  724.         }
  725.         this.purgeListeners();
  726.     },
  728.     // private
  729.     onFirstFocus : function(){
  730.         this.activated = true;
  731.         this.disableItems(false);
  732.         if(Ext.isGecko){ // prevent silly gecko errors
  733.             this.win.focus();
  734.             var s = this.win.getSelection();
  735.             if(!s.focusNode || s.focusNode.nodeType != 3){
  736.                 var r = s.getRangeAt(0);
  737.                 r.selectNodeContents(this.getEditorBody());
  738.                 r.collapse(true);
  739.                 this.deferFocus();
  740.             }
  741.             try{
  742.                 this.execCmd('useCSS', true);
  743.                 this.execCmd('styleWithCSS', false);
  744.             }catch(e){}
  745.         }
  746.         this.fireEvent('activate', this);
  747.     },
  749.     // private
  750.     adjustFont: function(btn){
  751.         var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;
  753.         var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);
  754.         if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
  755.             // Safari 3 values
  756.             // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
  757.             if(v <= 10){
  758.                 v = 1 + adjust;
  759.             }else if(v <= 13){
  760.                 v = 2 + adjust;
  761.             }else if(v <= 16){
  762.                 v = 3 + adjust;
  763.             }else if(v <= 18){
  764.                 v = 4 + adjust;
  765.             }else if(v <= 24){
  766.                 v = 5 + adjust;
  767.             }else {
  768.                 v = 6 + adjust;
  769.             }
  770.             v = v.constrain(1, 6);
  771.         }else{
  772.             if(Ext.isSafari){ // safari
  773.                 adjust *= 2;
  774.             }
  775.             v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
  776.         }
  777.         this.execCmd('FontSize', v);
  778.     },
  780.     // private
  781.     onEditorEvent : function(e){
  782.         this.updateToolbar();
  783.     },
  786.     /**
  787.      * Protected method that will not generally be called directly. It triggers
  788.      * a toolbar update by reading the markup state of the current selection in the editor.
  789.      */
  790.     updateToolbar: function(){
  792.         if(!this.activated){
  793.             this.onFirstFocus();
  794.             return;
  795.         }
  797.         var btns = this.tb.items.map, doc = this.doc;
  799.         if(this.enableFont && !Ext.isSafari2){
  800.             var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
  801.             if(name != this.fontSelect.dom.value){
  802.                 this.fontSelect.dom.value = name;
  803.             }
  804.         }
  805.         if(this.enableFormat){
  806.             btns.bold.toggle(doc.queryCommandState('bold'));
  807.             btns.italic.toggle(doc.queryCommandState('italic'));
  808.             btns.underline.toggle(doc.queryCommandState('underline'));
  809.         }
  810.         if(this.enableAlignments){
  811.             btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
  812.             btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
  813.             btns.justifyright.toggle(doc.queryCommandState('justifyright'));
  814.         }
  815.         if(!Ext.isSafari2 && this.enableLists){
  816.             btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
  817.             btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
  818.         }
  819.         
  820.         Ext.menu.MenuMgr.hideAll();
  822.         this.syncValue();
  823.     },
  825.     // private
  826.     relayBtnCmd : function(btn){
  827.         this.relayCmd(btn.itemId);
  828.     },
  830.     /**
  831.      * Executes a Midas editor command on the editor document and performs necessary focus and
  832.      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
  833.      * @param {String} cmd The Midas command
  834.      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
  835.      */
  836.     relayCmd : function(cmd, value){
  837.         (function(){
  838.             this.focus();
  839.             this.execCmd(cmd, value);
  840.             this.updateToolbar();
  841.         }).defer(10, this);
  842.     },
  844.     /**
  845.      * Executes a Midas editor command directly on the editor document.
  846.      * For visual commands, you should use {@link #relayCmd} instead.
  847.      * <b>This should only be called after the editor is initialized.</b>
  848.      * @param {String} cmd The Midas command
  849.      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
  850.      */
  851.     execCmd : function(cmd, value){
  852.         this.doc.execCommand(cmd, false, value === undefined ? null : value);
  853.         this.syncValue();
  854.     },
  856.     // private
  857.     applyCommand : function(e){
  858.         if(e.ctrlKey){
  859.             var c = e.getCharCode(), cmd;
  860.             if(c > 0){
  861.                 c = String.fromCharCode(c);
  862.                 switch(c){
  863.                     case 'b':
  864.                         cmd = 'bold';
  865.                     break;
  866.                     case 'i':
  867.                         cmd = 'italic';
  868.                     break;
  869.                     case 'u':
  870.                         cmd = 'underline';
  871.                     break;
  872.                 }
  873.                 if(cmd){
  874.                     this.win.focus();
  875.                     this.execCmd(cmd);
  876.                     this.deferFocus();
  877.                     e.preventDefault();
  878.                 }
  879.             }
  880.         }
  881.     },
  883.     /**
  884.      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
  885.      * to insert text.
  886.      * @param {String} text
  887.      */
  888.     insertAtCursor : function(text){
  889.         if(!this.activated){
  890.             return;
  891.         }
  892.         if(Ext.isIE){
  893.             this.win.focus();
  894.             var r = this.doc.selection.createRange();
  895.             if(r){
  896.                 r.collapse(true);
  897.                 r.pasteHTML(text);
  898.                 this.syncValue();
  899.                 this.deferFocus();
  900.             }
  901.         }else if(Ext.isGecko || Ext.isOpera){
  902.             this.win.focus();
  903.             this.execCmd('InsertHTML', text);
  904.             this.deferFocus();
  905.         }else if(Ext.isWebKit){
  906.             this.execCmd('InsertText', text);
  907.             this.deferFocus();
  908.         }
  909.     },
  911.     // private
  912.     fixKeys : function(){ // load time branching for fastest keydown performance
  913.         if(Ext.isIE){
  914.             return function(e){
  915.                 var k = e.getKey(), r;
  916.                 if(k == e.TAB){
  917.                     e.stopEvent();
  918.                     r = this.doc.selection.createRange();
  919.                     if(r){
  920.                         r.collapse(true);
  921.                         r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');
  922.                         this.deferFocus();
  923.                     }
  924.                 }else if(k == e.ENTER){
  925.                     r = this.doc.selection.createRange();
  926.                     if(r){
  927.                         var target = r.parentElement();
  928.                         if(!target || target.tagName.toLowerCase() != 'li'){
  929.                             e.stopEvent();
  930.                             r.pasteHTML('<br />');
  931.                             r.collapse(false);
  932.                             r.select();
  933.                         }
  934.                     }
  935.                 }
  936.             };
  937.         }else if(Ext.isOpera){
  938.             return function(e){
  939.                 var k = e.getKey();
  940.                 if(k == e.TAB){
  941.                     e.stopEvent();
  942.                     this.win.focus();
  943.                     this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');
  944.                     this.deferFocus();
  945.                 }
  946.             };
  947.         }else if(Ext.isWebKit){
  948.             return function(e){
  949.                 var k = e.getKey();
  950.                 if(k == e.TAB){
  951.                     e.stopEvent();
  952.                     this.execCmd('InsertText','t');
  953.                     this.deferFocus();
  954.                 }
  955.              };
  956.         }
  957.     }(),
  959.     /**
  960.      * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
  961.      * @return {Ext.Toolbar}
  962.      */
  963.     getToolbar : function(){
  964.         return this.tb;
  965.     },
  967.     /**
  968.      * Object collection of toolbar tooltips for the buttons in the editor. The key
  969.      * is the command id associated with that button and the value is a valid QuickTips object.
  970.      * For example:
  971. <pre><code>
  972. {
  973.     bold : {
  974.         title: 'Bold (Ctrl+B)',
  975.         text: 'Make the selected text bold.',
  976.         cls: 'x-html-editor-tip'
  977.     },
  978.     italic : {
  979.         title: 'Italic (Ctrl+I)',
  980.         text: 'Make the selected text italic.',
  981.         cls: 'x-html-editor-tip'
  982.     },
  983.     ...
  984. </code></pre>
  985.     * @type Object
  986.      */
  987.     buttonTips : {
  988.         bold : {
  989.             title: 'Bold (Ctrl+B)',
  990.             text: 'Make the selected text bold.',
  991.             cls: 'x-html-editor-tip'
  992.         },
  993.         italic : {
  994.             title: 'Italic (Ctrl+I)',
  995.             text: 'Make the selected text italic.',
  996.             cls: 'x-html-editor-tip'
  997.         },
  998.         underline : {
  999.             title: 'Underline (Ctrl+U)',
  1000.             text: 'Underline the selected text.',
  1001.             cls: 'x-html-editor-tip'
  1002.         },
  1003.         increasefontsize : {
  1004.             title: 'Grow Text',
  1005.             text: 'Increase the font size.',
  1006.             cls: 'x-html-editor-tip'
  1007.         },
  1008.         decreasefontsize : {
  1009.             title: 'Shrink Text',
  1010.             text: 'Decrease the font size.',
  1011.             cls: 'x-html-editor-tip'
  1012.         },
  1013.         backcolor : {
  1014.             title: 'Text Highlight Color',
  1015.             text: 'Change the background color of the selected text.',
  1016.             cls: 'x-html-editor-tip'
  1017.         },
  1018.         forecolor : {
  1019.             title: 'Font Color',
  1020.             text: 'Change the color of the selected text.',
  1021.             cls: 'x-html-editor-tip'
  1022.         },
  1023.         justifyleft : {
  1024.             title: 'Align Text Left',
  1025.             text: 'Align text to the left.',
  1026.             cls: 'x-html-editor-tip'
  1027.         },
  1028.         justifycenter : {
  1029.             title: 'Center Text',
  1030.             text: 'Center text in the editor.',
  1031.             cls: 'x-html-editor-tip'
  1032.         },
  1033.         justifyright : {
  1034.             title: 'Align Text Right',
  1035.             text: 'Align text to the right.',
  1036.             cls: 'x-html-editor-tip'
  1037.         },
  1038.         insertunorderedlist : {
  1039.             title: 'Bullet List',
  1040.             text: 'Start a bulleted list.',
  1041.             cls: 'x-html-editor-tip'
  1042.         },
  1043.         insertorderedlist : {
  1044.             title: 'Numbered List',
  1045.             text: 'Start a numbered list.',
  1046.             cls: 'x-html-editor-tip'
  1047.         },
  1048.         createlink : {
  1049.             title: 'Hyperlink',
  1050.             text: 'Make the selected text a hyperlink.',
  1051.             cls: 'x-html-editor-tip'
  1052.         },
  1053.         sourceedit : {
  1054.             title: 'Source Edit',
  1055.             text: 'Switch to source editing mode.',
  1056.             cls: 'x-html-editor-tip'
  1057.         }
  1058.     }
  1060.     // hide stuff that is not compatible
  1061.     /**
  1062.      * @event blur
  1063.      * @hide
  1064.      */
  1065.     /**
  1066.      * @event change
  1067.      * @hide
  1068.      */
  1069.     /**
  1070.      * @event focus
  1071.      * @hide
  1072.      */
  1073.     /**
  1074.      * @event specialkey
  1075.      * @hide
  1076.      */
  1077.     /**
  1078.      * @cfg {String} fieldClass @hide
  1079.      */
  1080.     /**
  1081.      * @cfg {String} focusClass @hide
  1082.      */
  1083.     /**
  1084.      * @cfg {String} autoCreate @hide
  1085.      */
  1086.     /**
  1087.      * @cfg {String} inputType @hide
  1088.      */
  1089.     /**
  1090.      * @cfg {String} invalidClass @hide
  1091.      */
  1092.     /**
  1093.      * @cfg {String} invalidText @hide
  1094.      */
  1095.     /**
  1096.      * @cfg {String} msgFx @hide
  1097.      */
  1098.     /**
  1099.      * @cfg {String} validateOnBlur @hide
  1100.      */
  1101.     /**
  1102.      * @cfg {Boolean} allowDomMove  @hide
  1103.      */
  1104.     /**
  1105.      * @cfg {String} applyTo @hide
  1106.      */
  1107.     /**
  1108.      * @cfg {String} autoHeight  @hide
  1109.      */
  1110.     /**
  1111.      * @cfg {String} autoWidth  @hide
  1112.      */
  1113.     /**
  1114.      * @cfg {String} cls  @hide
  1115.      */
  1116.     /**
  1117.      * @cfg {String} disabled  @hide
  1118.      */
  1119.     /**
  1120.      * @cfg {String} disabledClass  @hide
  1121.      */
  1122.     /**
  1123.      * @cfg {String} msgTarget  @hide
  1124.      */
  1125.     /**
  1126.      * @cfg {String} readOnly  @hide
  1127.      */
  1128.     /**
  1129.      * @cfg {String} style  @hide
  1130.      */
  1131.     /**
  1132.      * @cfg {String} validationDelay  @hide
  1133.      */
  1134.     /**
  1135.      * @cfg {String} validationEvent  @hide
  1136.      */
  1137.     /**
  1138.      * @cfg {String} tabIndex  @hide
  1139.      */
  1140.     /**
  1141.      * @property disabled
  1142.      * @hide
  1143.      */
  1144.     /**
  1145.      * @method applyToMarkup
  1146.      * @hide
  1147.      */
  1148.     /**
  1149.      * @method disable
  1150.      * @hide
  1151.      */
  1152.     /**
  1153.      * @method enable
  1154.      * @hide
  1155.      */
  1156.     /**
  1157.      * @method validate
  1158.      * @hide
  1159.      */
  1160.     /**
  1161.      * @event valid
  1162.      * @hide
  1163.      */
  1164.     /**
  1165.      * @method setDisabled
  1166.      * @hide
  1167.      */
  1168.     /**
  1169.      * @cfg keys
  1170.      * @hide
  1171.      */
  1172. });
  1173. Ext.reg('htmleditor', Ext.form.HtmlEditor);