<!DOCTYPE html>
|
<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>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-form-field-HtmlEditor'>/**
|
</span> * 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.
|
*
|
* 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.tip.QuickTipManager} singleton is
|
* {@link Ext.tip.QuickTipManager#init initialized}.
|
*
|
* 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.
|
*
|
* # Example usage
|
*
|
* Simple example rendered with default options:
|
*
|
* @example
|
* Ext.tip.QuickTipManager.init(); // enable tooltips
|
* Ext.create('Ext.form.HtmlEditor', {
|
* width: 580,
|
* height: 250,
|
* renderTo: Ext.getBody()
|
* });
|
*
|
* Passed via xtype into a container and with custom options:
|
*
|
* @example
|
* Ext.tip.QuickTipManager.init(); // enable tooltips
|
* new Ext.panel.Panel({
|
* title: 'HTML Editor',
|
* renderTo: Ext.getBody(),
|
* width: 550,
|
* height: 250,
|
* frame: true,
|
* layout: 'fit',
|
* items: {
|
* xtype: 'htmleditor',
|
* enableColors: false,
|
* enableAlignments: false
|
* }
|
* });
|
*
|
* # Reflow issues
|
*
|
* In some browsers, a layout reflow will cause the underlying editor iframe to be reset. This
|
* is most commonly seen when using the editor in collapsed panels with animation. In these cases
|
* it is best to avoid animation. More information can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=90268
|
*/
|
Ext.define('Ext.form.field.HtmlEditor', {
|
extend: 'Ext.form.FieldContainer',
|
mixins: {
|
field: 'Ext.form.field.Field'
|
},
|
alias: 'widget.htmleditor',
|
alternateClassName: 'Ext.form.HtmlEditor',
|
requires: [
|
'Ext.tip.QuickTipManager',
|
'Ext.picker.Color',
|
'Ext.layout.container.VBox',
|
'Ext.toolbar.Item',
|
'Ext.toolbar.Toolbar',
|
'Ext.util.Format',
|
'Ext.layout.component.field.HtmlEditor'
|
],
|
|
<span id='Ext-form-field-HtmlEditor-cfg-componentLayout'> componentLayout: 'htmleditor',
|
</span>
|
<span id='Ext-form-field-HtmlEditor-property-componentTpl'> componentTpl: [
|
</span> '{beforeTextAreaTpl}',
|
'<textarea id="{id}-textareaEl" name="{name}" tabIndex="-1" {inputAttrTpl}',
|
' class="{textareaCls}" autocomplete="off">',
|
'{[Ext.util.Format.htmlEncode(values.value)]}',
|
'</textarea>',
|
'{afterTextAreaTpl}',
|
'{beforeIFrameTpl}',
|
'<iframe id="{id}-iframeEl" name="{iframeName}" frameBorder="0" {iframeAttrTpl}',
|
' src="{iframeSrc}" class="{iframeCls}"></iframe>',
|
'{afterIFrameTpl}',
|
{
|
disableFormats: true
|
}
|
],
|
|
<span id='Ext-form-field-HtmlEditor-property-stretchInputElFixed'> stretchInputElFixed: true,
|
</span>
|
<span id='Ext-form-field-HtmlEditor-property-subTplInsertions'> subTplInsertions: [
|
</span><span id='Ext-form-field-HtmlEditor-cfg-beforeTextAreaTpl'> /**
|
</span> * @cfg {String/Array/Ext.XTemplate} beforeTextAreaTpl
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
* before the textarea element. If an `XTemplate` is used, the component's
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
*/
|
'beforeTextAreaTpl',
|
|
<span id='Ext-form-field-HtmlEditor-cfg-afterTextAreaTpl'> /**
|
</span> * @cfg {String/Array/Ext.XTemplate} afterTextAreaTpl
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
* after the textarea element. If an `XTemplate` is used, the component's
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
*/
|
'afterTextAreaTpl',
|
|
<span id='Ext-form-field-HtmlEditor-cfg-beforeIFrameTpl'> /**
|
</span> * @cfg {String/Array/Ext.XTemplate} beforeIFrameTpl
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
* before the iframe element. If an `XTemplate` is used, the component's
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
*/
|
'beforeIFrameTpl',
|
|
<span id='Ext-form-field-HtmlEditor-cfg-afterIFrameTpl'> /**
|
</span> * @cfg {String/Array/Ext.XTemplate} afterIFrameTpl
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
* after the iframe element. If an `XTemplate` is used, the component's
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
*/
|
'afterIFrameTpl',
|
|
<span id='Ext-form-field-HtmlEditor-cfg-iframeAttrTpl'> /**
|
</span> * @cfg {String/Array/Ext.XTemplate} iframeAttrTpl
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
* inside the iframe element (as attributes). If an `XTemplate` is used, the component's
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
*/
|
'iframeAttrTpl',
|
|
// inherited
|
'inputAttrTpl'
|
],
|
|
<span id='Ext-form-field-HtmlEditor-cfg-enableFormat'> /**
|
</span> * @cfg {Boolean} enableFormat
|
* Enable the bold, italic and underline buttons
|
*/
|
enableFormat: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableFontSize'> /**
|
</span> * @cfg {Boolean} enableFontSize
|
* Enable the increase/decrease font size buttons
|
*/
|
enableFontSize: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableColors'> /**
|
</span> * @cfg {Boolean} enableColors
|
* Enable the fore/highlight color buttons
|
*/
|
enableColors: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableAlignments'> /**
|
</span> * @cfg {Boolean} enableAlignments
|
* Enable the left, center, right alignment buttons
|
*/
|
enableAlignments: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableLists'> /**
|
</span> * @cfg {Boolean} enableLists
|
* Enable the bullet and numbered list buttons. Not available in Safari 2.
|
*/
|
enableLists: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableSourceEdit'> /**
|
</span> * @cfg {Boolean} enableSourceEdit
|
* Enable the switch to source edit button. Not available in Safari 2.
|
*/
|
enableSourceEdit: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableLinks'> /**
|
</span> * @cfg {Boolean} enableLinks
|
* Enable the create link button. Not available in Safari 2.
|
*/
|
enableLinks: true,
|
<span id='Ext-form-field-HtmlEditor-cfg-enableFont'> /**
|
</span> * @cfg {Boolean} enableFont
|
* Enable font selection. Not available in Safari 2.
|
*/
|
enableFont: true,
|
//<locale>
|
<span id='Ext-form-field-HtmlEditor-cfg-createLinkText'> /**
|
</span> * @cfg {String} createLinkText
|
* The default text for the create link prompt
|
*/
|
createLinkText: 'Please enter the URL for the link:',
|
//</locale>
|
<span id='Ext-form-field-HtmlEditor-cfg-defaultLinkValue'> /**
|
</span> * @cfg {String} [defaultLinkValue='http://']
|
* The default value for the create link prompt
|
*/
|
defaultLinkValue: 'http:/'+'/',
|
<span id='Ext-form-field-HtmlEditor-cfg-fontFamilies'> /**
|
</span> * @cfg {String[]} fontFamilies
|
* An array of available font families
|
*/
|
fontFamilies: [
|
'Arial',
|
'Courier New',
|
'Tahoma',
|
'Times New Roman',
|
'Verdana'
|
],
|
<span id='Ext-form-field-HtmlEditor-cfg-defaultValue'> /**
|
</span> * @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) ? '&#160;' : '&#8203;',
|
|
<span id='Ext-form-field-HtmlEditor-property-extraFieldBodyCls'> // private
|
</span> extraFieldBodyCls: Ext.baseCSSPrefix + 'html-editor-wrap',
|
|
<span id='Ext-form-field-HtmlEditor-cfg-defaultButtonUI'> /**
|
</span> * @cfg {String} defaultButtonUI
|
* A default {@link Ext.Component#ui ui} to use for the HtmlEditor's toolbar
|
* {@link Ext.button.Button Buttons}
|
*/
|
|
<span id='Ext-form-field-HtmlEditor-property-initialized'> // @private
|
</span> initialized: false,
|
<span id='Ext-form-field-HtmlEditor-property-activated'> // @private
|
</span> activated: false,
|
<span id='Ext-form-field-HtmlEditor-property-sourceEditMode'> // @private
|
</span> sourceEditMode: false,
|
<span id='Ext-form-field-HtmlEditor-property-iframePad'> // @private
|
</span> iframePad:3,
|
<span id='Ext-form-field-HtmlEditor-cfg-hideMode'> // @private
|
</span> hideMode:'offsets',
|
|
<span id='Ext-form-field-HtmlEditor-property-maskOnDisable'> maskOnDisable: true,
|
</span>
|
<span id='Ext-form-field-HtmlEditor-property-containerElCls'> containerElCls: Ext.baseCSSPrefix + 'html-editor-container',
|
</span>
|
<span id='Ext-form-field-HtmlEditor-method-initComponent'> // @private
|
</span> initComponent: function(){
|
var me = this;
|
|
me.addEvents(
|
<span id='Ext-form-field-HtmlEditor-event-initialize'> /**
|
</span> * @event initialize
|
* Fires when the editor is fully initialized (including the iframe)
|
* @param {Ext.form.field.HtmlEditor} this
|
*/
|
'initialize',
|
<span id='Ext-form-field-HtmlEditor-event-activate'> /**
|
</span> * @event activate
|
* Fires when the editor is first receives the focus. Any insertion must wait until after this event.
|
* @param {Ext.form.field.HtmlEditor} this
|
*/
|
'activate',
|
<span id='Ext-form-field-HtmlEditor-event-beforesync'> /**
|
</span> * @event beforesync
|
* Fires before the textarea is updated with content from the editor iframe. Return false to cancel the
|
* sync.
|
* @param {Ext.form.field.HtmlEditor} this
|
* @param {String} html
|
*/
|
'beforesync',
|
<span id='Ext-form-field-HtmlEditor-event-beforepush'> /**
|
</span> * @event beforepush
|
* Fires before the iframe editor is updated with content from the textarea. Return false to cancel the
|
* push.
|
* @param {Ext.form.field.HtmlEditor} this
|
* @param {String} html
|
*/
|
'beforepush',
|
<span id='Ext-form-field-HtmlEditor-event-sync'> /**
|
</span> * @event sync
|
* Fires when the textarea is updated with content from the editor iframe.
|
* @param {Ext.form.field.HtmlEditor} this
|
* @param {String} html
|
*/
|
'sync',
|
<span id='Ext-form-field-HtmlEditor-event-push'> /**
|
</span> * @event push
|
* Fires when the iframe editor is updated with content from the textarea.
|
* @param {Ext.form.field.HtmlEditor} this
|
* @param {String} html
|
*/
|
'push',
|
<span id='Ext-form-field-HtmlEditor-event-editmodechange'> /**
|
</span> * @event editmodechange
|
* Fires when the editor switches edit modes
|
* @param {Ext.form.field.HtmlEditor} this
|
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
|
*/
|
'editmodechange'
|
);
|
|
me.items = [me.createToolbar(), me.createInputCmp()];
|
|
me.layout = {
|
type: 'vbox',
|
align: 'stretch'
|
};
|
|
me.callParent(arguments);
|
me.initField();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-createInputCmp'> createInputCmp: function(){
|
</span> this.inputCmp = Ext.widget(this.getInputCmpCfg());
|
return this.inputCmp;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getInputCmpCfg'> getInputCmpCfg: function(){
|
</span> var me = this,
|
id = me.id + '-inputCmp',
|
data = {
|
id : id,
|
name : me.name,
|
textareaCls : Ext.baseCSSPrefix + 'hidden',
|
value : me.value,
|
iframeName : Ext.id(),
|
iframeSrc : Ext.SSL_SECURE_URL,
|
iframeCls : Ext.baseCSSPrefix + 'htmleditor-iframe'
|
};
|
|
me.getInsertionRenderData(data, me.subTplInsertions);
|
|
return {
|
flex: 1,
|
xtype: 'component',
|
tpl: me.getTpl('componentTpl'),
|
childEls: ['iframeEl', 'textareaEl'],
|
id: id,
|
cls: Ext.baseCSSPrefix + 'html-editor-input',
|
data: data
|
};
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-createToolbar'> /*
|
</span> * Called when the editor creates its toolbar. Override this method if you need to
|
* add custom toolbar buttons.
|
* @param {Ext.form.field.HtmlEditor} editor
|
* @protected
|
*/
|
createToolbar: function(){
|
this.toolbar = Ext.widget(this.getToolbarCfg());
|
return this.toolbar;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getToolbarCfg'> getToolbarCfg: function(){
|
</span> var me = this,
|
items = [], i,
|
tipsEnabled = Ext.quickTipsActive && Ext.tip.QuickTipManager.isEnabled(),
|
baseCSSPrefix = Ext.baseCSSPrefix,
|
fontSelectItem, undef;
|
|
function btn(id, toggle, handler){
|
return {
|
itemId: id,
|
cls: baseCSSPrefix + 'btn-icon',
|
iconCls: baseCSSPrefix + 'edit-'+id,
|
enableToggle:toggle !== false,
|
scope: me,
|
handler:handler||me.relayBtnCmd,
|
clickEvent: 'mousedown',
|
tooltip: tipsEnabled ? me.buttonTips[id] || undef : undef,
|
overflowText: me.buttonTips[id].title || undef,
|
tabIndex: -1
|
};
|
}
|
|
|
if (me.enableFont && !Ext.isSafari2) {
|
fontSelectItem = Ext.widget('component', {
|
itemId: 'fontSelect',
|
renderTpl: [
|
'<select id="{id}-selectEl" class="' + baseCSSPrefix + 'font-select">',
|
'</select>'
|
],
|
childEls: ['selectEl'],
|
afterRender: function() {
|
me.fontSelect = this.selectEl;
|
Ext.Component.prototype.afterRender.apply(this, arguments);
|
},
|
onDisable: function() {
|
var selectEl = this.selectEl;
|
if (selectEl) {
|
selectEl.dom.disabled = true;
|
}
|
Ext.Component.prototype.onDisable.apply(this, arguments);
|
},
|
onEnable: function() {
|
var selectEl = this.selectEl;
|
if (selectEl) {
|
selectEl.dom.disabled = false;
|
}
|
Ext.Component.prototype.onEnable.apply(this, arguments);
|
},
|
listeners: {
|
change: function() {
|
me.win.focus();
|
me.relayCmd('fontName', me.fontSelect.dom.value);
|
me.deferFocus();
|
},
|
element: 'selectEl'
|
}
|
});
|
|
items.push(
|
fontSelectItem,
|
'-'
|
);
|
}
|
|
if (me.enableFormat) {
|
items.push(
|
btn('bold'),
|
btn('italic'),
|
btn('underline')
|
);
|
}
|
|
if (me.enableFontSize) {
|
items.push(
|
'-',
|
btn('increasefontsize', false, me.adjustFont),
|
btn('decreasefontsize', false, me.adjustFont)
|
);
|
}
|
|
if (me.enableColors) {
|
items.push(
|
'-', {
|
itemId: 'forecolor',
|
cls: baseCSSPrefix + 'btn-icon',
|
iconCls: baseCSSPrefix + 'edit-forecolor',
|
overflowText: me.buttonTips.forecolor.title,
|
tooltip: tipsEnabled ? me.buttonTips.forecolor || undef : undef,
|
tabIndex:-1,
|
menu: Ext.widget('menu', {
|
plain: true,
|
|
items: [{
|
xtype: 'colorpicker',
|
allowReselect: true,
|
focus: Ext.emptyFn,
|
value: '000000',
|
plain: true,
|
clickEvent: 'mousedown',
|
handler: function(cp, color) {
|
me.relayCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
|
this.up('menu').hide();
|
}
|
}]
|
})
|
}, {
|
itemId: 'backcolor',
|
cls: baseCSSPrefix + 'btn-icon',
|
iconCls: baseCSSPrefix + 'edit-backcolor',
|
overflowText: me.buttonTips.backcolor.title,
|
tooltip: tipsEnabled ? me.buttonTips.backcolor || undef : undef,
|
tabIndex:-1,
|
menu: Ext.widget('menu', {
|
plain: true,
|
|
items: [{
|
xtype: 'colorpicker',
|
focus: Ext.emptyFn,
|
value: 'FFFFFF',
|
plain: true,
|
allowReselect: true,
|
clickEvent: 'mousedown',
|
handler: function(cp, color) {
|
if (Ext.isGecko) {
|
me.execCmd('useCSS', false);
|
me.execCmd('hilitecolor', '#'+color);
|
me.execCmd('useCSS', true);
|
me.deferFocus();
|
} else {
|
me.relayCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE || Ext.isOpera ? '#'+color : color);
|
}
|
this.up('menu').hide();
|
}
|
}]
|
})
|
}
|
);
|
}
|
|
if (me.enableAlignments) {
|
items.push(
|
'-',
|
btn('justifyleft'),
|
btn('justifycenter'),
|
btn('justifyright')
|
);
|
}
|
|
if (!Ext.isSafari2) {
|
if (me.enableLinks) {
|
items.push(
|
'-',
|
btn('createlink', false, me.createLink)
|
);
|
}
|
|
if (me.enableLists) {
|
items.push(
|
'-',
|
btn('insertorderedlist'),
|
btn('insertunorderedlist')
|
);
|
}
|
if (me.enableSourceEdit) {
|
items.push(
|
'-',
|
btn('sourceedit', true, function(btn){
|
me.toggleSourceEdit(!me.sourceEditMode);
|
})
|
);
|
}
|
}
|
|
// Everything starts disabled.
|
for (i = 0; i < items.length; i++) {
|
if (items[i].itemId !== 'sourceedit') {
|
items[i].disabled = true;
|
}
|
}
|
|
// build the toolbar
|
// Automatically rendered in AbstractComponent.afterRender's renderChildren call
|
return {
|
xtype: 'toolbar',
|
defaultButtonUI: me.defaultButtonUI,
|
cls: Ext.baseCSSPrefix + 'html-editor-tb',
|
enableOverflow: true,
|
items: items,
|
|
// stop form submits
|
listeners: {
|
click: function(e){
|
e.preventDefault();
|
},
|
element: 'el'
|
}
|
};
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getMaskTarget'> getMaskTarget: function(){
|
</span> // Can't be the body td directly because of issues with absolute positioning
|
// inside td's in FF
|
return Ext.isGecko ? this.inputCmp.el : this.bodyEl;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-setReadOnly'> /**
|
</span> * Sets the read only state of this field.
|
* @param {Boolean} readOnly Whether the field should be read only.
|
*/
|
setReadOnly: function(readOnly) {
|
var me = this,
|
textareaEl = me.textareaEl,
|
iframeEl = me.iframeEl,
|
body;
|
|
me.readOnly = readOnly;
|
|
if (textareaEl) {
|
textareaEl.dom.readOnly = readOnly;
|
}
|
|
if (me.initialized) {
|
body = me.getEditorBody();
|
if (Ext.isIE) {
|
// Hide the iframe while setting contentEditable so it doesn't grab focus
|
iframeEl.setDisplayed(false);
|
body.contentEditable = !readOnly;
|
iframeEl.setDisplayed(true);
|
} else {
|
me.setDesignMode(!readOnly);
|
}
|
if (body) {
|
body.style.cursor = readOnly ? 'default' : 'text';
|
}
|
me.disableItems(readOnly);
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getDocMarkup'> /**
|
</span> * 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.
|
* Also note that forcing IE7 mode works when the page is loaded normally, but if you are using IE's Web
|
* Developer Tools to manually set the document mode, that will take precedence and override what this
|
* code sets by default. This can be confusing when developing, but is not a user-facing issue.
|
* @protected
|
*/
|
getDocMarkup: function() {
|
var me = this,
|
h = me.iframeEl.getHeight() - me.iframePad * 2,
|
oldIE = Ext.isIE8m;
|
|
// - IE9+ require a strict doctype otherwise text outside visible area can't be selected.
|
// - Opera inserts <P> tags on Return key, so P margins must be removed to avoid double line-height.
|
// - On browsers other than IE, the font is not inherited by the IFRAME so it must be specified.
|
return Ext.String.format(
|
(oldIE ? '' : '<!DOCTYPE html>')
|
+ '<html><head><style type="text/css">'
|
+ (Ext.isOpera ? 'p{margin:0}' : '')
|
+ 'body{border:0;margin:0;padding:{0}px;direction:' + (me.rtl ? 'rtl;' : 'ltr;')
|
+ (oldIE ? Ext.emptyString : 'min-')
|
+ 'height:{1}px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:text;background-color:white;'
|
+ (Ext.isIE ? '' : 'font-size:12px;font-family:{2}')
|
+ '}</style></head><body></body></html>'
|
, me.iframePad, h, me.defaultFont);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getEditorBody'> // @private
|
</span> getEditorBody: function() {
|
var doc = this.getDoc();
|
return doc.body || doc.documentElement;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getDoc'> // @private
|
</span> getDoc: function() {
|
return (!Ext.isIE && this.iframeEl.dom.contentDocument) || this.getWin().document;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getWin'> // @private
|
</span> getWin: function() {
|
return Ext.isIE ? this.iframeEl.dom.contentWindow : window.frames[this.iframeEl.dom.name];
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-initDefaultFont'> initDefaultFont: function(){
|
</span> // It's not ideal to do this here since it's a write phase, but we need to know
|
// what the font used in the textarea is so that we can setup the appropriate font
|
// options in the select box. The select box will reflow once we populate it, so we want
|
// to do so before we layout the first time.
|
|
var me = this,
|
selIdx = 0,
|
fonts, font, select,
|
option, i, len, lower;
|
|
if (!me.defaultFont) {
|
font = me.textareaEl.getStyle('font-family');
|
font = Ext.String.capitalize(font.split(',')[0]);
|
fonts = Ext.Array.clone(me.fontFamilies);
|
Ext.Array.include(fonts, font);
|
fonts.sort();
|
me.defaultFont = font;
|
|
select = me.down('#fontSelect').selectEl.dom;
|
for (i = 0, len = fonts.length; i < len; ++i) {
|
font = fonts[i];
|
lower = font.toLowerCase();
|
option = new Option(font, lower);
|
if (font == me.defaultFont) {
|
selIdx = i;
|
}
|
option.style.fontFamily = lower;
|
|
if (Ext.isIE) {
|
select.add(option);
|
} else {
|
select.options.add(option);
|
}
|
}
|
// Old IE versions have a problem if we set the selected property
|
// in the loop, so set it after.
|
select.options[selIdx].selected = true;
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-isEqual'> isEqual: function(value1, value2){
|
</span> return this.isEqualAsString(value1, value2);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-afterRender'> // @private
|
</span> afterRender: function() {
|
var me = this,
|
inputCmp = me.inputCmp;
|
|
me.callParent(arguments);
|
|
me.iframeEl = inputCmp.iframeEl;
|
me.textareaEl = inputCmp.textareaEl;
|
|
// The input element is interrogated by the layout to extract height when labelAlign is 'top'
|
// It must be set, and then switched between the iframe and the textarea
|
me.inputEl = me.iframeEl;
|
|
if (me.enableFont) {
|
me.initDefaultFont();
|
}
|
|
// Start polling for when the iframe document is ready to be manipulated
|
me.monitorTask = Ext.TaskManager.start({
|
run: me.checkDesignMode,
|
scope: me,
|
interval: 100
|
});
|
me.relayCmd('fontName', me.defaultFont);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-initFrameDoc'> initFrameDoc: function() {
|
</span> var me = this,
|
doc, task;
|
|
Ext.TaskManager.stop(me.monitorTask);
|
|
doc = me.getDoc();
|
me.win = me.getWin();
|
|
doc.open();
|
doc.write(me.getDocMarkup());
|
doc.close();
|
|
task = { // must defer to wait for browser to be ready
|
run: function() {
|
var doc = me.getDoc();
|
if (doc.body || doc.readyState === 'complete') {
|
Ext.TaskManager.stop(task);
|
me.setDesignMode(true);
|
Ext.defer(me.initEditor, 10, me);
|
}
|
},
|
interval: 10,
|
duration:10000,
|
scope: me
|
};
|
Ext.TaskManager.start(task);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-checkDesignMode'> checkDesignMode: function() {
|
</span> var me = this,
|
doc = me.getDoc();
|
if (doc && (!doc.editorInitialized || me.getDesignMode() !== 'on')) {
|
me.initFrameDoc();
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-setDesignMode'> /**
|
</span> * @private
|
* Sets current design mode. To enable, mode can be true or 'on', off otherwise
|
*/
|
setDesignMode: function(mode) {
|
var me = this,
|
doc = me.getDoc();
|
if (doc) {
|
if (me.readOnly) {
|
mode = false;
|
}
|
doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getDesignMode'> // @private
|
</span> getDesignMode: function() {
|
var doc = this.getDoc();
|
return !doc ? '' : String(doc.designMode).toLowerCase();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-disableItems'> disableItems: function(disabled) {
|
</span> var items = this.getToolbar().items.items,
|
i,
|
iLen = items.length,
|
item;
|
|
for (i = 0; i < iLen; i++) {
|
item = items[i];
|
|
if (item.getItemId() !== 'sourceedit') {
|
item.setDisabled(disabled);
|
}
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-toggleSourceEdit'> /**
|
</span> * Toggles the editor between standard and source edit mode.
|
* @param {Boolean} [sourceEditMode] True for source edit, false for standard
|
*/
|
toggleSourceEdit: function(sourceEditMode) {
|
var me = this,
|
iframe = me.iframeEl,
|
textarea = me.textareaEl,
|
hiddenCls = Ext.baseCSSPrefix + 'hidden',
|
btn = me.getToolbar().getComponent('sourceedit');
|
|
if (!Ext.isBoolean(sourceEditMode)) {
|
sourceEditMode = !me.sourceEditMode;
|
}
|
me.sourceEditMode = sourceEditMode;
|
|
if (btn.pressed !== sourceEditMode) {
|
btn.toggle(sourceEditMode);
|
}
|
if (sourceEditMode) {
|
me.disableItems(true);
|
me.syncValue();
|
iframe.addCls(hiddenCls);
|
textarea.removeCls(hiddenCls);
|
textarea.dom.removeAttribute('tabIndex');
|
textarea.focus();
|
me.inputEl = textarea;
|
} else {
|
if (me.initialized) {
|
me.disableItems(me.readOnly);
|
}
|
me.pushValue();
|
iframe.removeCls(hiddenCls);
|
textarea.addCls(hiddenCls);
|
textarea.dom.setAttribute('tabIndex', -1);
|
me.deferFocus();
|
me.inputEl = iframe;
|
}
|
me.fireEvent('editmodechange', me, sourceEditMode);
|
me.updateLayout();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-createLink'> // @private used internally
|
</span> createLink: function() {
|
var url = prompt(this.createLinkText, this.defaultLinkValue);
|
if (url && url !== 'http:/'+'/') {
|
this.relayCmd('createlink', url);
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-clearInvalid'> clearInvalid: Ext.emptyFn,
|
</span>
|
<span id='Ext-form-field-HtmlEditor-method-setValue'> setValue: function(value) {
|
</span> var me = this,
|
textarea = me.textareaEl,
|
inputCmp = me.inputCmp;
|
|
me.mixins.field.setValue.call(me, value);
|
if (value === null || value === undefined) {
|
value = '';
|
}
|
if (textarea) {
|
textarea.dom.value = value;
|
}
|
me.pushValue();
|
|
if (!me.rendered && me.inputCmp) {
|
me.inputCmp.data.value = value;
|
}
|
|
return me;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-cleanHtml'> /**
|
</span> * 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
|
* @protected
|
*/
|
cleanHtml: function(html) {
|
html = String(html);
|
if (Ext.isWebKit) { // strip safari nonsense
|
html = html.replace(/\sclass="(?:Apple-style-span|Apple-tab-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. We need the
|
* parseInt here because charCodeAt will return a number.
|
*/
|
if (html.charCodeAt(0) === parseInt(this.defaultValue.replace(/\D/g, ''), 10)) {
|
html = html.substring(1);
|
}
|
|
return html;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-syncValue'> /**
|
</span> * Syncs the contents of the editor iframe with the textarea.
|
* @protected
|
*/
|
syncValue: function(){
|
var me = this,
|
body, changed, html, bodyStyle, match, textElDom;
|
|
if (me.initialized) {
|
body = me.getEditorBody();
|
html = body.innerHTML;
|
textElDom = me.textareaEl.dom;
|
|
if (Ext.isWebKit) {
|
bodyStyle = body.getAttribute('style'); // Safari puts text-align styles on the body element!
|
match = bodyStyle.match(/text-align:(.*?);/i);
|
if (match && match[1]) {
|
html = '<div style="' + match[0] + '">' + html + '</div>';
|
}
|
}
|
|
html = me.cleanHtml(html);
|
|
if (me.fireEvent('beforesync', me, html) !== false) {
|
// Gecko inserts single <br> tag when input is empty
|
// and user toggles source mode. See https://sencha.jira.com/browse/EXTJSIV-8542
|
if (Ext.isGecko && textElDom.value === '' && html === '<br>') {
|
html = '';
|
}
|
|
if (textElDom.value !== html) {
|
textElDom.value = html;
|
changed = true;
|
}
|
|
me.fireEvent('sync', me, html);
|
|
if (changed) {
|
// we have to guard this to avoid infinite recursion because getValue
|
// calls this method...
|
me.checkChange();
|
}
|
}
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getValue'> getValue: function() {
|
</span> var me = this,
|
value;
|
if (!me.sourceEditMode) {
|
me.syncValue();
|
}
|
value = me.rendered ? me.textareaEl.dom.value : me.value;
|
me.value = value;
|
return value;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-pushValue'> /**
|
</span> * Pushes the value of the textarea into the iframe editor.
|
* @protected
|
*/
|
pushValue: function() {
|
var me = this,
|
v;
|
if(me.initialized){
|
v = me.textareaEl.dom.value || '';
|
if (!me.activated && v.length < 1) {
|
v = me.defaultValue;
|
}
|
if (me.fireEvent('beforepush', me, v) !== false) {
|
me.getEditorBody().innerHTML = v;
|
if (Ext.isGecko) {
|
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
|
me.setDesignMode(false); //toggle off first
|
me.setDesignMode(true);
|
}
|
me.fireEvent('push', me, v);
|
}
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-deferFocus'> // @private
|
</span> deferFocus: function(){
|
this.focus(false, true);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-getFocusEl'> getFocusEl: function() {
|
</span> var me = this,
|
win = me.win;
|
return win && !me.sourceEditMode ? win : me.textareaEl;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-focus'> focus: function(selectText, delay) {
|
</span> var me = this,
|
value, focusEl;
|
|
if (delay) {
|
if (!me.focusTask) {
|
me.focusTask = new Ext.util.DelayedTask(me.focus);
|
}
|
me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
|
}
|
else {
|
if (selectText) {
|
if (me.textareaEl && me.textareaEl.dom) {
|
value = me.textareaEl.dom.value;
|
}
|
if (value && value.length) { // Make sure there is content before calling SelectAll, otherwise the caret disappears.
|
me.execCmd('selectall', true);
|
}
|
}
|
focusEl = me.getFocusEl();
|
if (focusEl && focusEl.focus) {
|
focusEl.focus();
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-initEditor'> // @private
|
</span> initEditor: function(){
|
//Destroying the component during/before initEditor can cause issues.
|
try {
|
var me = this,
|
dbody = me.getEditorBody(),
|
ss = me.textareaEl.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 = me.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 = Ext.Function.bind(me.onEditorEvent, me);
|
Ext.EventManager.on(doc, {
|
mousedown: fn,
|
dblclick: fn,
|
click: fn,
|
keyup: fn,
|
buffer:100
|
});
|
|
// These events need to be relayed from the inner document (where they stop
|
// bubbling) up to the outer document. This has to be done at the DOM level so
|
// the event reaches listeners on elements like the document body. The effected
|
// mechanisms that depend on this bubbling behavior are listed to the right
|
// of the event.
|
fn = me.onRelayedEvent;
|
Ext.EventManager.on(doc, {
|
mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
|
mousemove: fn, // window resize drag detection
|
mouseup: fn, // window resize termination
|
click: fn, // not sure, but just to be safe
|
dblclick: fn, // not sure again
|
scope: me
|
});
|
|
if (Ext.isGecko) {
|
Ext.EventManager.on(doc, 'keypress', me.applyCommand, me);
|
}
|
|
if (me.fixKeys) {
|
Ext.EventManager.on(doc, 'keydown', me.fixKeys, me);
|
}
|
if (me.fixKeysAfter) {
|
Ext.EventManager.on(doc, 'keyup', me.fixKeysAfter, me);
|
}
|
|
if (Ext.isIE9 && Ext.isStrict) {
|
Ext.EventManager.on(doc.documentElement, 'focus', me.focus, me);
|
}
|
|
// In old IEs, clicking on a toolbar button shifts focus from iframe
|
// and it loses selection. To avoid this, we save current selection
|
// and restore it.
|
if (Ext.isIE8m || (Ext.isIE9 && !Ext.isStrict)) {
|
Ext.EventManager.on(doc, 'focusout', function() {
|
me.savedSelection = doc.selection.type !== 'None' ? doc.selection.createRange() : null;
|
}, me);
|
|
Ext.EventManager.on(doc, 'focusin', function() {
|
if (me.savedSelection) {
|
me.savedSelection.select();
|
}
|
}, me);
|
}
|
|
// We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
|
Ext.EventManager.onWindowUnload(me.beforeDestroy, me);
|
doc.editorInitialized = true;
|
|
me.initialized = true;
|
me.pushValue();
|
me.setReadOnly(me.readOnly);
|
me.fireEvent('initialize', me);
|
} catch(ex) {
|
// ignore (why?)
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-beforeDestroy'> // @private
|
</span> beforeDestroy: function(){
|
var me = this,
|
monitorTask = me.monitorTask,
|
doc, prop;
|
|
if (monitorTask) {
|
Ext.TaskManager.stop(monitorTask);
|
}
|
if (me.rendered) {
|
Ext.EventManager.removeUnloadListener(me.beforeDestroy, me);
|
try {
|
doc = me.getDoc();
|
if (doc) {
|
// removeAll() doesn't currently know how to handle iframe document,
|
// so for now we have to wrap it in an Ext.Element using Ext.fly,
|
// or else IE6/7 will leak big time when the page is refreshed.
|
// TODO: this may not be needed once we find a more permanent fix.
|
// see EXTJSIV-5891.
|
Ext.EventManager.removeAll(Ext.fly(doc));
|
for (prop in doc) {
|
if (doc.hasOwnProperty && doc.hasOwnProperty(prop)) {
|
delete doc[prop];
|
}
|
}
|
}
|
} catch(e) {
|
// ignore (why?)
|
}
|
delete me.iframeEl;
|
delete me.textareaEl;
|
delete me.toolbar;
|
delete me.inputCmp;
|
}
|
me.callParent();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-onRelayedEvent'> // @private
|
</span> onRelayedEvent: function (event) {
|
// relay event from the iframe's document to the document that owns the iframe...
|
|
var iframeEl = this.iframeEl,
|
|
// Get the left-based iframe position
|
iframeXY = Ext.Element.getTrueXY(iframeEl),
|
originalEventXY = event.getXY(),
|
|
// Get the left-based XY position.
|
// This is because the consumer of the injected event (Ext.EventManager) will
|
// perform its own RTL normalization.
|
eventXY = Ext.EventManager.getPageXY(event.browserEvent);
|
|
// the event from the inner document has XY relative to that document's origin,
|
// so adjust it to use the origin of the iframe in the outer document:
|
event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
|
|
event.injectEvent(iframeEl); // blame the iframe for the event...
|
|
event.xy = originalEventXY; // restore the original XY (just for safety)
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-onFirstFocus'> // @private
|
</span> onFirstFocus: function(){
|
var me = this,
|
selection, range;
|
me.activated = true;
|
me.disableItems(me.readOnly);
|
if (Ext.isGecko) { // prevent silly gecko errors
|
me.win.focus();
|
selection = me.win.getSelection();
|
if (!selection.focusNode || selection.focusNode.nodeType !== 3) {
|
range = selection.getRangeAt(0);
|
range.selectNodeContents(me.getEditorBody());
|
range.collapse(true);
|
me.deferFocus();
|
}
|
try {
|
me.execCmd('useCSS', true);
|
me.execCmd('styleWithCSS', false);
|
} catch(e) {
|
// ignore (why?)
|
}
|
}
|
me.fireEvent('activate', me);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-adjustFont'> // @private
|
</span> adjustFont: function(btn) {
|
var adjust = btn.getItemId() === 'increasefontsize' ? 1 : -1,
|
size = this.getDoc().queryCommandValue('FontSize') || '2',
|
isPxSize = Ext.isString(size) && size.indexOf('px') !== -1,
|
isSafari;
|
size = parseInt(size, 10);
|
if (isPxSize) {
|
// Safari 3 values
|
// 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
|
if (size <= 10) {
|
size = 1 + adjust;
|
}
|
else if (size <= 13) {
|
size = 2 + adjust;
|
}
|
else if (size <= 16) {
|
size = 3 + adjust;
|
}
|
else if (size <= 18) {
|
size = 4 + adjust;
|
}
|
else if (size <= 24) {
|
size = 5 + adjust;
|
}
|
else {
|
size = 6 + adjust;
|
}
|
size = Ext.Number.constrain(size, 1, 6);
|
} else {
|
isSafari = Ext.isSafari;
|
if (isSafari) { // safari
|
adjust *= 2;
|
}
|
size = Math.max(1, size + adjust) + (isSafari ? 'px' : 0);
|
}
|
this.relayCmd('FontSize', size);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-onEditorEvent'> // @private
|
</span> onEditorEvent: function(e) {
|
this.updateToolbar();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-updateToolbar'> /**
|
</span> * Triggers a toolbar update by reading the markup state of the current selection in the editor.
|
* @protected
|
*/
|
updateToolbar: function() {
|
var me = this,
|
i, l, btns, doc, name, queriedName, fontSelect,
|
toolbarSubmenus;
|
|
if (me.readOnly) {
|
return;
|
}
|
|
if (!me.activated) {
|
me.onFirstFocus();
|
return;
|
}
|
|
btns = me.getToolbar().items.map;
|
doc = me.getDoc();
|
|
if (me.enableFont && !Ext.isSafari2) {
|
// When querying the fontName, Chrome may return an Array of font names
|
// with those containing spaces being placed between single-quotes.
|
queriedName = doc.queryCommandValue('fontName');
|
name = (queriedName ? queriedName.split(",")[0].replace(/^'/,'').replace(/'$/,'') : me.defaultFont).toLowerCase();
|
fontSelect = me.fontSelect.dom;
|
if (name !== fontSelect.value || name != queriedName) {
|
fontSelect.value = name;
|
}
|
}
|
|
function updateButtons() {
|
var state;
|
|
for (i = 0, l = arguments.length, name; i < l; i++) {
|
name = arguments[i];
|
|
// Firefox 18+ sometimes throws NS_ERROR_INVALID_POINTER exception
|
// See https://sencha.jira.com/browse/EXTJSIV-9766
|
try {
|
state = doc.queryCommandState(name);
|
}
|
catch (e) {
|
state = false;
|
}
|
|
btns[name].toggle(state);
|
}
|
}
|
if(me.enableFormat){
|
updateButtons('bold', 'italic', 'underline');
|
}
|
if(me.enableAlignments){
|
updateButtons('justifyleft', 'justifycenter', 'justifyright');
|
}
|
if(!Ext.isSafari2 && me.enableLists){
|
updateButtons('insertorderedlist', 'insertunorderedlist');
|
}
|
|
// Ensure any of our toolbar's owned menus are hidden.
|
// The overflow menu must control itself.
|
toolbarSubmenus = me.toolbar.query('menu');
|
for (i = 0; i < toolbarSubmenus.length; i++) {
|
toolbarSubmenus[i].hide();
|
}
|
me.syncValue();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-relayBtnCmd'> // @private
|
</span> relayBtnCmd: function(btn) {
|
this.relayCmd(btn.getItemId());
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-relayCmd'> /**
|
</span> * Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates.
|
* **This should only be called after the editor is initialized.**
|
* @param {String} cmd The Midas command
|
* @param {String/Boolean} [value=null] The value to pass to the command
|
*/
|
relayCmd: function(cmd, value) {
|
Ext.defer(function() {
|
var me = this;
|
|
if (!this.isDestroyed) {
|
me.win.focus();
|
me.execCmd(cmd, value);
|
me.updateToolbar();
|
}
|
}, 10, this);
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-execCmd'> /**
|
</span> * Executes a Midas editor command directly on the editor document. For visual commands, you should use
|
* {@link #relayCmd} instead. **This should only be called after the editor is initialized.**
|
* @param {String} cmd The Midas command
|
* @param {String/Boolean} [value=null] The value to pass to the command
|
*/
|
execCmd: function(cmd, value){
|
var me = this,
|
doc = me.getDoc();
|
doc.execCommand(cmd, false, (value == undefined ? null : value));
|
me.syncValue();
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-applyCommand'> // @private
|
</span> applyCommand: function(e){
|
if (e.ctrlKey) {
|
var me = this,
|
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) {
|
me.win.focus();
|
me.execCmd(cmd);
|
me.deferFocus();
|
e.preventDefault();
|
}
|
}
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-method-insertAtCursor'> /**
|
</span> * 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){
|
var me = this,
|
range;
|
|
if (me.activated) {
|
me.win.focus();
|
if (Ext.isIE) {
|
range = me.getDoc().selection.createRange();
|
if (range) {
|
range.pasteHTML(text);
|
me.syncValue();
|
me.deferFocus();
|
}
|
}else{
|
me.execCmd('InsertHTML', text);
|
me.deferFocus();
|
}
|
}
|
},
|
|
<span id='Ext-form-field-HtmlEditor-property-fixKeys'> // @private
|
</span> fixKeys: (function() { // load time branching for fastest keydown performance
|
if (Ext.isIE) {
|
return function(e){
|
var me = this,
|
k = e.getKey(),
|
doc = me.getDoc(),
|
readOnly = me.readOnly,
|
range, target;
|
|
if (k === e.TAB) {
|
e.stopEvent();
|
if (!readOnly) {
|
range = doc.selection.createRange();
|
if (range){
|
if (range.collapse) {
|
range.collapse(true);
|
range.pasteHTML('&#160;&#160;&#160;&#160;');
|
}
|
|
me.deferFocus();
|
}
|
}
|
}
|
else if (k === e.ENTER) {
|
if (!readOnly) {
|
range = doc.selection.createRange();
|
if (range) {
|
target = range.parentElement();
|
if(!target || target.tagName.toLowerCase() !== 'li'){
|
e.stopEvent();
|
range.pasteHTML('<br />');
|
range.collapse(false);
|
range.select();
|
}
|
}
|
}
|
}
|
};
|
}
|
|
if (Ext.isOpera) {
|
return function(e){
|
var me = this,
|
k = e.getKey(),
|
readOnly = me.readOnly;
|
if (k === e.TAB) {
|
e.stopEvent();
|
if (!readOnly) {
|
me.win.focus();
|
me.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
|
me.deferFocus();
|
}
|
}
|
};
|
}
|
|
return null; // not needed, so null
|
}()),
|
|
<span id='Ext-form-field-HtmlEditor-property-fixKeysAfter'> // @private
|
</span> fixKeysAfter: (function() {
|
if (Ext.isIE) {
|
return function(e) {
|
var me = this,
|
k = e.getKey(),
|
doc = me.getDoc(),
|
readOnly = me.readOnly,
|
innerHTML;
|
|
if (!readOnly && (k === e.BACKSPACE || k === e.DELETE)) {
|
innerHTML = doc.body.innerHTML;
|
|
// If HtmlEditor had some input and user cleared it, IE inserts <p>&nbsp;</p>
|
// which makes an impression that there is still some text, and creeps
|
// into source mode when toggled. We don't want this.
|
//
|
// See https://sencha.jira.com/browse/EXTJSIV-8542
|
//
|
// N.B. There is **small** chance that user could go to source mode,
|
// type '<p>&nbsp;</p>', switch back to visual mode, type something else
|
// and then clear it -- the code below would clear the <p> tag as well,
|
// which could be considered a bug. However I see no way to distinguish
|
// between offending markup being entered manually and generated by IE,
|
// so this can be considered a nasty corner case.
|
//
|
if (innerHTML === '<p>&nbsp;</p>' || innerHTML === '<P>&nbsp;</P>') {
|
doc.body.innerHTML = '';
|
}
|
}
|
}
|
}
|
|
return null;
|
}()),
|
|
<span id='Ext-form-field-HtmlEditor-method-getToolbar'> /**
|
</span> * Returns the editor's toolbar. **This is only available after the editor has been rendered.**
|
* @return {Ext.toolbar.Toolbar}
|
*/
|
getToolbar: function(){
|
return this.toolbar;
|
},
|
|
//<locale>
|
<span id='Ext-form-field-HtmlEditor-property-buttonTips'> /**
|
</span> * @property {Object} buttonTips
|
* 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:
|
*
|
* {
|
* 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'
|
* }
|
* // ...
|
* }
|
*/
|
buttonTips: {
|
bold: {
|
title: 'Bold (Ctrl+B)',
|
text: 'Make the selected text bold.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
italic: {
|
title: 'Italic (Ctrl+I)',
|
text: 'Make the selected text italic.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
underline: {
|
title: 'Underline (Ctrl+U)',
|
text: 'Underline the selected text.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
increasefontsize: {
|
title: 'Grow Text',
|
text: 'Increase the font size.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
decreasefontsize: {
|
title: 'Shrink Text',
|
text: 'Decrease the font size.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
backcolor: {
|
title: 'Text Highlight Color',
|
text: 'Change the background color of the selected text.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
forecolor: {
|
title: 'Font Color',
|
text: 'Change the color of the selected text.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
justifyleft: {
|
title: 'Align Text Left',
|
text: 'Align text to the left.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
justifycenter: {
|
title: 'Center Text',
|
text: 'Center text in the editor.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
justifyright: {
|
title: 'Align Text Right',
|
text: 'Align text to the right.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
insertunorderedlist: {
|
title: 'Bullet List',
|
text: 'Start a bulleted list.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
insertorderedlist: {
|
title: 'Numbered List',
|
text: 'Start a numbered list.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
createlink: {
|
title: 'Hyperlink',
|
text: 'Make the selected text a hyperlink.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
},
|
sourceedit: {
|
title: 'Source Edit',
|
text: 'Switch to source editing mode.',
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
}
|
}
|
//</locale>
|
|
// hide stuff that is not compatible
|
<span id='Ext-form-field-HtmlEditor-event-blur'> /**
|
</span> * @event blur
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-event-focus'> /**
|
</span> * @event focus
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-event-specialkey'> /**
|
</span> * @event specialkey
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-fieldCls'> /**
|
</span> * @cfg {String} fieldCls
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-focusCls'> /**
|
</span> * @cfg {String} focusCls
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-autoCreate'> /**
|
</span> * @cfg {String} autoCreate
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-inputType'> /**
|
</span> * @cfg {String} inputType
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-invalidCls'> /**
|
</span> * @cfg {String} invalidCls
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-invalidText'> /**
|
</span> * @cfg {String} invalidText
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-msgFx'> /**
|
</span> * @cfg {String} msgFx
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-allowDomMove'> /**
|
</span> * @cfg {Boolean} allowDomMove
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-applyTo'> /**
|
</span> * @cfg {String} applyTo
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-readOnly'> /**
|
</span> * @cfg {String} readOnly
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-cfg-tabIndex'> /**
|
</span> * @cfg {String} tabIndex
|
* @private
|
*/
|
<span id='Ext-form-field-HtmlEditor-method-validate'> /**
|
</span> * @method validate
|
* @private
|
*/
|
});
|
</pre>
|
</body>
|
</html>
|
