3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
4 <title>The source code</title>
\r
5 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
6 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
8 <body onload="prettyPrint();">
\r
9 <pre class="prettyprint lang-js"><div id="cls-Ext.form.HtmlEditor"></div>/**
10 * @class Ext.form.HtmlEditor
11 * @extends Ext.form.Field
12 * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
13 * automatically hidden when needed. These are noted in the config options where appropriate.
14 * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
15 * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
16 * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
17 * supported by this editor.</b>
18 * <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
19 * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
20 * <br><br>Example usage:
22 // Simple example rendered with default options:
23 Ext.QuickTips.init(); // enable tooltips
24 new Ext.form.HtmlEditor({
25 renderTo: Ext.getBody(),
30 // Passed via xtype into a container and with custom options:
31 Ext.QuickTips.init(); // enable tooltips
34 renderTo: Ext.getBody(),
42 enableAlignments: false
47 * Create a new HtmlEditor
48 * @param {Object} config
52 Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
53 <div id="cfg-Ext.form.HtmlEditor-enableFormat"></div>/**
54 * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
57 <div id="cfg-Ext.form.HtmlEditor-enableFontSize"></div>/**
58 * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
60 enableFontSize : true,
61 <div id="cfg-Ext.form.HtmlEditor-enableColors"></div>/**
62 * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
65 <div id="cfg-Ext.form.HtmlEditor-enableAlignments"></div>/**
66 * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
68 enableAlignments : true,
69 <div id="cfg-Ext.form.HtmlEditor-enableLists"></div>/**
70 * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
73 <div id="cfg-Ext.form.HtmlEditor-enableSourceEdit"></div>/**
74 * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
76 enableSourceEdit : true,
77 <div id="cfg-Ext.form.HtmlEditor-enableLinks"></div>/**
78 * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
81 <div id="cfg-Ext.form.HtmlEditor-enableFont"></div>/**
82 * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
85 <div id="cfg-Ext.form.HtmlEditor-createLinkText"></div>/**
86 * @cfg {String} createLinkText The default text for the create link prompt
88 createLinkText : 'Please enter the URL for the link:',
89 <div id="cfg-Ext.form.HtmlEditor-defaultLinkValue"></div>/**
90 * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
92 defaultLinkValue : 'http:/'+'/',
93 <div id="cfg-Ext.form.HtmlEditor-fontFamilies"></div>/**
94 * @cfg {Array} fontFamilies An array of available font families
103 defaultFont: 'tahoma',
104 <div id="cfg-Ext.form.HtmlEditor-defaultValue"></div>/**
105 * @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).
107 defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',
109 // private properties
111 validationEvent : false,
115 sourceEditMode : false,
116 onFocus : Ext.emptyFn,
119 defaultAutoCreate : {
121 style:"width:500px;height:300px;",
126 initComponent : function(){
128 <div id="event-Ext.form.HtmlEditor-initialize"></div>/**
130 * Fires when the editor is fully initialized (including the iframe)
131 * @param {HtmlEditor} this
134 <div id="event-Ext.form.HtmlEditor-activate"></div>/**
136 * Fires when the editor is first receives the focus. Any insertion must wait
137 * until after this event.
138 * @param {HtmlEditor} this
141 <div id="event-Ext.form.HtmlEditor-beforesync"></div>/**
143 * Fires before the textarea is updated with content from the editor iframe. Return false
144 * to cancel the sync.
145 * @param {HtmlEditor} this
146 * @param {String} html
149 <div id="event-Ext.form.HtmlEditor-beforepush"></div>/**
151 * Fires before the iframe editor is updated with content from the textarea. Return false
152 * to cancel the push.
153 * @param {HtmlEditor} this
154 * @param {String} html
157 <div id="event-Ext.form.HtmlEditor-sync"></div>/**
159 * Fires when the textarea is updated with content from the editor iframe.
160 * @param {HtmlEditor} this
161 * @param {String} html
164 <div id="event-Ext.form.HtmlEditor-push"></div>/**
166 * Fires when the iframe editor is updated with content from the textarea.
167 * @param {HtmlEditor} this
168 * @param {String} html
171 <div id="event-Ext.form.HtmlEditor-editmodechange"></div>/**
172 * @event editmodechange
173 * Fires when the editor switches edit modes
174 * @param {HtmlEditor} this
175 * @param {Boolean} sourceEdit True if source edit, false if standard editing.
182 createFontOptions : function(){
183 var buf = [], fs = this.fontFamilies, ff, lc;
184 for(var i = 0, len = fs.length; i< len; i++){
186 lc = ff.toLowerCase();
188 '<option value="',lc,'" style="font-family:',ff,';"',
189 (this.defaultFont == lc ? ' selected="true">' : '>'),
198 * Protected method that will not generally be called directly. It
199 * is called when the editor creates its toolbar. Override this method if you need to
200 * add custom toolbar buttons.
201 * @param {HtmlEditor} editor
203 createToolbar : function(editor){
205 var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
\r
208 function btn(id, toggle, handler){
212 iconCls: 'x-edit-'+id,
213 enableToggle:toggle !== false,
215 handler:handler||editor.relayBtnCmd,
216 clickEvent:'mousedown',
217 tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
218 overflowText: editor.buttonTips[id].title || undefined,
224 if(this.enableFont && !Ext.isSafari2){
\r
225 var fontSelectItem = new Ext.Toolbar.Item({
\r
228 cls:'x-font-select',
\r
229 html: this.createFontOptions()
\r
239 if(this.enableFormat){
247 if(this.enableFontSize){
250 btn('increasefontsize', false, this.adjustFont),
251 btn('decreasefontsize', false, this.adjustFont)
255 if(this.enableColors){
260 iconCls: 'x-edit-forecolor',
261 clickEvent:'mousedown',
262 tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
264 menu : new Ext.menu.ColorMenu({
271 select: function(cp, color){
272 this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
276 clickEvent:'mousedown'
281 iconCls: 'x-edit-backcolor',
282 clickEvent:'mousedown',
283 tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
285 menu : new Ext.menu.ColorMenu({
292 select: function(cp, color){
294 this.execCmd('useCSS', false);
295 this.execCmd('hilitecolor', color);
296 this.execCmd('useCSS', true);
299 this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
304 clickEvent:'mousedown'
310 if(this.enableAlignments){
314 btn('justifycenter'),
320 if(this.enableLinks){
323 btn('createlink', false, this.createLink)
327 if(this.enableLists){
330 btn('insertorderedlist'),
331 btn('insertunorderedlist')
334 if(this.enableSourceEdit){
337 btn('sourceedit', true, function(btn){
338 this.toggleSourceEdit(!this.sourceEditMode);
344 // build the toolbar
\r
345 var tb = new Ext.Toolbar({
\r
346 renderTo: this.wrap.dom.firstChild,
\r
350 if (fontSelectItem) {
\r
351 this.fontSelect = fontSelectItem.el;
\r
353 this.mon(this.fontSelect, 'change', function(){
\r
354 var font = this.fontSelect.dom.value;
\r
355 this.relayCmd('fontname', font);
\r
361 // stop form submits
\r
362 this.mon(tb.el, 'click', function(e){
\r
363 e.preventDefault();
\r
371 onDisable: function(){
373 Ext.form.HtmlEditor.superclass.onDisable.call(this);
376 onEnable: function(){
378 Ext.form.HtmlEditor.superclass.onEnable.call(this);
381 setReadOnly: function(readOnly){
382 if(this.initialized){
383 var newDM = readOnly ? 'off' : 'on',
385 if(String(doc.designMode).toLowerCase() != newDM){
386 doc.designMode = newDM;
388 this.disableItems(!readOnly);
390 Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
393 <div id="method-Ext.form.HtmlEditor-getDocMarkup"></div>/**
394 * Protected method that will not generally be called directly. It
395 * is called when the editor initializes the iframe with HTML contents. Override this method if you
396 * want to change the initialization markup of the iframe (e.g. to add stylesheets).
398 getDocMarkup : function(){
399 return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
403 getEditorBody : function(){
404 var doc = this.getDoc();
405 return doc.body || doc.documentElement;
410 return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
415 return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
419 onRender : function(ct, position){
420 Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
421 this.el.dom.style.border = '0 none';
422 this.el.dom.setAttribute('tabIndex', -1);
423 this.el.addClass('x-hidden');
424 if(Ext.isIE){ // fix IE 1px bogus margin
425 this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
427 this.wrap = this.el.wrap({
428 cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
431 this.createToolbar(this);
433 this.disableItems(true);
435 // this.tb.doLayout();
440 var sz = this.el.getSize();
441 this.setSize(sz.width, this.height || sz.height);
443 this.resizeEl = this.positionEl = this.wrap;
446 createIFrame: function(){
447 var iframe = document.createElement('iframe');
448 iframe.name = Ext.id();
449 iframe.frameBorder = '0';
450 iframe.src = Ext.SSL_SECURE_URL;
451 this.wrap.dom.appendChild(iframe);
453 this.iframe = iframe;
455 this.monitorTask = Ext.TaskMgr.start({
456 run: this.checkDesignMode,
462 initFrame : function(){
463 Ext.TaskMgr.stop(this.monitorTask);
464 var doc = this.getDoc();
465 this.win = this.getWin();
468 doc.write(this.getDocMarkup());
471 var task = { // must defer to wait for browser to be ready
473 var doc = this.getDoc();
474 if(doc.body || doc.readyState == 'complete'){
475 Ext.TaskMgr.stop(task);
477 this.initEditor.defer(10, this);
484 Ext.TaskMgr.start(task);
488 checkDesignMode : function(){
489 if(this.wrap && this.wrap.dom.offsetWidth){
490 var doc = this.getDoc();
494 if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){
500 disableItems: function(disabled){
502 this.fontSelect.dom.disabled = disabled;
504 this.tb.items.each(function(item){
505 if(item.getItemId() != 'sourceedit'){
506 item.setDisabled(disabled);
512 onResize : function(w, h){
513 Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
514 if(this.el && this.iframe){
516 var aw = w - this.wrap.getFrameWidth('lr');
517 this.el.setWidth(aw);
518 this.tb.setWidth(aw);
519 this.iframe.style.width = Math.max(aw, 0) + 'px';
522 var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
523 this.el.setHeight(ah);
524 this.iframe.style.height = Math.max(ah, 0) + 'px';
525 var bd = this.getEditorBody();
527 bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
533 <div id="method-Ext.form.HtmlEditor-toggleSourceEdit"></div>/**
534 * Toggles the editor between standard and source edit mode.
535 * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
537 toggleSourceEdit : function(sourceEditMode){
538 if(sourceEditMode === undefined){
539 sourceEditMode = !this.sourceEditMode;
541 this.sourceEditMode = sourceEditMode === true;
542 var btn = this.tb.getComponent('sourceedit');
544 if(btn.pressed !== this.sourceEditMode){
545 btn.toggle(this.sourceEditMode);
550 if(this.sourceEditMode){
551 this.disableItems(true);
553 this.iframe.className = 'x-hidden';
554 this.el.removeClass('x-hidden');
555 this.el.dom.removeAttribute('tabIndex');
558 if(this.initialized && !this.readOnly){
559 this.disableItems(false);
562 this.iframe.className = '';
563 this.el.addClass('x-hidden');
564 this.el.dom.setAttribute('tabIndex', -1);
567 var lastSize = this.lastSize;
569 delete this.lastSize;
570 this.setSize(lastSize);
572 this.fireEvent('editmodechange', this, this.sourceEditMode);
575 // private used internally
576 createLink : function(){
577 var url = prompt(this.createLinkText, this.defaultLinkValue);
578 if(url && url != 'http:/'+'/'){
579 this.relayCmd('createlink', url);
584 initEvents : function(){
585 this.originalValue = this.getValue();
588 <div id="method-Ext.form.HtmlEditor-markInvalid"></div>/**
589 * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
592 markInvalid : Ext.emptyFn,
594 <div id="method-Ext.form.HtmlEditor-clearInvalid"></div>/**
595 * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
598 clearInvalid : Ext.emptyFn,
600 // docs inherit from Field
601 setValue : function(v){
602 Ext.form.HtmlEditor.superclass.setValue.call(this, v);
607 <div id="method-Ext.form.HtmlEditor-cleanHtml"></div>/**
608 * Protected method that will not generally be called directly. If you need/want
609 * custom HTML cleanup, this is the method you should override.
610 * @param {String} html The HTML to be cleaned
611 * @return {String} The cleaned HTML
613 cleanHtml: function(html) {
615 if(Ext.isWebKit){ // strip safari nonsense
616 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
620 * Neat little hack. Strips out all the non-digit characters from the default
621 * value and compares it to the character code of the first character in the string
622 * because it can cause encoding issues when posted to the server.
624 if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
625 html = html.substring(1);
630 <div id="method-Ext.form.HtmlEditor-syncValue"></div>/**
631 * Protected method that will not generally be called directly. Syncs the contents
632 * of the editor iframe with the textarea.
634 syncValue : function(){
635 if(this.initialized){
636 var bd = this.getEditorBody();
637 var html = bd.innerHTML;
639 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
640 var m = bs.match(/text-align:(.*?);/i);
642 html = '<div style="'+m[0]+'">' + html + '</div>';
645 html = this.cleanHtml(html);
646 if(this.fireEvent('beforesync', this, html) !== false){
647 this.el.dom.value = html;
648 this.fireEvent('sync', this, html);
653 //docs inherit from Field
654 getValue : function() {
655 this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
656 return Ext.form.HtmlEditor.superclass.getValue.call(this);
659 <div id="method-Ext.form.HtmlEditor-pushValue"></div>/**
660 * Protected method that will not generally be called directly. Pushes the value of the textarea
661 * into the iframe editor.
663 pushValue : function(){
664 if(this.initialized){
665 var v = this.el.dom.value;
666 if(!this.activated && v.length < 1){
667 v = this.defaultValue;
669 if(this.fireEvent('beforepush', this, v) !== false){
670 this.getEditorBody().innerHTML = v;
672 // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
673 var d = this.getDoc(),
674 mode = d.designMode.toLowerCase();
676 d.designMode = mode.toggle('on', 'off');
679 this.fireEvent('push', this, v);
685 deferFocus : function(){
686 this.focus.defer(10, this);
689 // docs inherit from Field
691 if(this.win && !this.sourceEditMode){
699 initEditor : function(){
700 //Destroying the component during/before initEditor can cause issues.
702 var dbody = this.getEditorBody(),
703 ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat'),
707 ss['background-attachment'] = 'fixed'; // w3c
708 dbody.bgProperties = 'fixed'; // ie
710 Ext.DomHelper.applyStyles(dbody, ss);
716 Ext.EventManager.removeAll(doc);
721 * We need to use createDelegate here, because when using buffer, the delayed task is added
722 * as a property to the function. When the listener is removed, the task is deleted from the function.
723 * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
724 * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
726 fn = this.onEditorEvent.createDelegate(this);
727 Ext.EventManager.on(doc, {
736 Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
738 if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
739 Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
741 doc.editorInitialized = true;
742 this.initialized = true;
744 this.setReadOnly(this.readOnly);
745 this.fireEvent('initialize', this);
750 onDestroy : function(){
751 if(this.monitorTask){
752 Ext.TaskMgr.stop(this.monitorTask);
755 Ext.destroy(this.tb);
756 var doc = this.getDoc();
759 Ext.EventManager.removeAll(doc);
760 for (var prop in doc){
766 this.wrap.dom.innerHTML = '';
772 this.el.removeAllListeners();
775 this.purgeListeners();
779 onFirstFocus : function(){
780 this.activated = true;
781 this.disableItems(false);
782 if(Ext.isGecko){ // prevent silly gecko errors
784 var s = this.win.getSelection();
785 if(!s.focusNode || s.focusNode.nodeType != 3){
786 var r = s.getRangeAt(0);
787 r.selectNodeContents(this.getEditorBody());
792 this.execCmd('useCSS', true);
793 this.execCmd('styleWithCSS', false);
796 this.fireEvent('activate', this);
800 adjustFont: function(btn){
801 var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
803 v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
804 if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
806 // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
820 v = v.constrain(1, 6);
822 if(Ext.isSafari){ // safari
825 v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
827 this.execCmd('FontSize', v);
831 onEditorEvent : function(e){
832 this.updateToolbar();
836 <div id="method-Ext.form.HtmlEditor-updateToolbar"></div>/**
837 * Protected method that will not generally be called directly. It triggers
838 * a toolbar update by reading the markup state of the current selection in the editor.
840 updateToolbar: function(){
851 var btns = this.tb.items.map,
854 if(this.enableFont && !Ext.isSafari2){
855 var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
856 if(name != this.fontSelect.dom.value){
857 this.fontSelect.dom.value = name;
860 if(this.enableFormat){
861 btns.bold.toggle(doc.queryCommandState('bold'));
862 btns.italic.toggle(doc.queryCommandState('italic'));
863 btns.underline.toggle(doc.queryCommandState('underline'));
865 if(this.enableAlignments){
866 btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
867 btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
868 btns.justifyright.toggle(doc.queryCommandState('justifyright'));
870 if(!Ext.isSafari2 && this.enableLists){
871 btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
872 btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
875 Ext.menu.MenuMgr.hideAll();
881 relayBtnCmd : function(btn){
882 this.relayCmd(btn.getItemId());
885 <div id="method-Ext.form.HtmlEditor-relayCmd"></div>/**
886 * Executes a Midas editor command on the editor document and performs necessary focus and
887 * toolbar updates. <b>This should only be called after the editor is initialized.</b>
888 * @param {String} cmd The Midas command
889 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
891 relayCmd : function(cmd, value){
894 this.execCmd(cmd, value);
895 this.updateToolbar();
899 <div id="method-Ext.form.HtmlEditor-execCmd"></div>/**
900 * Executes a Midas editor command directly on the editor document.
901 * For visual commands, you should use {@link #relayCmd} instead.
902 * <b>This should only be called after the editor is initialized.</b>
903 * @param {String} cmd The Midas command
904 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
906 execCmd : function(cmd, value){
907 var doc = this.getDoc();
908 doc.execCommand(cmd, false, value === undefined ? null : value);
913 applyCommand : function(e){
915 var c = e.getCharCode(), cmd;
917 c = String.fromCharCode(c);
939 <div id="method-Ext.form.HtmlEditor-insertAtCursor"></div>/**
940 * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
942 * @param {String} text
944 insertAtCursor : function(text){
950 var doc = this.getDoc(),
951 r = doc.selection.createRange();
959 this.execCmd('InsertHTML', text);
965 fixKeys : function(){ // load time branching for fastest keydown performance
973 r = doc.selection.createRange();
976 r.pasteHTML(' ');
979 }else if(k == e.ENTER){
980 r = doc.selection.createRange();
982 var target = r.parentElement();
983 if(!target || target.tagName.toLowerCase() != 'li'){
985 r.pasteHTML('<br />');
992 }else if(Ext.isOpera){
998 this.execCmd('InsertHTML',' ');
1002 }else if(Ext.isWebKit){
1007 this.execCmd('InsertText','\t');
1009 }else if(k == e.ENTER){
1011 this.execCmd('InsertHtml','<br /><br />');
1018 <div id="method-Ext.form.HtmlEditor-getToolbar"></div>/**
1019 * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
1020 * @return {Ext.Toolbar}
1022 getToolbar : function(){
1026 <div id="prop-Ext.form.HtmlEditor-buttonTips"></div>/**
1027 * Object collection of toolbar tooltips for the buttons in the editor. The key
1028 * is the command id associated with that button and the value is a valid QuickTips object.
1033 title: 'Bold (Ctrl+B)',
1034 text: 'Make the selected text bold.',
1035 cls: 'x-html-editor-tip'
1038 title: 'Italic (Ctrl+I)',
1039 text: 'Make the selected text italic.',
1040 cls: 'x-html-editor-tip'
1048 title: 'Bold (Ctrl+B)',
1049 text: 'Make the selected text bold.',
1050 cls: 'x-html-editor-tip'
1053 title: 'Italic (Ctrl+I)',
1054 text: 'Make the selected text italic.',
1055 cls: 'x-html-editor-tip'
1058 title: 'Underline (Ctrl+U)',
1059 text: 'Underline the selected text.',
1060 cls: 'x-html-editor-tip'
1062 increasefontsize : {
1064 text: 'Increase the font size.',
1065 cls: 'x-html-editor-tip'
1067 decreasefontsize : {
1068 title: 'Shrink Text',
1069 text: 'Decrease the font size.',
1070 cls: 'x-html-editor-tip'
1073 title: 'Text Highlight Color',
1074 text: 'Change the background color of the selected text.',
1075 cls: 'x-html-editor-tip'
1078 title: 'Font Color',
1079 text: 'Change the color of the selected text.',
1080 cls: 'x-html-editor-tip'
1083 title: 'Align Text Left',
1084 text: 'Align text to the left.',
1085 cls: 'x-html-editor-tip'
1088 title: 'Center Text',
1089 text: 'Center text in the editor.',
1090 cls: 'x-html-editor-tip'
1093 title: 'Align Text Right',
1094 text: 'Align text to the right.',
1095 cls: 'x-html-editor-tip'
1097 insertunorderedlist : {
1098 title: 'Bullet List',
1099 text: 'Start a bulleted list.',
1100 cls: 'x-html-editor-tip'
1102 insertorderedlist : {
1103 title: 'Numbered List',
1104 text: 'Start a numbered list.',
1105 cls: 'x-html-editor-tip'
1109 text: 'Make the selected text a hyperlink.',
1110 cls: 'x-html-editor-tip'
1113 title: 'Source Edit',
1114 text: 'Switch to source editing mode.',
1115 cls: 'x-html-editor-tip'
1119 // hide stuff that is not compatible
1120 <div id="event-Ext.form.HtmlEditor-blur"></div>/**
1124 <div id="event-Ext.form.HtmlEditor-change"></div>/**
1128 <div id="event-Ext.form.HtmlEditor-focus"></div>/**
1132 <div id="event-Ext.form.HtmlEditor-specialkey"></div>/**
1136 <div id="cfg-Ext.form.HtmlEditor-fieldClass"></div>/**
1137 * @cfg {String} fieldClass @hide
1139 <div id="cfg-Ext.form.HtmlEditor-focusClass"></div>/**
1140 * @cfg {String} focusClass @hide
1142 <div id="cfg-Ext.form.HtmlEditor-autoCreate"></div>/**
1143 * @cfg {String} autoCreate @hide
1145 <div id="cfg-Ext.form.HtmlEditor-inputType"></div>/**
1146 * @cfg {String} inputType @hide
1148 <div id="cfg-Ext.form.HtmlEditor-invalidClass"></div>/**
1149 * @cfg {String} invalidClass @hide
1151 <div id="cfg-Ext.form.HtmlEditor-invalidText"></div>/**
1152 * @cfg {String} invalidText @hide
1154 <div id="cfg-Ext.form.HtmlEditor-msgFx"></div>/**
1155 * @cfg {String} msgFx @hide
1157 <div id="cfg-Ext.form.HtmlEditor-validateOnBlur"></div>/**
1158 * @cfg {String} validateOnBlur @hide
1160 <div id="cfg-Ext.form.HtmlEditor-allowDomMove"></div>/**
1161 * @cfg {Boolean} allowDomMove @hide
1163 <div id="cfg-Ext.form.HtmlEditor-applyTo"></div>/**
1164 * @cfg {String} applyTo @hide
1166 <div id="cfg-Ext.form.HtmlEditor-autoHeight"></div>/**
1167 * @cfg {String} autoHeight @hide
1169 <div id="cfg-Ext.form.HtmlEditor-autoWidth"></div>/**
1170 * @cfg {String} autoWidth @hide
1172 <div id="cfg-Ext.form.HtmlEditor-cls"></div>/**
1173 * @cfg {String} cls @hide
1175 <div id="cfg-Ext.form.HtmlEditor-disabled"></div>/**
1176 * @cfg {String} disabled @hide
1178 <div id="cfg-Ext.form.HtmlEditor-disabledClass"></div>/**
1179 * @cfg {String} disabledClass @hide
1181 <div id="cfg-Ext.form.HtmlEditor-msgTarget"></div>/**
1182 * @cfg {String} msgTarget @hide
1184 <div id="cfg-Ext.form.HtmlEditor-readOnly"></div>/**
1185 * @cfg {String} readOnly @hide
1187 <div id="cfg-Ext.form.HtmlEditor-style"></div>/**
1188 * @cfg {String} style @hide
1190 <div id="cfg-Ext.form.HtmlEditor-validationDelay"></div>/**
1191 * @cfg {String} validationDelay @hide
1193 <div id="cfg-Ext.form.HtmlEditor-validationEvent"></div>/**
1194 * @cfg {String} validationEvent @hide
1196 <div id="cfg-Ext.form.HtmlEditor-tabIndex"></div>/**
1197 * @cfg {String} tabIndex @hide
1199 <div id="prop-Ext.form.HtmlEditor-disabled"></div>/**
1200 * @property disabled
1203 <div id="method-Ext.form.HtmlEditor-applyToMarkup"></div>/**
1204 * @method applyToMarkup
1207 <div id="method-Ext.form.HtmlEditor-disable"></div>/**
1211 <div id="method-Ext.form.HtmlEditor-enable"></div>/**
1215 <div id="method-Ext.form.HtmlEditor-validate"></div>/**
1219 <div id="event-Ext.form.HtmlEditor-valid"></div>/**
1223 <div id="method-Ext.form.HtmlEditor-setDisabled"></div>/**
1224 * @method setDisabled
1227 <div id="cfg-Ext.form.HtmlEditor-null"></div>/**
1232 Ext.reg('htmleditor', Ext.form.HtmlEditor);</pre>
\r