2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.form.HtmlEditor
\r
11 * @extends Ext.form.Field
\r
12 * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
\r
13 * automatically hidden when needed. These are noted in the config options where appropriate.
\r
14 * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
\r
15 * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
\r
16 * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
\r
17 * supported by this editor.</b>
\r
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
\r
19 * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
\r
20 * <br><br>Example usage:
\r
22 // Simple example rendered with default options:
\r
23 Ext.QuickTips.init(); // enable tooltips
\r
24 new Ext.form.HtmlEditor({
\r
25 renderTo: Ext.getBody(),
\r
30 // Passed via xtype into a container and with custom options:
\r
31 Ext.QuickTips.init(); // enable tooltips
\r
33 title: 'HTML Editor',
\r
34 renderTo: Ext.getBody(),
\r
40 xtype: 'htmleditor',
\r
41 enableColors: false,
\r
42 enableAlignments: false
\r
47 * Create a new HtmlEditor
\r
48 * @param {Object} config
\r
51 Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
\r
53 * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
\r
55 enableFormat : true,
\r
57 * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
\r
59 enableFontSize : true,
\r
61 * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
\r
63 enableColors : true,
\r
65 * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
\r
67 enableAlignments : true,
\r
69 * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
\r
73 * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
\r
75 enableSourceEdit : true,
\r
77 * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
\r
81 * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
\r
85 * @cfg {String} createLinkText The default text for the create link prompt
\r
87 createLinkText : 'Please enter the URL for the link:',
\r
89 * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
\r
91 defaultLinkValue : 'http:/'+'/',
\r
93 * @cfg {Array} fontFamilies An array of available font families
\r
102 defaultFont: 'tahoma',
\r
104 // private properties
\r
105 validationEvent : false,
\r
107 initialized : false,
\r
109 sourceEditMode : false,
\r
110 onFocus : Ext.emptyFn,
\r
112 hideMode:'offsets',
\r
113 defaultAutoCreate : {
\r
115 style:"width:500px;height:300px;",
\r
116 autocomplete: "off"
\r
120 initComponent : function(){
\r
123 * @event initialize
\r
124 * Fires when the editor is fully initialized (including the iframe)
\r
125 * @param {HtmlEditor} this
\r
130 * Fires when the editor is first receives the focus. Any insertion must wait
\r
131 * until after this event.
\r
132 * @param {HtmlEditor} this
\r
136 * @event beforesync
\r
137 * Fires before the textarea is updated with content from the editor iframe. Return false
\r
138 * to cancel the sync.
\r
139 * @param {HtmlEditor} this
\r
140 * @param {String} html
\r
144 * @event beforepush
\r
145 * Fires before the iframe editor is updated with content from the textarea. Return false
\r
146 * to cancel the push.
\r
147 * @param {HtmlEditor} this
\r
148 * @param {String} html
\r
153 * Fires when the textarea is updated with content from the editor iframe.
\r
154 * @param {HtmlEditor} this
\r
155 * @param {String} html
\r
160 * Fires when the iframe editor is updated with content from the textarea.
\r
161 * @param {HtmlEditor} this
\r
162 * @param {String} html
\r
166 * @event editmodechange
\r
167 * Fires when the editor switches edit modes
\r
168 * @param {HtmlEditor} this
\r
169 * @param {Boolean} sourceEdit True if source edit, false if standard editing.
\r
176 createFontOptions : function(){
\r
177 var buf = [], fs = this.fontFamilies, ff, lc;
\r
178 for(var i = 0, len = fs.length; i< len; i++){
\r
180 lc = ff.toLowerCase();
\r
182 '<option value="',lc,'" style="font-family:',ff,';"',
\r
183 (this.defaultFont == lc ? ' selected="true">' : '>'),
\r
188 return buf.join('');
\r
192 * Protected method that will not generally be called directly. It
\r
193 * is called when the editor creates its toolbar. Override this method if you need to
\r
194 * add custom toolbar buttons.
\r
195 * @param {HtmlEditor} editor
\r
197 createToolbar : function(editor){
\r
199 var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
\r
201 function btn(id, toggle, handler){
\r
204 cls : 'x-btn-icon x-edit-'+id,
\r
205 enableToggle:toggle !== false,
\r
207 handler:handler||editor.relayBtnCmd,
\r
208 clickEvent:'mousedown',
\r
209 tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
\r
214 // build the toolbar
\r
215 var tb = new Ext.Toolbar({
\r
216 renderTo:this.wrap.dom.firstChild
\r
219 // stop form submits
\r
220 tb.el.on('click', function(e){
\r
221 e.preventDefault();
\r
224 if(this.enableFont && !Ext.isSafari2){
\r
225 this.fontSelect = tb.el.createChild({
\r
227 cls:'x-font-select',
\r
228 html: this.createFontOptions()
\r
230 this.fontSelect.on('change', function(){
\r
231 var font = this.fontSelect.dom.value;
\r
232 this.relayCmd('fontname', font);
\r
236 this.fontSelect.dom,
\r
241 if(this.enableFormat){
\r
249 if(this.enableFontSize){
\r
252 btn('increasefontsize', false, this.adjustFont),
\r
253 btn('decreasefontsize', false, this.adjustFont)
\r
257 if(this.enableColors){
\r
260 itemId:'forecolor',
\r
261 cls:'x-btn-icon x-edit-forecolor',
\r
262 clickEvent:'mousedown',
\r
263 tooltip: tipsEnabled ? editor.buttonTips['forecolor'] || undefined : undefined,
\r
265 menu : new Ext.menu.ColorMenu({
\r
266 allowReselect: true,
\r
267 focus: Ext.emptyFn,
\r
270 selectHandler: function(cp, color){
\r
271 this.execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
\r
275 clickEvent:'mousedown'
\r
278 itemId:'backcolor',
\r
279 cls:'x-btn-icon x-edit-backcolor',
\r
280 clickEvent:'mousedown',
\r
281 tooltip: tipsEnabled ? editor.buttonTips['backcolor'] || undefined : undefined,
\r
283 menu : new Ext.menu.ColorMenu({
\r
284 focus: Ext.emptyFn,
\r
287 allowReselect: true,
\r
288 selectHandler: function(cp, color){
\r
290 this.execCmd('useCSS', false);
\r
291 this.execCmd('hilitecolor', color);
\r
292 this.execCmd('useCSS', true);
\r
295 this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
\r
300 clickEvent:'mousedown'
\r
306 if(this.enableAlignments){
\r
309 btn('justifyleft'),
\r
310 btn('justifycenter'),
\r
311 btn('justifyright')
\r
315 if(!Ext.isSafari2){
\r
316 if(this.enableLinks){
\r
319 btn('createlink', false, this.createLink)
\r
323 if(this.enableLists){
\r
326 btn('insertorderedlist'),
\r
327 btn('insertunorderedlist')
\r
330 if(this.enableSourceEdit){
\r
333 btn('sourceedit', true, function(btn){
\r
334 this.toggleSourceEdit(btn.pressed);
\r
344 * Protected method that will not generally be called directly. It
\r
345 * is called when the editor initializes the iframe with HTML contents. Override this method if you
\r
346 * want to change the initialization markup of the iframe (e.g. to add stylesheets).
\r
348 getDocMarkup : function(){
\r
349 return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
\r
353 getEditorBody : function(){
\r
354 return this.doc.body || this.doc.documentElement;
\r
358 getDoc : function(){
\r
359 return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
\r
363 getWin : function(){
\r
364 return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
\r
368 onRender : function(ct, position){
\r
369 Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
\r
370 this.el.dom.style.border = '0 none';
\r
371 this.el.dom.setAttribute('tabIndex', -1);
\r
372 this.el.addClass('x-hidden');
\r
373 if(Ext.isIE){ // fix IE 1px bogus margin
\r
374 this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
\r
376 this.wrap = this.el.wrap({
\r
377 cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
\r
380 this.createToolbar(this);
\r
382 this.tb.items.each(function(item){
\r
383 if(item.itemId != 'sourceedit'){
\r
388 var iframe = document.createElement('iframe');
\r
389 iframe.name = Ext.id();
\r
390 iframe.frameBorder = '0';
\r
392 iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";
\r
394 this.wrap.dom.appendChild(iframe);
\r
396 this.iframe = iframe;
\r
400 if(this.autoMonitorDesignMode !== false){
\r
401 this.monitorTask = Ext.TaskMgr.start({
\r
402 run: this.checkDesignMode,
\r
409 var sz = this.el.getSize();
\r
410 this.setSize(sz.width, this.height || sz.height);
\r
414 initFrame : function(){
\r
415 this.doc = this.getDoc();
\r
416 this.win = this.getWin();
\r
419 this.doc.write(this.getDocMarkup());
\r
422 var task = { // must defer to wait for browser to be ready
\r
424 if(this.doc.body || this.doc.readyState == 'complete'){
\r
425 Ext.TaskMgr.stop(task);
\r
426 this.doc.designMode="on";
\r
427 this.initEditor.defer(10, this);
\r
434 Ext.TaskMgr.start(task);
\r
438 checkDesignMode : function(){
\r
439 if(this.wrap && this.wrap.dom.offsetWidth){
\r
440 var doc = this.getDoc();
\r
444 if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){
\r
451 onResize : function(w, h){
\r
452 Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
\r
453 if(this.el && this.iframe){
\r
454 if(typeof w == 'number'){
\r
455 var aw = w - this.wrap.getFrameWidth('lr');
\r
456 this.el.setWidth(this.adjustWidth('textarea', aw));
\r
457 this.iframe.style.width = Math.max(aw, 0) + 'px';
\r
459 if(typeof h == 'number'){
\r
460 var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
\r
461 this.el.setHeight(this.adjustWidth('textarea', ah));
\r
462 this.iframe.style.height = Math.max(ah, 0) + 'px';
\r
464 this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
\r
471 * Toggles the editor between standard and source edit mode.
\r
472 * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
\r
474 toggleSourceEdit : function(sourceEditMode){
\r
475 if(sourceEditMode === undefined){
\r
476 sourceEditMode = !this.sourceEditMode;
\r
478 this.sourceEditMode = sourceEditMode === true;
\r
479 var btn = this.tb.items.get('sourceedit');
\r
480 if(btn.pressed !== this.sourceEditMode){
\r
481 btn.toggle(this.sourceEditMode);
\r
484 if(this.sourceEditMode){
\r
485 this.tb.items.each(function(item){
\r
486 if(item.itemId != 'sourceedit'){
\r
491 this.iframe.className = 'x-hidden';
\r
492 this.el.removeClass('x-hidden');
\r
493 this.el.dom.removeAttribute('tabIndex');
\r
496 if(this.initialized){
\r
497 this.tb.items.each(function(item){
\r
502 this.iframe.className = '';
\r
503 this.el.addClass('x-hidden');
\r
504 this.el.dom.setAttribute('tabIndex', -1);
\r
507 var lastSize = this.lastSize;
\r
509 delete this.lastSize;
\r
510 this.setSize(lastSize);
\r
512 this.fireEvent('editmodechange', this, this.sourceEditMode);
\r
515 // private used internally
\r
516 createLink : function(){
\r
517 var url = prompt(this.createLinkText, this.defaultLinkValue);
\r
518 if(url && url != 'http:/'+'/'){
\r
519 this.relayCmd('createlink', url);
\r
523 // private (for BoxComponent)
\r
524 adjustSize : Ext.BoxComponent.prototype.adjustSize,
\r
526 // private (for BoxComponent)
\r
527 getResizeEl : function(){
\r
531 // private (for BoxComponent)
\r
532 getPositionEl : function(){
\r
537 initEvents : function(){
\r
538 this.originalValue = this.getValue();
\r
542 * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
\r
545 markInvalid : Ext.emptyFn,
\r
548 * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
\r
551 clearInvalid : Ext.emptyFn,
\r
553 // docs inherit from Field
\r
554 setValue : function(v){
\r
555 Ext.form.HtmlEditor.superclass.setValue.call(this, v);
\r
560 * Protected method that will not generally be called directly. If you need/want
\r
561 * custom HTML cleanup, this is the method you should override.
\r
562 * @param {String} html The HTML to be cleaned
\r
563 * @return {String} The cleaned HTML
\r
565 cleanHtml : function(html){
\r
566 html = String(html);
\r
567 if(html.length > 5){
\r
568 if(Ext.isSafari){ // strip safari nonsense
\r
569 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
\r
572 if(html == ' '){
\r
579 * Protected method that will not generally be called directly. Syncs the contents
\r
580 * of the editor iframe with the textarea.
\r
582 syncValue : function(){
\r
583 if(this.initialized){
\r
584 var bd = this.getEditorBody();
\r
585 var html = bd.innerHTML;
\r
587 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
\r
588 var m = bs.match(/text-align:(.*?);/i);
\r
590 html = '<div style="'+m[0]+'">' + html + '</div>';
\r
593 html = this.cleanHtml(html);
\r
594 if(this.fireEvent('beforesync', this, html) !== false){
\r
595 this.el.dom.value = html;
\r
596 this.fireEvent('sync', this, html);
\r
601 //docs inherit from Field
\r
602 getValue : function() {
\r
604 return Ext.form.HtmlEditor.superclass.getValue.call(this);
\r
609 * Protected method that will not generally be called directly. Pushes the value of the textarea
\r
610 * into the iframe editor.
\r
612 pushValue : function(){
\r
613 if(this.initialized){
\r
614 var v = this.el.dom.value;
\r
615 if(!this.activated && v.length < 1){
\r
618 if(this.fireEvent('beforepush', this, v) !== false){
\r
619 this.getEditorBody().innerHTML = v;
\r
620 this.fireEvent('push', this, v);
\r
626 deferFocus : function(){
\r
627 this.focus.defer(10, this);
\r
630 // docs inherit from Field
\r
631 focus : function(){
\r
632 if(this.win && !this.sourceEditMode){
\r
640 initEditor : function(){
\r
641 var dbody = this.getEditorBody();
\r
642 var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
\r
643 ss['background-attachment'] = 'fixed'; // w3c
\r
644 dbody.bgProperties = 'fixed'; // ie
\r
646 Ext.DomHelper.applyStyles(dbody, ss);
\r
650 Ext.EventManager.removeAll(this.doc);
\r
654 this.doc = this.getDoc();
\r
656 Ext.EventManager.on(this.doc, {
\r
657 'mousedown': this.onEditorEvent,
\r
658 'dblclick': this.onEditorEvent,
\r
659 'click': this.onEditorEvent,
\r
660 'keyup': this.onEditorEvent,
\r
666 Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
\r
668 if(Ext.isIE || Ext.isSafari || Ext.isOpera){
\r
669 Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
\r
671 this.initialized = true;
\r
673 this.fireEvent('initialize', this);
\r
675 this.doc.editorInitialized = true;
\r
681 onDestroy : function(){
\r
682 if(this.monitorTask){
\r
683 Ext.TaskMgr.stop(this.monitorTask);
\r
686 this.tb.items.each(function(item){
\r
688 item.menu.removeAll();
\r
690 item.menu.el.destroy();
\r
695 this.wrap.dom.innerHTML = '';
\r
696 this.wrap.remove();
\r
701 onFirstFocus : function(){
\r
702 this.activated = true;
\r
703 this.tb.items.each(function(item){
\r
706 if(Ext.isGecko){ // prevent silly gecko errors
\r
708 var s = this.win.getSelection();
\r
709 if(!s.focusNode || s.focusNode.nodeType != 3){
\r
710 var r = s.getRangeAt(0);
\r
711 r.selectNodeContents(this.getEditorBody());
\r
716 this.execCmd('useCSS', true);
\r
717 this.execCmd('styleWithCSS', false);
\r
720 this.fireEvent('activate', this);
\r
724 adjustFont: function(btn){
\r
725 var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;
\r
727 var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);
\r
728 if(Ext.isSafari3 || Ext.isAir){
\r
730 // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
\r
744 v = v.constrain(1, 6);
\r
746 if(Ext.isSafari){ // safari
\r
749 v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
\r
751 this.execCmd('FontSize', v);
\r
755 onEditorEvent : function(e){
\r
756 this.updateToolbar();
\r
761 * Protected method that will not generally be called directly. It triggers
\r
762 * a toolbar update by reading the markup state of the current selection in the editor.
\r
764 updateToolbar: function(){
\r
766 if(!this.activated){
\r
767 this.onFirstFocus();
\r
771 var btns = this.tb.items.map, doc = this.doc;
\r
773 if(this.enableFont && !Ext.isSafari2){
\r
774 var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
\r
775 if(name != this.fontSelect.dom.value){
\r
776 this.fontSelect.dom.value = name;
\r
779 if(this.enableFormat){
\r
780 btns.bold.toggle(doc.queryCommandState('bold'));
\r
781 btns.italic.toggle(doc.queryCommandState('italic'));
\r
782 btns.underline.toggle(doc.queryCommandState('underline'));
\r
784 if(this.enableAlignments){
\r
785 btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
\r
786 btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
\r
787 btns.justifyright.toggle(doc.queryCommandState('justifyright'));
\r
789 if(!Ext.isSafari2 && this.enableLists){
\r
790 btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
\r
791 btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
\r
794 Ext.menu.MenuMgr.hideAll();
\r
800 relayBtnCmd : function(btn){
\r
801 this.relayCmd(btn.itemId);
\r
805 * Executes a Midas editor command on the editor document and performs necessary focus and
\r
806 * toolbar updates. <b>This should only be called after the editor is initialized.</b>
\r
807 * @param {String} cmd The Midas command
\r
808 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
\r
810 relayCmd : function(cmd, value){
\r
813 this.execCmd(cmd, value);
\r
814 this.updateToolbar();
\r
815 }).defer(10, this);
\r
819 * Executes a Midas editor command directly on the editor document.
\r
820 * For visual commands, you should use {@link #relayCmd} instead.
\r
821 * <b>This should only be called after the editor is initialized.</b>
\r
822 * @param {String} cmd The Midas command
\r
823 * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
\r
825 execCmd : function(cmd, value){
\r
826 this.doc.execCommand(cmd, false, value === undefined ? null : value);
\r
831 applyCommand : function(e){
\r
833 var c = e.getCharCode(), cmd;
\r
835 c = String.fromCharCode(c);
\r
851 e.preventDefault();
\r
858 * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
\r
860 * @param {String} text
\r
862 insertAtCursor : function(text){
\r
863 if(!this.activated){
\r
868 var r = this.doc.selection.createRange();
\r
875 }else if(Ext.isGecko || Ext.isOpera){
\r
877 this.execCmd('InsertHTML', text);
\r
879 }else if(Ext.isSafari){
\r
880 this.execCmd('InsertText', text);
\r
886 fixKeys : function(){ // load time branching for fastest keydown performance
\r
888 return function(e){
\r
889 var k = e.getKey(), r;
\r
892 r = this.doc.selection.createRange();
\r
895 r.pasteHTML(' ');
\r
898 }else if(k == e.ENTER){
\r
899 r = this.doc.selection.createRange();
\r
901 var target = r.parentElement();
\r
902 if(!target || target.tagName.toLowerCase() != 'li'){
\r
904 r.pasteHTML('<br />');
\r
911 }else if(Ext.isOpera){
\r
912 return function(e){
\r
913 var k = e.getKey();
\r
917 this.execCmd('InsertHTML',' ');
\r
921 }else if(Ext.isSafari){
\r
922 return function(e){
\r
923 var k = e.getKey();
\r
926 this.execCmd('InsertText','\t');
\r
934 * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
\r
935 * @return {Ext.Toolbar}
\r
937 getToolbar : function(){
\r
942 * Object collection of toolbar tooltips for the buttons in the editor. The key
\r
943 * is the command id associated with that button and the value is a valid QuickTips object.
\r
948 title: 'Bold (Ctrl+B)',
\r
949 text: 'Make the selected text bold.',
\r
950 cls: 'x-html-editor-tip'
\r
953 title: 'Italic (Ctrl+I)',
\r
954 text: 'Make the selected text italic.',
\r
955 cls: 'x-html-editor-tip'
\r
963 title: 'Bold (Ctrl+B)',
\r
964 text: 'Make the selected text bold.',
\r
965 cls: 'x-html-editor-tip'
\r
968 title: 'Italic (Ctrl+I)',
\r
969 text: 'Make the selected text italic.',
\r
970 cls: 'x-html-editor-tip'
\r
973 title: 'Underline (Ctrl+U)',
\r
974 text: 'Underline the selected text.',
\r
975 cls: 'x-html-editor-tip'
\r
977 increasefontsize : {
\r
978 title: 'Grow Text',
\r
979 text: 'Increase the font size.',
\r
980 cls: 'x-html-editor-tip'
\r
982 decreasefontsize : {
\r
983 title: 'Shrink Text',
\r
984 text: 'Decrease the font size.',
\r
985 cls: 'x-html-editor-tip'
\r
988 title: 'Text Highlight Color',
\r
989 text: 'Change the background color of the selected text.',
\r
990 cls: 'x-html-editor-tip'
\r
993 title: 'Font Color',
\r
994 text: 'Change the color of the selected text.',
\r
995 cls: 'x-html-editor-tip'
\r
998 title: 'Align Text Left',
\r
999 text: 'Align text to the left.',
\r
1000 cls: 'x-html-editor-tip'
\r
1003 title: 'Center Text',
\r
1004 text: 'Center text in the editor.',
\r
1005 cls: 'x-html-editor-tip'
\r
1008 title: 'Align Text Right',
\r
1009 text: 'Align text to the right.',
\r
1010 cls: 'x-html-editor-tip'
\r
1012 insertunorderedlist : {
\r
1013 title: 'Bullet List',
\r
1014 text: 'Start a bulleted list.',
\r
1015 cls: 'x-html-editor-tip'
\r
1017 insertorderedlist : {
\r
1018 title: 'Numbered List',
\r
1019 text: 'Start a numbered list.',
\r
1020 cls: 'x-html-editor-tip'
\r
1023 title: 'Hyperlink',
\r
1024 text: 'Make the selected text a hyperlink.',
\r
1025 cls: 'x-html-editor-tip'
\r
1028 title: 'Source Edit',
\r
1029 text: 'Switch to source editing mode.',
\r
1030 cls: 'x-html-editor-tip'
\r
1034 // hide stuff that is not compatible
\r
1048 * @event specialkey
\r
1052 * @cfg {String} fieldClass @hide
\r
1055 * @cfg {String} focusClass @hide
\r
1058 * @cfg {String} autoCreate @hide
\r
1061 * @cfg {String} inputType @hide
\r
1064 * @cfg {String} invalidClass @hide
\r
1067 * @cfg {String} invalidText @hide
\r
1070 * @cfg {String} msgFx @hide
\r
1073 * @cfg {String} validateOnBlur @hide
\r
1076 * @cfg {Boolean} allowDomMove @hide
\r
1079 * @cfg {String} applyTo @hide
\r
1082 * @cfg {String} autoHeight @hide
\r
1085 * @cfg {String} autoWidth @hide
\r
1088 * @cfg {String} cls @hide
\r
1091 * @cfg {String} disabled @hide
\r
1094 * @cfg {String} disabledClass @hide
\r
1097 * @cfg {String} msgTarget @hide
\r
1100 * @cfg {String} readOnly @hide
\r
1103 * @cfg {String} style @hide
\r
1106 * @cfg {String} validationDelay @hide
\r
1109 * @cfg {String} validationEvent @hide
\r
1112 * @cfg {String} tabIndex @hide
\r
1115 * @property disabled
\r
1119 * @method applyToMarkup
\r
1131 * @method validate
\r
1139 * @method setDisabled
\r
1147 Ext.reg('htmleditor', Ext.form.HtmlEditor);