-<html>\r
-<head>\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>/**\r
- * @class Ext.form.HtmlEditor\r
- * @extends Ext.form.Field\r
- * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be \r
- * automatically hidden when needed. These are noted in the config options where appropriate.\r
- * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not \r
- * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.\r
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT\r
- * supported by this editor.</b>\r
- * <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\r
- * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.\r
- * <br><br>Example usage:\r
- * <pre><code>\r
-// Simple example rendered with default options:\r
-Ext.QuickTips.init(); // enable tooltips\r
-new Ext.form.HtmlEditor({\r
- renderTo: Ext.getBody(),\r
- width: 800,\r
- height: 300\r
-});\r
-\r
-// Passed via xtype into a container and with custom options:\r
-Ext.QuickTips.init(); // enable tooltips\r
-new Ext.Panel({\r
- title: 'HTML Editor',\r
- renderTo: Ext.getBody(),\r
- width: 600,\r
- height: 300,\r
- frame: true,\r
- layout: 'fit',\r
- items: {\r
- xtype: 'htmleditor',\r
- enableColors: false,\r
- enableAlignments: false\r
- }\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new HtmlEditor\r
- * @param {Object} config\r
- * @xtype htmleditor\r
- */\r
-\r
-Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {\r
- <div id="cfg-Ext.form.HtmlEditor-enableFormat"></div>/**\r
- * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)\r
- */\r
- enableFormat : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableFontSize"></div>/**\r
- * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)\r
- */\r
- enableFontSize : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableColors"></div>/**\r
- * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)\r
- */\r
- enableColors : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableAlignments"></div>/**\r
- * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)\r
- */\r
- enableAlignments : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableLists"></div>/**\r
- * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)\r
- */\r
- enableLists : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableSourceEdit"></div>/**\r
- * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)\r
- */\r
- enableSourceEdit : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableLinks"></div>/**\r
- * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)\r
- */\r
- enableLinks : true,\r
- <div id="cfg-Ext.form.HtmlEditor-enableFont"></div>/**\r
- * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)\r
- */\r
- enableFont : true,\r
- <div id="cfg-Ext.form.HtmlEditor-createLinkText"></div>/**\r
- * @cfg {String} createLinkText The default text for the create link prompt\r
- */\r
- createLinkText : 'Please enter the URL for the link:',\r
- <div id="cfg-Ext.form.HtmlEditor-defaultLinkValue"></div>/**\r
- * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)\r
- */\r
- defaultLinkValue : 'http:/'+'/',\r
- <div id="cfg-Ext.form.HtmlEditor-fontFamilies"></div>/**\r
- * @cfg {Array} fontFamilies An array of available font families\r
- */\r
- fontFamilies : [\r
- 'Arial',\r
- 'Courier New',\r
- 'Tahoma',\r
- 'Times New Roman',\r
- 'Verdana'\r
- ],\r
- defaultFont: 'tahoma',\r
- <div id="cfg-Ext.form.HtmlEditor-defaultValue"></div>/**\r
- * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to ​ (Zero-width space), (Non-breaking space) in Opera and IE6).\r
- */\r
- defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',\r
-\r
- // private properties\r
- actionMode: 'wrap',\r
- validationEvent : false,\r
- deferHeight: true,\r
- initialized : false,\r
- activated : false,\r
- sourceEditMode : false,\r
- onFocus : Ext.emptyFn,\r
- iframePad:3,\r
- hideMode:'offsets',\r
- defaultAutoCreate : {\r
- tag: "textarea",\r
- style:"width:500px;height:300px;",\r
- autocomplete: "off"\r
- },\r
-\r
- // private\r
- initComponent : function(){\r
- this.addEvents(\r
- <div id="event-Ext.form.HtmlEditor-initialize"></div>/**\r
- * @event initialize\r
- * Fires when the editor is fully initialized (including the iframe)\r
- * @param {HtmlEditor} this\r
- */\r
- 'initialize',\r
- <div id="event-Ext.form.HtmlEditor-activate"></div>/**\r
- * @event activate\r
- * Fires when the editor is first receives the focus. Any insertion must wait\r
- * until after this event.\r
- * @param {HtmlEditor} this\r
- */\r
- 'activate',\r
- <div id="event-Ext.form.HtmlEditor-beforesync"></div>/**\r
- * @event beforesync\r
- * Fires before the textarea is updated with content from the editor iframe. Return false\r
- * to cancel the sync.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'beforesync',\r
- <div id="event-Ext.form.HtmlEditor-beforepush"></div>/**\r
- * @event beforepush\r
- * Fires before the iframe editor is updated with content from the textarea. Return false\r
- * to cancel the push.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'beforepush',\r
- <div id="event-Ext.form.HtmlEditor-sync"></div>/**\r
- * @event sync\r
- * Fires when the textarea is updated with content from the editor iframe.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'sync',\r
- <div id="event-Ext.form.HtmlEditor-push"></div>/**\r
- * @event push\r
- * Fires when the iframe editor is updated with content from the textarea.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'push',\r
- <div id="event-Ext.form.HtmlEditor-editmodechange"></div>/**\r
- * @event editmodechange\r
- * Fires when the editor switches edit modes\r
- * @param {HtmlEditor} this\r
- * @param {Boolean} sourceEdit True if source edit, false if standard editing.\r
- */\r
- 'editmodechange'\r
- )\r
- },\r
-\r
- // private\r
- createFontOptions : function(){\r
- var buf = [], fs = this.fontFamilies, ff, lc;\r
- for(var i = 0, len = fs.length; i< len; i++){\r
- ff = fs[i];\r
- lc = ff.toLowerCase();\r
- buf.push(\r
- '<option value="',lc,'" style="font-family:',ff,';"',\r
- (this.defaultFont == lc ? ' selected="true">' : '>'),\r
- ff,\r
- '</option>'\r
- );\r
- }\r
- return buf.join('');\r
- },\r
- \r
- /*\r
- * Protected method that will not generally be called directly. It\r
- * is called when the editor creates its toolbar. Override this method if you need to\r
- * add custom toolbar buttons.\r
- * @param {HtmlEditor} editor\r
- */\r
- createToolbar : function(editor){\r
- \r
- var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();\r
- \r
- function btn(id, toggle, handler){\r
- return {\r
- itemId : id,\r
- cls : 'x-btn-icon',\r
- iconCls: 'x-edit-'+id,\r
- enableToggle:toggle !== false,\r
- scope: editor,\r
- handler:handler||editor.relayBtnCmd,\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,\r
- overflowText: editor.buttonTips[id].title || undefined,\r
- tabIndex:-1\r
- };\r
- }\r
-\r
- // build the toolbar\r
- var tb = new Ext.Toolbar({\r
- renderTo:this.wrap.dom.firstChild\r
- });\r
-\r
- // stop form submits\r
- this.mon(tb.el, 'click', function(e){\r
- e.preventDefault();\r
- });\r
-\r
- if(this.enableFont && !Ext.isSafari2){\r
- this.fontSelect = tb.el.createChild({\r
- tag:'select',\r
- cls:'x-font-select',\r
- html: this.createFontOptions()\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
- tb.add(\r
- this.fontSelect.dom,\r
- '-'\r
- );\r
- }\r
-\r
- if(this.enableFormat){\r
- tb.add(\r
- btn('bold'),\r
- btn('italic'),\r
- btn('underline')\r
- );\r
- }\r
-\r
- if(this.enableFontSize){\r
- tb.add(\r
- '-',\r
- btn('increasefontsize', false, this.adjustFont),\r
- btn('decreasefontsize', false, this.adjustFont)\r
- );\r
- }\r
-\r
- if(this.enableColors){\r
- tb.add(\r
- '-', {\r
- itemId:'forecolor',\r
- cls:'x-btn-icon',\r
- iconCls: 'x-edit-forecolor',\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,\r
- tabIndex:-1,\r
- menu : new Ext.menu.ColorMenu({\r
- allowReselect: true,\r
- focus: Ext.emptyFn,\r
- value:'000000',\r
- plain:true,\r
- listeners: {\r
- scope: this,\r
- select: function(cp, color){\r
- this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
- this.deferFocus();\r
- }\r
- },\r
- clickEvent:'mousedown'\r
- })\r
- }, {\r
- itemId:'backcolor',\r
- cls:'x-btn-icon',\r
- iconCls: 'x-edit-backcolor',\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,\r
- tabIndex:-1,\r
- menu : new Ext.menu.ColorMenu({\r
- focus: Ext.emptyFn,\r
- value:'FFFFFF',\r
- plain:true,\r
- allowReselect: true,\r
- listeners: {\r
- scope: this,\r
- select: function(cp, color){\r
- if(Ext.isGecko){\r
- this.execCmd('useCSS', false);\r
- this.execCmd('hilitecolor', color);\r
- this.execCmd('useCSS', true);\r
- this.deferFocus();\r
- }else{\r
- this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
- this.deferFocus();\r
- }\r
- }\r
- },\r
- clickEvent:'mousedown'\r
- })\r
- }\r
- );\r
- }\r
-\r
- if(this.enableAlignments){\r
- tb.add(\r
- '-',\r
- btn('justifyleft'),\r
- btn('justifycenter'),\r
- btn('justifyright')\r
- );\r
- }\r
-\r
- if(!Ext.isSafari2){\r
- if(this.enableLinks){\r
- tb.add(\r
- '-',\r
- btn('createlink', false, this.createLink)\r
- );\r
- }\r
-\r
- if(this.enableLists){\r
- tb.add(\r
- '-',\r
- btn('insertorderedlist'),\r
- btn('insertunorderedlist')\r
- );\r
- }\r
- if(this.enableSourceEdit){\r
- tb.add(\r
- '-',\r
- btn('sourceedit', true, function(btn){\r
- this.toggleSourceEdit(!this.sourceEditMode);\r
- })\r
- );\r
- }\r
- }\r
-\r
- this.tb = tb;\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-getDocMarkup"></div>/**\r
- * Protected method that will not generally be called directly. It\r
- * is called when the editor initializes the iframe with HTML contents. Override this method if you\r
- * want to change the initialization markup of the iframe (e.g. to add stylesheets).\r
- */\r
- getDocMarkup : function(){\r
- return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';\r
- },\r
-\r
- // private\r
- getEditorBody : function(){\r
- return this.doc.body || this.doc.documentElement;\r
- },\r
-\r
- // private\r
- getDoc : function(){\r
- return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);\r
- },\r
-\r
- // private\r
- getWin : function(){\r
- return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);\r
- this.el.dom.style.border = '0 none';\r
- this.el.dom.setAttribute('tabIndex', -1);\r
- this.el.addClass('x-hidden');\r
- if(Ext.isIE){ // fix IE 1px bogus margin\r
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')\r
- }\r
- this.wrap = this.el.wrap({\r
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}\r
- });\r
-\r
- this.createToolbar(this);\r
-\r
- this.disableItems(true);\r
- // is this needed?\r
- // this.tb.doLayout();\r
-\r
- this.createIFrame();\r
-\r
- if(!this.width){\r
- var sz = this.el.getSize();\r
- this.setSize(sz.width, this.height || sz.height);\r
- }\r
- },\r
-\r
- createIFrame: function(){\r
- var iframe = document.createElement('iframe');\r
- iframe.name = Ext.id();\r
- iframe.frameBorder = '0';\r
- iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";\r
- this.wrap.dom.appendChild(iframe);\r
-\r
- this.iframe = iframe;\r
-\r
- this.monitorTask = Ext.TaskMgr.start({\r
- run: this.checkDesignMode,\r
- scope: this,\r
- interval:100\r
- });\r
- },\r
-\r
- initFrame : function(){\r
- Ext.TaskMgr.stop(this.monitorTask);\r
- this.doc = this.getDoc();\r
- this.win = this.getWin();\r
-\r
- this.doc.open();\r
- this.doc.write(this.getDocMarkup());\r
- this.doc.close();\r
-\r
- var task = { // must defer to wait for browser to be ready\r
- run : function(){\r
- if(this.doc.body || this.doc.readyState == 'complete'){\r
- Ext.TaskMgr.stop(task);\r
- this.doc.designMode="on";\r
- this.initEditor.defer(10, this);\r
- }\r
- },\r
- interval : 10,\r
- duration:10000,\r
- scope: this\r
- };\r
- Ext.TaskMgr.start(task);\r
- },\r
-\r
-\r
- checkDesignMode : function(){\r
- if(this.wrap && this.wrap.dom.offsetWidth){\r
- var doc = this.getDoc();\r
- if(!doc){\r
- return;\r
- }\r
- if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){\r
- this.initFrame();\r
- }\r
- }\r
- },\r
- \r
- disableItems: function(disabled){\r
- if(this.fontSelect){\r
- this.fontSelect.dom.disabled = disabled;\r
- }\r
- this.tb.items.each(function(item){\r
- if(item.itemId != 'sourceedit'){\r
- item.setDisabled(disabled);\r
- }\r
- });\r
- },\r
-\r
- // private\r
- onResize : function(w, h){\r
- Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);\r
- if(this.el && this.iframe){\r
- if(typeof w == 'number'){\r
- var aw = w - this.wrap.getFrameWidth('lr');\r
- this.el.setWidth(this.adjustWidth('textarea', aw));\r
- this.tb.setWidth(aw);\r
- this.iframe.style.width = Math.max(aw, 0) + 'px';\r
- }\r
- if(typeof h == 'number'){\r
- var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\r
- this.el.setHeight(this.adjustWidth('textarea', ah));\r
- this.iframe.style.height = Math.max(ah, 0) + 'px';\r
- if(this.doc){\r
- this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';\r
- }\r
- }\r
- }\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-toggleSourceEdit"></div>/**\r
- * Toggles the editor between standard and source edit mode.\r
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard\r
- */\r
- toggleSourceEdit : function(sourceEditMode){\r
- if(sourceEditMode === undefined){\r
- sourceEditMode = !this.sourceEditMode;\r
- }\r
- this.sourceEditMode = sourceEditMode === true;\r
- var btn = this.tb.items.get('sourceedit');\r
- if(btn.pressed !== this.sourceEditMode){\r
- btn.toggle(this.sourceEditMode);\r
- if(!btn.xtbHidden){\r
- return;\r
- }\r
- }\r
- if(this.sourceEditMode){\r
- this.disableItems(true);\r
- this.syncValue();\r
- this.iframe.className = 'x-hidden';\r
- this.el.removeClass('x-hidden');\r
- this.el.dom.removeAttribute('tabIndex');\r
- this.el.focus();\r
- }else{\r
- if(this.initialized){\r
- this.disableItems(false);\r
- }\r
- this.pushValue();\r
- this.iframe.className = '';\r
- this.el.addClass('x-hidden');\r
- this.el.dom.setAttribute('tabIndex', -1);\r
- this.deferFocus();\r
- }\r
- var lastSize = this.lastSize;\r
- if(lastSize){\r
- delete this.lastSize;\r
- this.setSize(lastSize);\r
- }\r
- this.fireEvent('editmodechange', this, this.sourceEditMode);\r
- },\r
-\r
- // private used internally\r
- createLink : function(){\r
- var url = prompt(this.createLinkText, this.defaultLinkValue);\r
- if(url && url != 'http:/'+'/'){\r
- this.relayCmd('createlink', url);\r
- }\r
- },\r
-\r
- // private (for BoxComponent)\r
- adjustSize : Ext.BoxComponent.prototype.adjustSize,\r
-\r
- // private (for BoxComponent)\r
- getResizeEl : function(){\r
- return this.wrap;\r
- },\r
-\r
- // private (for BoxComponent)\r
- getPositionEl : function(){\r
- return this.wrap;\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- this.originalValue = this.getValue();\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-markInvalid"></div>/**\r
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
- * @method\r
- */\r
- markInvalid : Ext.emptyFn,\r
- \r
- <div id="method-Ext.form.HtmlEditor-clearInvalid"></div>/**\r
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
- * @method\r
- */\r
- clearInvalid : Ext.emptyFn,\r
-\r
- // docs inherit from Field\r
- setValue : function(v){\r
- Ext.form.HtmlEditor.superclass.setValue.call(this, v);\r
- this.pushValue();\r
- return this;\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-cleanHtml"></div>/**\r
- * Protected method that will not generally be called directly. If you need/want\r
- * custom HTML cleanup, this is the method you should override.\r
- * @param {String} html The HTML to be cleaned\r
- * @return {String} The cleaned HTML\r
- */\r
- cleanHtml : function(html){\r
- html = String(html);\r
- if(html.length > 5){\r
- if(Ext.isWebKit){ // strip safari nonsense\r
- html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
- }\r
- }\r
- if(html == this.defaultValue){\r
- html = '';\r
- }\r
- return html;\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-syncValue"></div>/**\r
- * Protected method that will not generally be called directly. Syncs the contents\r
- * of the editor iframe with the textarea.\r
- */\r
- syncValue : function(){\r
- if(this.initialized){\r
- var bd = this.getEditorBody();\r
- var html = bd.innerHTML;\r
- if(Ext.isWebKit){\r
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!\r
- var m = bs.match(/text-align:(.*?);/i);\r
- if(m && m[1]){\r
- html = '<div style="'+m[0]+'">' + html + '</div>';\r
- }\r
- }\r
- html = this.cleanHtml(html);\r
- if(this.fireEvent('beforesync', this, html) !== false){\r
- this.el.dom.value = html;\r
- this.fireEvent('sync', this, html);\r
- }\r
- }\r
- },\r
- \r
- //docs inherit from Field\r
- getValue : function() {\r
- this[this.sourceEditMode ? 'pushValue' : 'syncValue']();\r
- return Ext.form.HtmlEditor.superclass.getValue.call(this);\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-pushValue"></div>/**\r
- * Protected method that will not generally be called directly. Pushes the value of the textarea\r
- * into the iframe editor.\r
- */\r
- pushValue : function(){\r
- if(this.initialized){\r
- var v = this.el.dom.value;\r
- if(!this.activated && v.length < 1){\r
- v = this.defaultValue;\r
- }\r
- if(this.fireEvent('beforepush', this, v) !== false){\r
- this.getEditorBody().innerHTML = v;\r
- if(Ext.isGecko){\r
- // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8\r
- var d = this.doc,\r
- mode = d.designMode.toLowerCase();\r
- \r
- d.designMode = mode.toggle('on', 'off');\r
- d.designMode = mode;\r
- }\r
- this.fireEvent('push', this, v);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- deferFocus : function(){\r
- this.focus.defer(10, this);\r
- },\r
-\r
- // docs inherit from Field\r
- focus : function(){\r
- if(this.win && !this.sourceEditMode){\r
- this.win.focus();\r
- }else{\r
- this.el.focus();\r
- }\r
- },\r
-\r
- // private\r
- initEditor : function(){\r
- //Destroying the component during/before initEditor can cause issues.\r
- try{\r
- var dbody = this.getEditorBody();\r
- var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');\r
- ss['background-attachment'] = 'fixed'; // w3c\r
- dbody.bgProperties = 'fixed'; // ie\r
-\r
- Ext.DomHelper.applyStyles(dbody, ss);\r
-\r
- if(this.doc){\r
- try{\r
- Ext.EventManager.removeAll(this.doc);\r
- }catch(e){}\r
- }\r
-\r
- this.doc = this.getDoc();\r
-\r
- Ext.EventManager.on(this.doc, {\r
- 'mousedown': this.onEditorEvent,\r
- 'dblclick': this.onEditorEvent,\r
- 'click': this.onEditorEvent,\r
- 'keyup': this.onEditorEvent,\r
- buffer:100,\r
- scope: this\r
- });\r
-\r
- if(Ext.isGecko){\r
- Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);\r
- }\r
- if(Ext.isIE || Ext.isWebKit || Ext.isOpera){\r
- Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);\r
- }\r
- this.initialized = true;\r
- this.fireEvent('initialize', this);\r
- this.doc.editorInitialized = true;\r
- this.pushValue();\r
- }catch(e){}\r
- },\r
-\r
- // private\r
- onDestroy : function(){\r
- if(this.monitorTask){\r
- Ext.TaskMgr.stop(this.monitorTask);\r
- }\r
- if(this.rendered){\r
- Ext.destroy(this.tb);\r
- if(this.wrap){\r
- this.wrap.dom.innerHTML = '';\r
- this.wrap.remove();\r
- }\r
- }\r
- if(this.el){\r
- this.el.removeAllListeners();\r
- this.el.remove();\r
- }\r
- \r
- if(this.doc){\r
- try{\r
- Ext.EventManager.removeAll(this.doc);\r
- for (var prop in this.doc){\r
- delete this.doc[prop];\r
- }\r
- }catch(e){}\r
- }\r
- this.purgeListeners();\r
- },\r
-\r
- // private\r
- onFirstFocus : function(){\r
- this.activated = true;\r
- this.disableItems(false);\r
- if(Ext.isGecko){ // prevent silly gecko errors\r
- this.win.focus();\r
- var s = this.win.getSelection();\r
- if(!s.focusNode || s.focusNode.nodeType != 3){\r
- var r = s.getRangeAt(0);\r
- r.selectNodeContents(this.getEditorBody());\r
- r.collapse(true);\r
- this.deferFocus();\r
- }\r
- try{\r
- this.execCmd('useCSS', true);\r
- this.execCmd('styleWithCSS', false);\r
- }catch(e){}\r
- }\r
- this.fireEvent('activate', this);\r
- },\r
-\r
- // private\r
- adjustFont: function(btn){\r
- var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;\r
-\r
- var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);\r
- if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){\r
- // Safari 3 values\r
- // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px\r
- if(v <= 10){\r
- v = 1 + adjust;\r
- }else if(v <= 13){\r
- v = 2 + adjust;\r
- }else if(v <= 16){\r
- v = 3 + adjust;\r
- }else if(v <= 18){\r
- v = 4 + adjust;\r
- }else if(v <= 24){\r
- v = 5 + adjust;\r
- }else {\r
- v = 6 + adjust;\r
- }\r
- v = v.constrain(1, 6);\r
- }else{\r
- if(Ext.isSafari){ // safari\r
- adjust *= 2;\r
- }\r
- v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);\r
- }\r
- this.execCmd('FontSize', v);\r
- },\r
-\r
- // private\r
- onEditorEvent : function(e){\r
- this.updateToolbar();\r
- },\r
-\r
-\r
- <div id="method-Ext.form.HtmlEditor-updateToolbar"></div>/**\r
- * Protected method that will not generally be called directly. It triggers\r
- * a toolbar update by reading the markup state of the current selection in the editor.\r
- */\r
- updateToolbar: function(){\r
-\r
- if(!this.activated){\r
- this.onFirstFocus();\r
- return;\r
- }\r
-\r
- var btns = this.tb.items.map, doc = this.doc;\r
-\r
- if(this.enableFont && !Ext.isSafari2){\r
- var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();\r
- if(name != this.fontSelect.dom.value){\r
- this.fontSelect.dom.value = name;\r
- }\r
- }\r
- if(this.enableFormat){\r
- btns.bold.toggle(doc.queryCommandState('bold'));\r
- btns.italic.toggle(doc.queryCommandState('italic'));\r
- btns.underline.toggle(doc.queryCommandState('underline'));\r
- }\r
- if(this.enableAlignments){\r
- btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));\r
- btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));\r
- btns.justifyright.toggle(doc.queryCommandState('justifyright'));\r
- }\r
- if(!Ext.isSafari2 && this.enableLists){\r
- btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));\r
- btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));\r
- }\r
- \r
- Ext.menu.MenuMgr.hideAll();\r
-\r
- this.syncValue();\r
- },\r
-\r
- // private\r
- relayBtnCmd : function(btn){\r
- this.relayCmd(btn.itemId);\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-relayCmd"></div>/**\r
- * Executes a Midas editor command on the editor document and performs necessary focus and\r
- * toolbar updates. <b>This should only be called after the editor is initialized.</b>\r
- * @param {String} cmd The Midas command\r
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
- */\r
- relayCmd : function(cmd, value){\r
- (function(){\r
- this.focus();\r
- this.execCmd(cmd, value);\r
- this.updateToolbar();\r
- }).defer(10, this);\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-execCmd"></div>/**\r
- * Executes a Midas editor command directly on the editor document.\r
- * For visual commands, you should use {@link #relayCmd} instead.\r
- * <b>This should only be called after the editor is initialized.</b>\r
- * @param {String} cmd The Midas command\r
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
- */\r
- execCmd : function(cmd, value){\r
- this.doc.execCommand(cmd, false, value === undefined ? null : value);\r
- this.syncValue();\r
- },\r
-\r
- // private\r
- applyCommand : function(e){\r
- if(e.ctrlKey){\r
- var c = e.getCharCode(), cmd;\r
- if(c > 0){\r
- c = String.fromCharCode(c);\r
- switch(c){\r
- case 'b':\r
- cmd = 'bold';\r
- break;\r
- case 'i':\r
- cmd = 'italic';\r
- break;\r
- case 'u':\r
- cmd = 'underline';\r
- break;\r
- }\r
- if(cmd){\r
- this.win.focus();\r
- this.execCmd(cmd);\r
- this.deferFocus();\r
- e.preventDefault();\r
- }\r
- }\r
- }\r
- },\r
-\r
- <div id="method-Ext.form.HtmlEditor-insertAtCursor"></div>/**\r
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated\r
- * to insert text.\r
- * @param {String} text\r
- */\r
- insertAtCursor : function(text){\r
- if(!this.activated){\r
- return;\r
- }\r
- if(Ext.isIE){\r
- this.win.focus();\r
- var r = this.doc.selection.createRange();\r
- if(r){\r
- r.collapse(true);\r
- r.pasteHTML(text);\r
- this.syncValue();\r
- this.deferFocus();\r
- }\r
- }else if(Ext.isGecko || Ext.isOpera){\r
- this.win.focus();\r
- this.execCmd('InsertHTML', text);\r
- this.deferFocus();\r
- }else if(Ext.isWebKit){\r
- this.execCmd('InsertText', text);\r
- this.deferFocus();\r
- }\r
- },\r
-\r
- // private\r
- fixKeys : function(){ // load time branching for fastest keydown performance\r
- if(Ext.isIE){\r
- return function(e){\r
- var k = e.getKey(), r;\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- r = this.doc.selection.createRange();\r
- if(r){\r
- r.collapse(true);\r
- r.pasteHTML(' ');\r
- this.deferFocus();\r
- }\r
- }else if(k == e.ENTER){\r
- r = this.doc.selection.createRange();\r
- if(r){\r
- var target = r.parentElement();\r
- if(!target || target.tagName.toLowerCase() != 'li'){\r
- e.stopEvent();\r
- r.pasteHTML('<br />');\r
- r.collapse(false);\r
- r.select();\r
- }\r
- }\r
- }\r
- };\r
- }else if(Ext.isOpera){\r
- return function(e){\r
- var k = e.getKey();\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- this.win.focus();\r
- this.execCmd('InsertHTML',' ');\r
- this.deferFocus();\r
- }\r
- };\r
- }else if(Ext.isWebKit){\r
- return function(e){\r
- var k = e.getKey();\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- this.execCmd('InsertText','\t');\r
- this.deferFocus();\r
- }\r
- };\r
- }\r
- }(),\r
-\r
- <div id="method-Ext.form.HtmlEditor-getToolbar"></div>/**\r
- * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>\r
- * @return {Ext.Toolbar}\r
- */\r
- getToolbar : function(){\r
- return this.tb;\r
- },\r
-\r
- <div id="prop-Ext.form.HtmlEditor-buttonTips"></div>/**\r
- * Object collection of toolbar tooltips for the buttons in the editor. The key\r
- * is the command id associated with that button and the value is a valid QuickTips object.\r
- * For example:\r
-<pre><code>\r
-{\r
- bold : {\r
- title: 'Bold (Ctrl+B)',\r
- text: 'Make the selected text bold.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- italic : {\r
- title: 'Italic (Ctrl+I)',\r
- text: 'Make the selected text italic.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- ...\r
-</code></pre>\r
- * @type Object\r
- */\r
- buttonTips : {\r
- bold : {\r
- title: 'Bold (Ctrl+B)',\r
- text: 'Make the selected text bold.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- italic : {\r
- title: 'Italic (Ctrl+I)',\r
- text: 'Make the selected text italic.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- underline : {\r
- title: 'Underline (Ctrl+U)',\r
- text: 'Underline the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- increasefontsize : {\r
- title: 'Grow Text',\r
- text: 'Increase the font size.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- decreasefontsize : {\r
- title: 'Shrink Text',\r
- text: 'Decrease the font size.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- backcolor : {\r
- title: 'Text Highlight Color',\r
- text: 'Change the background color of the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- forecolor : {\r
- title: 'Font Color',\r
- text: 'Change the color of the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifyleft : {\r
- title: 'Align Text Left',\r
- text: 'Align text to the left.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifycenter : {\r
- title: 'Center Text',\r
- text: 'Center text in the editor.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifyright : {\r
- title: 'Align Text Right',\r
- text: 'Align text to the right.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- insertunorderedlist : {\r
- title: 'Bullet List',\r
- text: 'Start a bulleted list.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- insertorderedlist : {\r
- title: 'Numbered List',\r
- text: 'Start a numbered list.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- createlink : {\r
- title: 'Hyperlink',\r
- text: 'Make the selected text a hyperlink.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- sourceedit : {\r
- title: 'Source Edit',\r
- text: 'Switch to source editing mode.',\r
- cls: 'x-html-editor-tip'\r
- }\r
- }\r
-\r
- // hide stuff that is not compatible\r
- <div id="event-Ext.form.HtmlEditor-blur"></div>/**\r
- * @event blur\r
- * @hide\r
- */\r
- <div id="event-Ext.form.HtmlEditor-change"></div>/**\r
- * @event change\r
- * @hide\r
- */\r
- <div id="event-Ext.form.HtmlEditor-focus"></div>/**\r
- * @event focus\r
- * @hide\r
- */\r
- <div id="event-Ext.form.HtmlEditor-specialkey"></div>/**\r
- * @event specialkey\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-fieldClass"></div>/**\r
- * @cfg {String} fieldClass @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-focusClass"></div>/**\r
- * @cfg {String} focusClass @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-autoCreate"></div>/**\r
- * @cfg {String} autoCreate @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-inputType"></div>/**\r
- * @cfg {String} inputType @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-invalidClass"></div>/**\r
- * @cfg {String} invalidClass @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-invalidText"></div>/**\r
- * @cfg {String} invalidText @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-msgFx"></div>/**\r
- * @cfg {String} msgFx @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-validateOnBlur"></div>/**\r
- * @cfg {String} validateOnBlur @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-allowDomMove"></div>/**\r
- * @cfg {Boolean} allowDomMove @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-applyTo"></div>/**\r
- * @cfg {String} applyTo @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-autoHeight"></div>/**\r
- * @cfg {String} autoHeight @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-autoWidth"></div>/**\r
- * @cfg {String} autoWidth @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-cls"></div>/**\r
- * @cfg {String} cls @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-disabled"></div>/**\r
- * @cfg {String} disabled @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-disabledClass"></div>/**\r
- * @cfg {String} disabledClass @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-msgTarget"></div>/**\r
- * @cfg {String} msgTarget @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-readOnly"></div>/**\r
- * @cfg {String} readOnly @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-style"></div>/**\r
- * @cfg {String} style @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-validationDelay"></div>/**\r
- * @cfg {String} validationDelay @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-validationEvent"></div>/**\r
- * @cfg {String} validationEvent @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-tabIndex"></div>/**\r
- * @cfg {String} tabIndex @hide\r
- */\r
- <div id="prop-Ext.form.HtmlEditor-disabled"></div>/**\r
- * @property disabled\r
- * @hide\r
- */\r
- <div id="method-Ext.form.HtmlEditor-applyToMarkup"></div>/**\r
- * @method applyToMarkup\r
- * @hide\r
- */\r
- <div id="method-Ext.form.HtmlEditor-disable"></div>/**\r
- * @method disable\r
- * @hide\r
- */\r
- <div id="method-Ext.form.HtmlEditor-enable"></div>/**\r
- * @method enable\r
- * @hide\r
- */\r
- <div id="method-Ext.form.HtmlEditor-validate"></div>/**\r
- * @method validate\r
- * @hide\r
- */\r
- <div id="event-Ext.form.HtmlEditor-valid"></div>/**\r
- * @event valid\r
- * @hide\r
- */\r
- <div id="method-Ext.form.HtmlEditor-setDisabled"></div>/**\r
- * @method setDisabled\r
- * @hide\r
- */\r
- <div id="cfg-Ext.form.HtmlEditor-null"></div>/**\r
- * @cfg keys\r
- * @hide\r
- */\r
-});\r
-Ext.reg('htmleditor', Ext.form.HtmlEditor);</pre> \r
-</body>\r
+<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.0
+ * 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
+ * automatically hidden when needed. These are noted in the config options where appropriate.
+ * <br><br>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}.
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b>
+ * <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
+ * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
+ * <br><br>Example usage:
+ * <pre><code>
+// 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
+ }
+});
+</code></pre>
+ * @constructor
+ * Create a new HtmlEditor
+ * @param {Object} config
+ * @xtype htmleditor
+ */
+
+Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
+ <div id="cfg-Ext.form.HtmlEditor-enableFormat"></div>/**
+ * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
+ */
+ enableFormat : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableFontSize"></div>/**
+ * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
+ */
+ enableFontSize : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableColors"></div>/**
+ * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
+ */
+ enableColors : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableAlignments"></div>/**
+ * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
+ */
+ enableAlignments : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableLists"></div>/**
+ * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
+ */
+ enableLists : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableSourceEdit"></div>/**
+ * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
+ */
+ enableSourceEdit : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableLinks"></div>/**
+ * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
+ */
+ enableLinks : true,
+ <div id="cfg-Ext.form.HtmlEditor-enableFont"></div>/**
+ * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
+ */
+ enableFont : true,
+ <div id="cfg-Ext.form.HtmlEditor-createLinkText"></div>/**
+ * @cfg {String} createLinkText The default text for the create link prompt
+ */
+ createLinkText : 'Please enter the URL for the link:',
+ <div id="cfg-Ext.form.HtmlEditor-defaultLinkValue"></div>/**
+ * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ */
+ defaultLinkValue : 'http:/'+'/',
+ <div id="cfg-Ext.form.HtmlEditor-fontFamilies"></div>/**
+ * @cfg {Array} fontFamilies An array of available font families
+ */
+ fontFamilies : [
+ 'Arial',
+ 'Courier New',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Verdana'
+ ],
+ defaultFont: 'tahoma',
+ <div id="cfg-Ext.form.HtmlEditor-defaultValue"></div>/**
+ * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to   (Non-breaking space) in Opera and IE6, ​ (Zero-width space) in all other browsers).
+ */
+ defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',
+
+ // 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"
+ },
+
+ // private
+ initComponent : function(){
+ this.addEvents(
+ <div id="event-Ext.form.HtmlEditor-initialize"></div>/**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {HtmlEditor} this
+ */
+ 'initialize',
+ <div id="event-Ext.form.HtmlEditor-activate"></div>/**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {HtmlEditor} this
+ */
+ 'activate',
+ <div id="event-Ext.form.HtmlEditor-beforesync"></div>/**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'beforesync',
+ <div id="event-Ext.form.HtmlEditor-beforepush"></div>/**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'beforepush',
+ <div id="event-Ext.form.HtmlEditor-sync"></div>/**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'sync',
+ <div id="event-Ext.form.HtmlEditor-push"></div>/**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'push',
+ <div id="event-Ext.form.HtmlEditor-editmodechange"></div>/**
+ * @event editmodechange
+ * Fires when the editor switches edit modes
+ * @param {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(
+ '<option value="',lc,'" style="font-family:',ff,';"',
+ (this.defaultFont == lc ? ' selected="true">' : '>'),
+ ff,
+ '</option>'
+ );
+ }
+ return buf.join('');
+ },
+
+ /*
+ * 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
+ */
+ createToolbar : function(editor){
+ var items = [];
+ var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
+
+
+ function btn(id, toggle, handler){
+ return {
+ itemId : id,
+ cls : 'x-btn-icon',
+ iconCls: 'x-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,
+ tabIndex:-1
+ };
+ }
+
+
+ if(this.enableFont && !Ext.isSafari2){
+ var fontSelectItem = new Ext.Toolbar.Item({
+ autoEl: {
+ tag:'select',
+ cls:'x-font-select',
+ html: this.createFontOptions()
+ }
+ });
+
+ items.push(
+ fontSelectItem,
+ '-'
+ );
+ }
+
+ if(this.enableFormat){
+ items.push(
+ btn('bold'),
+ btn('italic'),
+ btn('underline')
+ );
+ }
+
+ if(this.enableFontSize){
+ items.push(
+ '-',
+ btn('increasefontsize', false, this.adjustFont),
+ btn('decreasefontsize', false, this.adjustFont)
+ );
+ }
+
+ if(this.enableColors){
+ items.push(
+ '-', {
+ itemId:'forecolor',
+ cls:'x-btn-icon',
+ iconCls: 'x-edit-forecolor',
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
+ 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();
+ }
+ },
+ clickEvent:'mousedown'
+ })
+ }, {
+ itemId:'backcolor',
+ cls:'x-btn-icon',
+ iconCls: 'x-edit-backcolor',
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
+ 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();
+ }
+ }
+ },
+ clickEvent:'mousedown'
+ })
+ }
+ );
+ }
+
+ if(this.enableAlignments){
+ items.push(
+ '-',
+ btn('justifyleft'),
+ btn('justifycenter'),
+ btn('justifyright')
+ );
+ }
+
+ if(!Ext.isSafari2){
+ if(this.enableLinks){
+ items.push(
+ '-',
+ btn('createlink', false, this.createLink)
+ );
+ }
+
+ if(this.enableLists){
+ items.push(
+ '-',
+ btn('insertorderedlist'),
+ btn('insertunorderedlist')
+ );
+ }
+ if(this.enableSourceEdit){
+ items.push(
+ '-',
+ btn('sourceedit', true, function(btn){
+ this.toggleSourceEdit(!this.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;
+ this.tb.doLayout();
+ },
+
+ onDisable: function(){
+ this.wrap.mask();
+ Ext.form.HtmlEditor.superclass.onDisable.call(this);
+ },
+
+ onEnable: function(){
+ this.wrap.unmask();
+ Ext.form.HtmlEditor.superclass.onEnable.call(this);
+ },
+
+ 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);
+ }
+ },
+
+ <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).
+ *
+ * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
+ */
+ getDocMarkup : function(){
+ 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
+ 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);
+ },
+
+ // private
+ getWin : function(){
+ return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.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'}
+ });
+
+ this.createToolbar(this);
+
+ this.disableItems(true);
+
+ this.tb.doLayout();
+
+ this.createIFrame();
+
+ if(!this.width){
+ var sz = this.el.getSize();
+ this.setSize(sz.width, this.height || sz.height);
+ }
+ this.resizeEl = this.positionEl = this.wrap;
+ },
+
+ createIFrame: function(){
+ var iframe = document.createElement('iframe');
+ iframe.name = Ext.id();
+ iframe.frameBorder = '0';
+ iframe.style.overflow = 'auto';
+
+ this.wrap.dom.appendChild(iframe);
+ this.iframe = iframe;
+
+ this.monitorTask = Ext.TaskMgr.start({
+ run: this.checkDesignMode,
+ scope: this,
+ interval:100
+ });
+ },
+
+ initFrame : function(){
+ Ext.TaskMgr.stop(this.monitorTask);
+ var doc = this.getDoc();
+ this.win = this.getWin();
+
+ doc.open();
+ doc.write(this.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);
+ }
+ },
+ interval : 10,
+ duration:10000,
+ scope: this
+ };
+ Ext.TaskMgr.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();
+ }
+ }
+ },
+
+ /* 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
+ 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';
+ }
+ }
+ }
+ },
+
+ <div id="method-Ext.form.HtmlEditor-toggleSourceEdit"></div>/**
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+ */
+ toggleSourceEdit : function(sourceEditMode){
+ var iframeHeight, elHeight;
+ if(sourceEditMode === undefined){
+ sourceEditMode = !this.sourceEditMode;
+ }
+ this.sourceEditMode = sourceEditMode === true;
+ var btn = this.tb.getComponent('sourceedit');
+
+ if(btn.pressed !== this.sourceEditMode){
+ btn.toggle(this.sourceEditMode);
+ if(!btn.xtbHidden){
+ return;
+ }
+ }
+ 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.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();
+
+ this.setSize(ls);
+ this.iframe.style.height = elHeight + 'px';
+ }
+ this.fireEvent('editmodechange', this, this.sourceEditMode);
+ },
+
+ // private used internally
+ createLink : function(){
+ var url = prompt(this.createLinkText, this.defaultLinkValue);
+ if(url && url != 'http:/'+'/'){
+ this.relayCmd('createlink', url);
+ }
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
+ },
+
+ <div id="method-Ext.form.HtmlEditor-markInvalid"></div>/**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ markInvalid : Ext.emptyFn,
+
+ <div id="method-Ext.form.HtmlEditor-clearInvalid"></div>/**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ clearInvalid : Ext.emptyFn,
+
+ // docs inherit from Field
+ setValue : function(v){
+ Ext.form.HtmlEditor.superclass.setValue.call(this, v);
+ this.pushValue();
+ return this;
+ },
+
+ <div id="method-Ext.form.HtmlEditor-cleanHtml"></div>/**
+ * 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, '');
+ }
+
+ /*
+ * Neat little hack. Strips out all the non-digit characters from the default
+ * 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, '')){
+ html = html.substring(1);
+ }
+ return html;
+ },
+
+ <div id="method-Ext.form.HtmlEditor-syncValue"></div>/**
+ * 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 = '<div style="'+m[0]+'">' + html + '</div>';
+ }
+ }
+ html = this.cleanHtml(html);
+ if(this.fireEvent('beforesync', this, html) !== false){
+ this.el.dom.value = html;
+ this.fireEvent('sync', this, html);
+ }
+ }
+ },
+
+ //docs inherit from Field
+ getValue : function() {
+ this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
+ return Ext.form.HtmlEditor.superclass.getValue.call(this);
+ },
+
+ <div id="method-Ext.form.HtmlEditor-pushValue"></div>/**
+ * 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;
+ }
+ if(this.fireEvent('beforepush', this, v) !== false){
+ 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
+
+ }
+ this.setDesignMode(true);
+ this.fireEvent('push', this, v);
+ }
+
+ }
+ },
+
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // docs inherit from Field
+ focus : function(){
+ if(this.win && !this.sourceEditMode){
+ this.win.focus();
+ }else{
+ this.el.focus();
+ }
+ },
+
+ // 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', 'background-color', 'color'),
+ doc,
+ fn;
+
+ ss['background-attachment'] = 'fixed'; // w3c
+ dbody.bgProperties = 'fixed'; // ie
+
+ Ext.DomHelper.applyStyles(dbody, ss);
+
+ doc = this.getDoc();
+
+ if(doc){
+ try{
+ Ext.EventManager.removeAll(doc);
+ }catch(e){}
+ }
+
+ /*
+ * We need to use createDelegate here, because when using buffer, the delayed task is added
+ * as a property to the function. When the listener is removed, the task is deleted from the function.
+ * 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);
+ Ext.EventManager.on(doc, {
+ mousedown: fn,
+ dblclick: fn,
+ click: fn,
+ keyup: fn,
+ buffer:100
+ });
+
+ if(Ext.isGecko){
+ Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
+ }
+ if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
+ Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
+ }
+ doc.editorInitialized = true;
+ this.initialized = true;
+ this.pushValue();
+ this.setReadOnly(this.readOnly);
+ this.fireEvent('initialize', this);
+ }catch(e){}
+ },
+
+ // private
+ onDestroy : function(){
+ if(this.monitorTask){
+ Ext.TaskMgr.stop(this.monitorTask);
+ }
+ if(this.rendered){
+ Ext.destroy(this.tb);
+ var doc = this.getDoc();
+ if(doc){
+ try{
+ Ext.EventManager.removeAll(doc);
+ for (var prop in doc){
+ delete doc[prop];
+ }
+ }catch(e){}
+ }
+ if(this.wrap){
+ this.wrap.dom.innerHTML = '';
+ this.wrap.remove();
+ }
+ }
+
+ if(this.el){
+ this.el.removeAllListeners();
+ this.el.remove();
+ }
+ this.purgeListeners();
+ },
+
+ // 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();
+ }
+ try{
+ this.execCmd('useCSS', true);
+ this.execCmd('styleWithCSS', false);
+ }catch(e){}
+ }
+ this.fireEvent('activate', this);
+ },
+
+ // 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){
+ // 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;
+ }
+ v = v.constrain(1, 6);
+ }else{
+ if(Ext.isSafari){ // safari
+ adjust *= 2;
+ }
+ v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
+ }
+ this.execCmd('FontSize', v);
+ },
+
+ // private
+ onEditorEvent : function(e){
+ this.updateToolbar();
+ },
+
+
+ <div id="method-Ext.form.HtmlEditor-updateToolbar"></div>/**
+ * 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(){
+
+ if(this.readOnly){
+ return;
+ }
+
+ if(!this.activated){
+ this.onFirstFocus();
+ return;
+ }
+
+ var btns = this.tb.items.map,
+ doc = this.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(this.enableFormat){
+ btns.bold.toggle(doc.queryCommandState('bold'));
+ btns.italic.toggle(doc.queryCommandState('italic'));
+ btns.underline.toggle(doc.queryCommandState('underline'));
+ }
+ if(this.enableAlignments){
+ btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
+ btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
+ btns.justifyright.toggle(doc.queryCommandState('justifyright'));
+ }
+ if(!Ext.isSafari2 && this.enableLists){
+ btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
+ btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
+ }
+
+ Ext.menu.MenuMgr.hideAll();
+
+ this.syncValue();
+ },
+
+ // private
+ relayBtnCmd : function(btn){
+ this.relayCmd(btn.getItemId());
+ },
+
+ <div id="method-Ext.form.HtmlEditor-relayCmd"></div>/**
+ * 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);
+ },
+
+ <div id="method-Ext.form.HtmlEditor-execCmd"></div>/**
+ * Executes a Midas editor command directly on the editor document.
+ * For visual commands, you should use {@link #relayCmd} instead.
+ * <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();
+ },
+
+ // private
+ applyCommand : function(e){
+ if(e.ctrlKey){
+ var c = e.getCharCode(), cmd;
+ if(c > 0){
+ c = String.fromCharCode(c);
+ switch(c){
+ case 'b':
+ cmd = 'bold';
+ break;
+ case 'i':
+ cmd = 'italic';
+ break;
+ case 'u':
+ cmd = 'underline';
+ break;
+ }
+ if(cmd){
+ this.win.focus();
+ this.execCmd(cmd);
+ this.deferFocus();
+ e.preventDefault();
+ }
+ }
+ }
+ },
+
+ <div id="method-Ext.form.HtmlEditor-insertAtCursor"></div>/**
+ * 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();
+ }
+ }else{
+ this.win.focus();
+ this.execCmd('InsertHTML', text);
+ this.deferFocus();
+ }
+ },
+
+ // private
+ 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){
+ e.stopEvent();
+ r = doc.selection.createRange();
+ if(r){
+ r.collapse(true);
+ r.pasteHTML(' ');
+ this.deferFocus();
+ }
+ }else if(k == e.ENTER){
+ r = doc.selection.createRange();
+ if(r){
+ var target = r.parentElement();
+ if(!target || target.tagName.toLowerCase() != 'li'){
+ e.stopEvent();
+ r.pasteHTML('<br />');
+ r.collapse(false);
+ r.select();
+ }
+ }
+ }
+ };
+ }else if(Ext.isOpera){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.win.focus();
+ this.execCmd('InsertHTML',' ');
+ this.deferFocus();
+ }
+ };
+ }else if(Ext.isWebKit){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.execCmd('InsertText','\t');
+ this.deferFocus();
+ }else if(k == e.ENTER){
+ e.stopEvent();
+ this.execCmd('InsertHtml','<br /><br />');
+ this.deferFocus();
+ }
+ };
+ }
+ }(),
+
+ <div id="method-Ext.form.HtmlEditor-getToolbar"></div>/**
+ * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
+ * @return {Ext.Toolbar}
+ */
+ getToolbar : function(){
+ return this.tb;
+ },
+
+ <div id="prop-Ext.form.HtmlEditor-buttonTips"></div>/**
+ * 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)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ ...
+</code></pre>
+ * @type Object
+ */
+ buttonTips : {
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ underline : {
+ title: 'Underline (Ctrl+U)',
+ text: 'Underline the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ increasefontsize : {
+ title: 'Grow Text',
+ text: 'Increase the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ decreasefontsize : {
+ title: 'Shrink Text',
+ text: 'Decrease the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ backcolor : {
+ title: 'Text Highlight Color',
+ text: 'Change the background color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ forecolor : {
+ title: 'Font Color',
+ text: 'Change the color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyleft : {
+ title: 'Align Text Left',
+ text: 'Align text to the left.',
+ cls: 'x-html-editor-tip'
+ },
+ justifycenter : {
+ title: 'Center Text',
+ text: 'Center text in the editor.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyright : {
+ title: 'Align Text Right',
+ text: 'Align text to the right.',
+ cls: 'x-html-editor-tip'
+ },
+ insertunorderedlist : {
+ title: 'Bullet List',
+ text: 'Start a bulleted list.',
+ cls: 'x-html-editor-tip'
+ },
+ insertorderedlist : {
+ title: 'Numbered List',
+ text: 'Start a numbered list.',
+ cls: 'x-html-editor-tip'
+ },
+ createlink : {
+ title: 'Hyperlink',
+ text: 'Make the selected text a hyperlink.',
+ cls: 'x-html-editor-tip'
+ },
+ sourceedit : {
+ title: 'Source Edit',
+ text: 'Switch to source editing mode.',
+ cls: 'x-html-editor-tip'
+ }
+ }
+
+ // hide stuff that is not compatible
+ <div id="event-Ext.form.HtmlEditor-blur"></div>/**
+ * @event blur
+ * @hide
+ */
+ <div id="event-Ext.form.HtmlEditor-change"></div>/**
+ * @event change
+ * @hide
+ */
+ <div id="event-Ext.form.HtmlEditor-focus"></div>/**
+ * @event focus
+ * @hide
+ */
+ <div id="event-Ext.form.HtmlEditor-specialkey"></div>/**
+ * @event specialkey
+ * @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-fieldClass"></div>/**
+ * @cfg {String} fieldClass @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-focusClass"></div>/**
+ * @cfg {String} focusClass @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-autoCreate"></div>/**
+ * @cfg {String} autoCreate @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-inputType"></div>/**
+ * @cfg {String} inputType @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-invalidClass"></div>/**
+ * @cfg {String} invalidClass @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-invalidText"></div>/**
+ * @cfg {String} invalidText @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-msgFx"></div>/**
+ * @cfg {String} msgFx @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-validateOnBlur"></div>/**
+ * @cfg {String} validateOnBlur @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-allowDomMove"></div>/**
+ * @cfg {Boolean} allowDomMove @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-applyTo"></div>/**
+ * @cfg {String} applyTo @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-autoHeight"></div>/**
+ * @cfg {String} autoHeight @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-autoWidth"></div>/**
+ * @cfg {String} autoWidth @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-cls"></div>/**
+ * @cfg {String} cls @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-disabled"></div>/**
+ * @cfg {String} disabled @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-disabledClass"></div>/**
+ * @cfg {String} disabledClass @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-msgTarget"></div>/**
+ * @cfg {String} msgTarget @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-readOnly"></div>/**
+ * @cfg {String} readOnly @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-style"></div>/**
+ * @cfg {String} style @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-validationDelay"></div>/**
+ * @cfg {String} validationDelay @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-validationEvent"></div>/**
+ * @cfg {String} validationEvent @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-tabIndex"></div>/**
+ * @cfg {String} tabIndex @hide
+ */
+ <div id="prop-Ext.form.HtmlEditor-disabled"></div>/**
+ * @property disabled
+ * @hide
+ */
+ <div id="method-Ext.form.HtmlEditor-applyToMarkup"></div>/**
+ * @method applyToMarkup
+ * @hide
+ */
+ <div id="method-Ext.form.HtmlEditor-disable"></div>/**
+ * @method disable
+ * @hide
+ */
+ <div id="method-Ext.form.HtmlEditor-enable"></div>/**
+ * @method enable
+ * @hide
+ */
+ <div id="method-Ext.form.HtmlEditor-validate"></div>/**
+ * @method validate
+ * @hide
+ */
+ <div id="event-Ext.form.HtmlEditor-valid"></div>/**
+ * @event valid
+ * @hide
+ */
+ <div id="method-Ext.form.HtmlEditor-setDisabled"></div>/**
+ * @method setDisabled
+ * @hide
+ */
+ <div id="cfg-Ext.form.HtmlEditor-null"></div>/**
+ * @cfg keys
+ * @hide
+ */
+});
+Ext.reg('htmleditor', Ext.form.HtmlEditor);</pre>
+</body>
git.ithinksw.org / extjs.git / blobdiff