diff --git a/typo3/sysext/rtehtmlarea/class.tx_rtehtmlarea_base.php b/typo3/sysext/rtehtmlarea/class.tx_rtehtmlarea_base.php
index 085d7ef0cc74b9350323248b5def5e6fe008f588..92e3ca70d25b8813573c2b58c6f401c9966d645e 100644
--- a/typo3/sysext/rtehtmlarea/class.tx_rtehtmlarea_base.php
+++ b/typo3/sysext/rtehtmlarea/class.tx_rtehtmlarea_base.php
@@ -599,7 +599,7 @@ class tx_rtehtmlarea_base extends t3lib_rteapi {
bar, left, center, right, justifyfull,
bar, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent, bar, lefttoright, righttoleft, language, showlanguagemarks,
bar, textcolor, bgcolor, textindicator,
- bar, editelement, emoticon, insertcharacter, insertsofthyphen, link, unlink, image, table,' . (($this->thisConfig['hideTableOperationsInToolbar'] && is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.']['toggleborders.']) && $this->thisConfig['buttons.']['toggleborders.']['keepInToolbar']) ? ' toggleborders,': '') . ' user, acronym, bar, findreplace, spellcheck,
+ bar, editelement, emoticon, insertcharacter, link, unlink, image, table,' . (($this->thisConfig['hideTableOperationsInToolbar'] && is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.']['toggleborders.']) && $this->thisConfig['buttons.']['toggleborders.']['keepInToolbar']) ? ' toggleborders,': '') . ' user, acronym, bar, findreplace, spellcheck,
bar, chMode, inserttag, removeformat, bar, copy, cut, paste, pastetoggle, pastebehaviour, bar, undo, redo, bar, showhelp, about, linebreak,
' . ($this->thisConfig['hideTableOperationsInToolbar'] ? '': 'bar, toggleborders,') . ' bar, tableproperties, tablerestyle, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar,
columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, bar,
diff --git a/typo3/sysext/rtehtmlarea/ext_localconf.php b/typo3/sysext/rtehtmlarea/ext_localconf.php
index 495c522fbf0fc751b02a5509f3ad93f5bddc0865..7b1e3761765e6a190bcb81e9c8f6b7d6aba18e2a 100644
--- a/typo3/sysext/rtehtmlarea/ext_localconf.php
+++ b/typo3/sysext/rtehtmlarea/ext_localconf.php
@@ -126,7 +126,7 @@ $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['BlockStyle'] = array();
$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['BlockStyle']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/BlockStyle/class.tx_rtehtmlarea_blockstyle.php:&tx_rtehtmlarea_blockstyle';
$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap'] = array();
$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php:&tx_rtehtmlarea_charactermap';
-$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap']['addIconsToSkin'] = 1;
+$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['CharacterMap']['addIconsToSkin'] = 0;
$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['Acronym'] = array();
$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['Acronym']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/Acronym/class.tx_rtehtmlarea_acronym.php:&tx_rtehtmlarea_acronym';
$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['Acronym']['addIconsToSkin'] = 0;
diff --git a/typo3/sysext/rtehtmlarea/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php b/typo3/sysext/rtehtmlarea/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php
index 8d9cf3bc728285b6cbc3c000b25193b906ce6a76..6acfc753e51b14ab87116ecd1eab0679a5f5e4ba 100644
--- a/typo3/sysext/rtehtmlarea/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php
+++ b/typo3/sysext/rtehtmlarea/extensions/CharacterMap/class.tx_rtehtmlarea_charactermap.php
@@ -38,10 +38,9 @@ class tx_rtehtmlarea_charactermap extends tx_rtehtmlarea_api {
protected $toolbar; // Reference to RTE toolbar array
protected $LOCAL_LANG; // Frontend language array
- protected $pluginButtons = 'insertcharacter,insertsofthyphen';
+ protected $pluginButtons = 'insertcharacter';
protected $convertToolbarForHtmlAreaArray = array (
'insertcharacter' => 'InsertCharacter',
- 'insertsofthyphen' => 'InsertSoftHyphen',
);
/**
diff --git a/typo3/sysext/rtehtmlarea/extensions/CharacterMap/skin/htmlarea.css b/typo3/sysext/rtehtmlarea/extensions/CharacterMap/skin/htmlarea.css
index 20cfd22b77e2aab88d69e6d9ba2f3b3e0b96b15e..ab3f1aa7e14d51ef3512e59723d16639044d216f 100644
--- a/typo3/sysext/rtehtmlarea/extensions/CharacterMap/skin/htmlarea.css
+++ b/typo3/sysext/rtehtmlarea/extensions/CharacterMap/skin/htmlarea.css
@@ -3,7 +3,3 @@
background-image: url('images/insertCharacter.gif') !important;
background-position: 0 0 !important;
}
-.htmlarea-action-soft-hyphen-insert {
- background-image: url('images/insertSoftHyphen.gif') !important;
- background-position: 0 0 !important;
-}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js b/typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
index 9d3a7a6020613d00eb4e9429b16c12999a76c996..dcd235140643b8b4f0e78050f8caa6e17f32bff4 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
@@ -33,34 +33,8 @@
*/
// Avoid re-initialization on AJax call when HTMLArea object was already initialized
if (typeof(HTMLArea) == 'undefined') {
-/*
- * MODIFIED Ext.EventManager
- *
- * HTMLArea will need to establish listeners on it's iframe's documentElement.
- * This element does not belong to the document in which ExtJS is initialized.
- * ExtJS's garbage collection will clean away this cached element and any listeners on it.
- * Therefore, this sequence function will skipGarbageCollection on any element
- * that does not belong to the document in which ExtJS is initialized.
- */
-Ext.EventManager.getId = Ext.Function.createSequence(Ext.EventManager.getId, function (element) {
- var id;
-
- element = Ext.getDom(element);
-
- if (element === document || element === window) {
- id = element === document ? Ext.documentId : Ext.windowId;
- }
- else {
- id = Ext.id(element);
- }
- // Skip garbage collection if the element does not belong to the document in which ExtJS is initialized
- if (element && (element.ownerDocument !== document)) {
- Ext.cache[id].skipGarbageCollection = true;
- }
- return id;
-});
// Establish HTMLArea name space
-Ext.namespace('HTMLArea.util.TYPO3', 'HTMLArea.util.Tips', 'HTMLArea.util.Color');
+Ext.namespace('HTMLArea.CSS', 'HTMLArea.util.TYPO3', 'HTMLArea.util.Tips', 'HTMLArea.util.Color', 'Ext.ux.form', 'Ext.ux.menu', 'Ext.ux.Toolbar');
Ext.apply(HTMLArea, {
/***************************************************
* COMPILED REGULAR EXPRESSIONS *
@@ -137,16 +111,6 @@ Ext.apply(HTMLArea, {
/***************************************************
* EDITOR CONFIGURATION
***************************************************/
-Ext.define('HTMLArea.model.Default', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'text',
- type: 'string'
- },{
- name: 'value',
- type: 'string'
- }]
-});
HTMLArea.Config = function (editorId) {
this.editorId = editorId;
// if the site is secure, create a secure iframe
@@ -189,6 +153,7 @@ HTMLArea.Config = function (editorId) {
this.configDefaults = {
all: {
xtype: 'htmlareabutton',
+ disabledClass: 'buttonDisabled',
textMode: false,
selection: false,
dialog: false,
@@ -198,12 +163,11 @@ HTMLArea.Config = function (editorId) {
htmlareabutton: {
cls: 'button',
overCls: 'buttonHover',
- scale: 'medium',
// Erratic behaviour of click event in WebKit and IE browsers
clickEvent: (Ext.isWebKit || Ext.isIE) ? 'mousedown' : 'click'
},
htmlareacombo: {
- cls: 'htmlarea-combo',
+ cls: 'select',
typeAhead: true,
lastQuery: '',
triggerAction: 'all',
@@ -213,14 +177,14 @@ HTMLArea.Config = function (editorId) {
validateOnBlur: false,
submitValue: false,
forceSelection: true,
- queryMode: 'local',
+ mode: 'local',
storeRoot: 'options',
- model: 'HTMLArea.model.Default',
+ storeFields: [ { name: 'text'}, { name: 'value'}],
valueField: 'value',
displayField: 'text',
labelSeparator: '',
hideLabel: true,
- template: '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>'
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
}
};
};
@@ -244,7 +208,7 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
*/
registerButton: function (config) {
config.itemId = config.id;
- if (this.buttonsConfig[config.id]) {
+ if (Ext.type(this.buttonsConfig[config.id])) {
HTMLArea.appendToLog('', 'HTMLArea.Config', 'registerButton', 'A toolbar item with the same Id: ' + config.id + ' already exists and will be overidden.', 'warn');
}
// Apply defaults
@@ -255,32 +219,21 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
case 'htmlareacombo':
if (config.options) {
// Create combo array store
- config.store = Ext.create('Ext.data.ArrayStore', {
- data: config.options,
- model: config.model,
- storeId: this.editorId + '-store-' + config.id
+ config.store = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: config.storeFields,
+ data: config.options
});
} else if (config.storeUrl) {
// Create combo json store
- config.store = Ext.create('Ext.data.Store', {
+ config.store = new Ext.data.JsonStore({
+ autoDestroy: true,
autoLoad: true,
- model: config.model,
- proxy: {
- type: 'ajax',
- url: config.storeUrl,
- reader: {
- type: 'json',
- root: config.storeRoot
- }
- },
- storeId: this.editorId + '-store-' + config.id
+ root: config.storeRoot,
+ fields: config.storeFields,
+ url: config.storeUrl
});
}
- if (!Ext.isObject(config.listConfig)) {
- config.listConfig = {};
- }
- config.listConfig.getInnerTpl = function () { return config.template; };
- config.listConfig.cls = 'htmlarea-combo-list';
config.hideLabel = Ext.isEmpty(config.fieldLabel) || Ext.isIE6;
config.helpTitle = config.tooltip;
break;
@@ -291,9 +244,7 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
break;
}
config.cmd = config.id;
- config.tooltip = {
- text: config.tooltip
- };
+ config.tooltip = { title: config.tooltip };
this.buttonsConfig[config.id] = config;
return true;
},
@@ -323,16 +274,14 @@ HTMLArea.Config = Ext.extend(HTMLArea.Config, {
* TOOLBAR COMPONENTS
***************************************************/
/*
- * HTMLArea.toolbar.Button extends Ext.button.Button
+ * Ext.ux.HTMLAreaButton extends Ext.Button
*/
-Ext.define('HTMLArea.toolbar.Button', {
- extend: 'Ext.button.Button',
- alias: ['widget.htmlareabutton'],
+Ext.ux.HTMLAreaButton = Ext.extend(Ext.Button, {
/*
* Component initialization
*/
initComponent: function () {
- this.callParent(arguments);
+ Ext.ux.HTMLAreaButton.superclass.initComponent.call(this);
this.addEvents(
/*
* @event HTMLAreaEventHotkey
@@ -380,12 +329,6 @@ Ext.define('HTMLArea.toolbar.Button', {
getToolbar: function() {
return this.ownerCt;
},
- /*
- * Get the button itemId
- */
- getItemId: function() {
- return this.itemId;
- },
/*
* Add properties and function to set button active or not depending on current selection
*/
@@ -393,7 +336,7 @@ Ext.define('HTMLArea.toolbar.Button', {
activeClass: 'buttonActive',
setInactive: function (inactive) {
this.inactive = inactive;
- return inactive ? this.removeCls(this.activeClass) : this.addCls(this.activeClass);
+ return inactive ? this.removeClass(this.activeClass) : this.addClass(this.activeClass);
},
/*
* Determine if the button should be enabled based on the current selection and context configuration property
@@ -429,15 +372,9 @@ Ext.define('HTMLArea.toolbar.Button', {
* Handler invoked when the button is clicked
*/
onButtonClick: function (button, event, key) {
- var returnValue = true;
if (!this.disabled) {
- if (this.dialog && Ext.isObject(event)) {
- event.stopEvent();
- returnValue = false;
- }
- if (!this.plugins[0][this.action](this.getEditor(), key || this.getItemId()) && Ext.isObject(event)) {
+ if (!this.plugins[this.action](this.getEditor(), key || this.itemId) && event) {
event.stopEvent();
- returnValue = false;
}
if (Ext.isOpera) {
this.getEditor().focus();
@@ -448,7 +385,7 @@ Ext.define('HTMLArea.toolbar.Button', {
this.getToolbar().update();
}
}
- return returnValue;
+ return false;
},
/*
* Handler invoked when the hotkey configured for this button is pressed
@@ -465,22 +402,20 @@ Ext.define('HTMLArea.toolbar.Button', {
if (!this.noAutoUpdate) {
this.setDisabled(!this.isInContext(mode, selectionEmpty, ancestors));
}
- this.plugins[0].onUpdateToolbar(this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+ this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
}
}
});
-
+Ext.reg('htmlareabutton', Ext.ux.HTMLAreaButton);
/*
- * HTMLArea.toolbar.TextItem extends Ext.Toolbar.TextItem
+ * Ext.ux.Toolbar.HTMLAreaToolbarText extends Ext.Toolbar.TextItem
*/
-Ext.define('HTMLArea.toolbar.TextItem', {
- extend: 'Ext.toolbar.TextItem',
- alias: ['widget.htmlareatoolbartext'],
+Ext.ux.Toolbar.HTMLAreaToolbarText = Ext.extend(Ext.Toolbar.TextItem, {
/*
- * Initialize component
+ * Constructor
*/
initComponent: function () {
- this.callParent(arguments);
+ Ext.ux.Toolbar.HTMLAreaToolbarText.superclass.initComponent.call(this);
this.addListener({
afterrender: {
fn: this.initEventListeners,
@@ -513,22 +448,20 @@ Ext.define('HTMLArea.toolbar.TextItem', {
onUpdateToolbar: function (mode, selectionEmpty, ancestors, endPointsInSameBlock) {
this.setDisabled(mode === 'textmode' && !this.textMode);
if (!this.disabled) {
- this.plugins[0].onUpdateToolbar(this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+ this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
}
}
});
-
+Ext.reg('htmlareatoolbartext', Ext.ux.Toolbar.HTMLAreaToolbarText);
/*
- * HTMLArea.toolbar.ComboBox extends Ext.form.field.ComboBox
+ * Ext.ux.form.HTMLAreaCombo extends Ext.form.ComboBox
*/
-Ext.define('HTMLArea.toolbar.ComboBox', {
- extend: 'Ext.form.field.ComboBox',
- alias: ['widget.htmlareacombo'],
+Ext.ux.form.HTMLAreaCombo = Ext.extend(Ext.form.ComboBox, {
/*
- * Initialize component
+ * Constructor
*/
initComponent: function () {
- this.callParent(arguments);
+ Ext.ux.form.HTMLAreaCombo.superclass.initComponent.call(this);
this.addEvents(
/*
* @event HTMLAreaEventHotkey
@@ -579,22 +512,10 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
getToolbar: function() {
return this.ownerCt;
},
- /*
- * Get the combo itemId
- */
- getItemId: function() {
- return this.itemId;
- },
- /*
- * Get the combo store
- */
- getStore: function(){
- return this.store;
- },
/*
* Handler invoked when an item is selected in the dropdown list
*/
- onComboSelect: function (combo, records) {
+ onComboSelect: function (combo, record, index) {
if (!combo.disabled) {
var editor = this.getEditor();
// In IE, reclaim lost focus on the editor iframe and restore the bookmarked selection
@@ -606,7 +527,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
}
}
// Invoke the plugin onChange handler
- this.plugins[0][this.action](editor, combo, records);
+ this.plugins[this.action](editor, combo, record, index);
// In IE, bookmark the updated selection as the editor will be loosing focus
if (Ext.isIE) {
editor.focus();
@@ -625,7 +546,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
* In IE, need to reclaim lost focus for the editor in order to restore the selection
*/
onTriggerClick: function () {
- this.callParent(arguments);
+ Ext.ux.form.HTMLAreaCombo.superclass.onTriggerClick.call(this);
// In IE, avoid focus being stolen and selection being lost
if (Ext.isIE) {
this.triggered = true;
@@ -637,7 +558,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
*/
onViewClick: function (doFocus) {
// Avoid stealing focus from the editor
- this.callParent([false]);
+ Ext.ux.form.HTMLAreaCombo.superclass.onViewClick.call(this, false);
},
/*
* Handler invoked in IE when the mouse moves out of the editor iframe
@@ -671,7 +592,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
*/
onHotKey: function (key) {
if (!this.disabled) {
- this.plugins[0].onHotKey(this.getEditor(), key);
+ this.plugins.onHotKey(this.getEditor(), key);
if (Ext.isOpera) {
this.getEditor().focus();
}
@@ -685,7 +606,7 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
onUpdateToolbar: function (mode, selectionEmpty, ancestors, endPointsInSameBlock) {
this.setDisabled(mode === 'textmode' && !this.textMode);
if (!this.disabled) {
- this.plugins[0].onUpdateToolbar(this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+ this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
}
},
/*
@@ -713,21 +634,19 @@ Ext.define('HTMLArea.toolbar.ComboBox', {
this.getStore().destroy();
}
});
-
+Ext.reg('htmlareacombo', Ext.ux.form.HTMLAreaCombo);
/***************************************************
* EDITOR FRAMEWORK
***************************************************/
/*
- * HTMLArea.toolbar.Toolbar extends Ext.container.Container
+ * HTMLArea.Toolbar extends Ext.Container
*/
-Ext.define('HTMLArea.toolbar.Toolbar', {
- extend: 'Ext.container.Container',
- alias: ['widget.htmlareatoolbar'],
+HTMLArea.Toolbar = Ext.extend(Ext.Container, {
/*
- * Initialize component
+ * Constructor
*/
initComponent: function () {
- this.callParent(arguments);
+ HTMLArea.Toolbar.superclass.initComponent.call(this);
this.addEvents(
/*
* @event HTMLAreaEventToolbarUpdate
@@ -736,7 +655,7 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
'HTMLAreaEventToolbarUpdate'
);
// Build the deferred toolbar update task
- this.updateLater = Ext.create('Ext.util.DelayedTask', this.update, this);
+ this.updateLater = new Ext.util.DelayedTask(this.update, this);
// Add the toolbar items
this.addItems();
this.addListener({
@@ -777,13 +696,12 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
// Walk through the editor toolbar configuration nested arrays: [ toolbar [ row [ group ] ] ]
var firstOnRow = true;
var firstInGroup = true;
- var itemsConfig = [];
Ext.each(editor.config.toolbar, function (row) {
if (!firstOnRow) {
// If a visible item was added to the previous line
- itemsConfig.push({
+ this.add({
xtype: 'tbspacer',
- cls: 'htmlarea-clear-left'
+ cls: 'x-form-clear-left'
});
}
firstOnRow = true;
@@ -792,25 +710,25 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
// To do: this.config.keepButtonGroupTogether ...
if (!firstOnRow && !firstInGroup) {
// If a visible item was added to the line
- itemsConfig.push({
+ this.add({
xtype: 'tbseparator',
- cls: 'htmlarea-toolbar-separator'
+ cls: 'separator'
});
}
firstInGroup = true;
// Add each item
Ext.each(group, function (item) {
if (item == 'space') {
- itemsConfig.push({
+ this.add({
xtype: 'tbspacer',
- cls: 'htmlarea-toolbar-spacer'
+ cls: 'space'
});
} else {
// Get the item's config as registered by some plugin
var itemConfig = editor.config.buttonsConfig[item];
if (!Ext.isEmpty(itemConfig)) {
itemConfig.id = this.editorId + '-' + itemConfig.id;
- itemsConfig.push(itemConfig);
+ this.add(itemConfig);
firstInGroup = firstInGroup && itemConfig.hidden;
firstOnRow = firstOnRow && firstInGroup;
}
@@ -821,17 +739,16 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
}, this);
return true;
}, this);
- itemsConfig.push({
+ this.add({
xtype: 'tbspacer',
- cls: 'htmlarea-clear-left'
+ cls: 'x-form-clear-left'
});
- this.add(itemsConfig);
},
/*
* Retrieve a toolbar item by itemId
*/
getButton: function (buttonId) {
- return this.getComponent(buttonId);
+ return this.find('itemId', buttonId)[0];
},
/*
* Update the state of the toolbar
@@ -854,20 +771,19 @@ Ext.define('HTMLArea.toolbar.Toolbar', {
*/
onBeforeDestroy: function () {
this.removeAll(true);
+ return true;
}
});
-
+Ext.reg('htmlareatoolbar', HTMLArea.Toolbar);
/*
- * HTMLArea.Iframe extends Ext.Component
+ * HTMLArea.Iframe extends Ext.BoxComponent
*/
-Ext.define('HTMLArea.Iframe', {
- extend: 'Ext.Component',
- alias: ['widget.htmlareaiframe'],
+HTMLArea.Iframe = Ext.extend(Ext.BoxComponent, {
/*
- * Initialize component
+ * Constructor
*/
initComponent: function () {
- this.callParent(arguments);
+ HTMLArea.Iframe.superclass.initComponent.call(this);
this.addEvents(
/*
* @event HTMLAreaEventIframeReady
@@ -891,14 +807,14 @@ Ext.define('HTMLArea.Iframe', {
}
});
this.config = this.getEditor().config;
- this.htmlRenderer = Ext.create('HTMLArea.DOM.Walker', {
+ this.htmlRenderer = new HTMLArea.DOM.Walker({
keepComments: !this.config.htmlRemoveComments,
removeTags: this.config.htmlRemoveTags,
removeTagsAndContents: this.config.htmlRemoveTagsAndContents,
baseUrl: this.config.baseURL
});
if (!this.config.showStatusBar) {
- this.addCls('noStatusBar');
+ this.addClass('noStatusBar');
}
},
/*
@@ -948,13 +864,13 @@ Ext.define('HTMLArea.Iframe', {
* Get a reference to the toolbar
*/
getToolbar: function () {
- return this.ownerCt.toolbar;
+ return this.ownerCt.getTopToolbar();
},
/*
* Get a reference to the statusBar
*/
getStatusBar: function () {
- return this.ownerCt.statusBar;
+ return this.ownerCt.getBottomToolbar();
},
/*
* Get a reference to a button
@@ -966,6 +882,30 @@ Ext.define('HTMLArea.Iframe', {
* Flag set to true when the iframe becomes usable for editing
*/
ready: false,
+ /*
+ * Create the iframe element at rendering time
+ */
+ onRender: function (ct, position){
+ // from Ext.Component
+ if (!this.el && this.autoEl) {
+ if (Ext.isString(this.autoEl)) {
+ this.el = document.createElement(this.autoEl);
+ } else {
+ // ExtJS Default method will not work with iframe element
+ this.el = Ext.DomHelper.append(ct, this.autoEl, true);
+ }
+ if (!this.el.id) {
+ this.el.id = this.getId();
+ }
+ }
+ // from Ext.BoxComponent
+ if (this.resizeEl){
+ this.resizeEl = Ext.get(this.resizeEl);
+ }
+ if (this.positionEl){
+ this.positionEl = Ext.get(this.positionEl);
+ }
+ },
/*
* Proceed to build the iframe document head and ensure style sheets are available after the iframe document becomes available
*/
@@ -973,13 +913,13 @@ Ext.define('HTMLArea.Iframe', {
var iframe = this.getEl().dom;
// All browsers
if (!iframe || (!iframe.contentWindow && !iframe.contentDocument)) {
- Ext.Function.defer(this.initializeIframe, 50, this);
+ this.initializeIframe.defer(50, this);
// All except WebKit
} else if (iframe.contentWindow && !Ext.isWebKit && (!iframe.contentWindow.document || !iframe.contentWindow.document.documentElement)) {
- Ext.Function.defer(this.initializeIframe, 50, this);
+ this.initializeIframe.defer(50, this);
// WebKit
} else if (Ext.isWebKit && (!iframe.contentDocument.documentElement || !iframe.contentDocument.body)) {
- Ext.Function.defer(this.initializeIframe, 50, this);
+ this.initializeIframe.defer(50, this);
} else {
this.document = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;
this.getEditor().document = this.document;
@@ -987,9 +927,12 @@ Ext.define('HTMLArea.Iframe', {
this.getEditor()._iframe = iframe;
this.createHead();
// Style the document body
- Ext.fly(this.document.body).addCls('htmlarea-content-body');
+ Ext.get(this.document.body).addClass('htmlarea-content-body');
// Start listening to things happening in the iframe
- this.startListening();
+ // For some unknown reason, this is too early for Opera
+ if (!Ext.isOpera) {
+ this.startListening();
+ }
// Hide the iframe
this.hide();
// Set iframe ready
@@ -1053,11 +996,13 @@ Ext.define('HTMLArea.Iframe', {
* Focus on the iframe
*/
focus: function () {
- if (Ext.isWebKit) {
- this.getEl().dom.focus();
- } else {
- this.getEl().dom.contentWindow.focus();
- }
+ try {
+ if (Ext.isWebKit) {
+ this.getEl().dom.focus();
+ } else {
+ this.getEl().dom.contentWindow.focus();
+ }
+ } catch(e) { }
},
/*
* Flag indicating whether the framework is inside a tab or inline element that may be hidden
@@ -1171,7 +1116,7 @@ Ext.define('HTMLArea.Iframe', {
*/
startListening: function () {
// Create keyMap so that plugins may bind key handlers
- this.keyMap = Ext.create('Ext.util.KeyMap', Ext.get(this.document.documentElement), [], (Ext.isIE || Ext.isWebKit) ? 'keydown' : 'keypress');
+ this.keyMap = new Ext.KeyMap(Ext.get(this.document.documentElement), [], (Ext.isIE || Ext.isWebKit) ? 'keydown' : 'keypress');
// Special keys map
this.keyMap.addBinding([
{
@@ -1231,7 +1176,7 @@ Ext.define('HTMLArea.Iframe', {
}
});
// Make hot key map available, even if empty, so that plugins may add bindings
- this.hotKeyMap = Ext.create('Ext.util.KeyMap', Ext.get(this.document.documentElement));
+ this.hotKeyMap = new Ext.KeyMap(Ext.get(this.document.documentElement));
if (!Ext.isEmpty(hotKeys)) {
this.hotKeyMap.addBinding({
key: hotKeys,
@@ -1239,8 +1184,7 @@ Ext.define('HTMLArea.Iframe', {
shift: false,
alt: false,
handler: this.onHotKey,
- scope: this,
- defaultEventAction: 'stopEvent'
+ scope: this
});
}
this.mon(Ext.get(this.document.documentElement), (Ext.isIE || Ext.isWebKit) ? 'keydown' : 'keypress', this.onAnyKey, this);
@@ -1303,7 +1247,7 @@ Ext.define('HTMLArea.Iframe', {
onPaste: function (event) {
// Make src and href urls absolute
if (Ext.isGecko) {
- Ext.Function.defer(HTMLArea.DOM.makeUrlsAbsolute, 50, this, [this.getEditor().document.body, this.config.baseURL, this.htmlRenderer]);
+ HTMLArea.DOM.makeUrlsAbsolute.defer(50, this, [this.getEditor().document.body, this.config.baseURL, this.htmlRenderer]);
}
},
/*
@@ -1312,11 +1256,11 @@ Ext.define('HTMLArea.Iframe', {
onDrop: function (event, target) {
// Clean up span elements added by WebKit
if (Ext.isWebKit) {
- Ext.Function.defer(this.getEditor().cleanAppleStyleSpans, 50, this.getEditor(), [this.getEditor().document.body]);
+ this.getEditor().cleanAppleStyleSpans.defer(50, this.getEditor(), [this.getEditor().document.body]);
}
// Make src url absolute in Firefox
if (Ext.isGecko) {
- Ext.Function.defer(HTMLArea.DOM.makeUrlsAbsolute, 50, this, [target, this.config.baseURL, this.htmlRenderer]);
+ HTMLArea.DOM.makeUrlsAbsolute.defer(50, this, [target, this.config.baseURL, this.htmlRenderer]);
}
this.getToolbar().updateLater.delay(100);
},
@@ -1438,7 +1382,8 @@ Ext.define('HTMLArea.Iframe', {
return false;
}
var hotKey = String.fromCharCode(key).toLowerCase();
- return this.getButton(this.config.hotKeyList[hotKey].cmd).fireEvent('HTMLAreaEventHotkey', hotKey, event);
+ this.getButton(this.config.hotKeyList[hotKey].cmd).fireEvent('HTMLAreaEventHotkey', hotKey, event);
+ return false;
},
/*
* Cleanup
@@ -1473,20 +1418,18 @@ Ext.define('HTMLArea.Iframe', {
return true;
}
});
-
+Ext.reg('htmlareaiframe', HTMLArea.Iframe);
/*
- * HTMLArea.StatusBar extends Ext.container.Container
+ * HTMLArea.StatusBar extends Ext.Container
*/
-Ext.define('HTMLArea.StatusBar', {
- extend: 'Ext.container.Container',
- alias: ['widget.htmlareastatusbar'],
+HTMLArea.StatusBar = Ext.extend(Ext.Container, {
/*
- * Initialize component
+ * Constructor
*/
initComponent: function () {
- this.callParent(arguments);
+ HTMLArea.StatusBar.superclass.initComponent.call(this);
// Build the deferred word count update task
- this.updateWordCountLater = Ext.create('Ext.util.DelayedTask', this.updateWordCount, this);
+ this.updateWordCountLater = new Ext.util.DelayedTask(this.updateWordCount, this);
this.addListener({
render: {
fn: this.addComponents,
@@ -1510,11 +1453,11 @@ Ext.define('HTMLArea.StatusBar', {
});
// Monitor toolbar updates in order to refresh the contents of the statusbar
// The toolbar must have been rendered
- this.mon(this.getToolbar(), 'HTMLAreaEventToolbarUpdate', this.onUpdateToolbar, this);
+ this.mon(this.ownerCt.toolbar, 'HTMLAreaEventToolbarUpdate', this.onUpdateToolbar, this);
// Monitor editor changing mode
this.mon(this.getEditor(), 'HTMLAreaEventModeChange', this.onModeChange, this);
// Monitor word count change
- this.mon(this.getIframe(), 'HTMLAreaEventWordCountChange', this.onWordCountChange, this);
+ this.mon(this.ownerCt.iframe, 'HTMLAreaEventWordCountChange', this.onWordCountChange, this);
},
/*
* editorId should be set in config
@@ -1526,35 +1469,23 @@ Ext.define('HTMLArea.StatusBar', {
getEditor: function() {
return RTEarea[this.editorId].editor;
},
- /*
- * Get a reference to the toolbar
- */
- getToolbar: function() {
- return this.ownerCt.toolbar;
- },
- /*
- * Get a reference to the editor iframe
- */
- getIframe: function() {
- return this.ownerCt.iframe;
- },
/*
* Create span elements to display when the status bar tree or a message when the editor is in text mode
*/
addComponents: function () {
- this.statusBarWordCount = Ext.core.DomHelper.append(this.getEl(), {
+ this.statusBarWordCount = Ext.DomHelper.append(this.getEl(), {
id: this.editorId + '-statusBarWordCount',
tag: 'span',
cls: 'statusBarWordCount',
html: ' '
}, true);
- this.statusBarTree = Ext.core.DomHelper.append(this.getEl(), {
+ this.statusBarTree = Ext.DomHelper.append(this.getEl(), {
id: this.editorId + '-statusBarTree',
tag: 'span',
cls: 'statusBarTree',
html: HTMLArea.localize('Path') + ': '
}, true).setVisibilityMode(Ext.Element.DISPLAY).setVisible(true);
- this.statusBarTextMode = Ext.core.DomHelper.append(this.getEl(), {
+ this.statusBarTextMode = Ext.DomHelper.append(this.getEl(), {
id: this.editorId + '-statusBarTextMode',
tag: 'span',
cls: 'statusBarTextMode',
@@ -1567,7 +1498,7 @@ Ext.define('HTMLArea.StatusBar', {
clear: function () {
this.statusBarTree.removeAllListeners();
Ext.each(this.statusBarTree.query('a'), function (node) {
- Ext.tip.QuickTipManager.unregister(node);
+ Ext.QuickTips.unregister(node);
Ext.get(node).dom.ancestor = null;
Ext.destroy(node);
});
@@ -1589,7 +1520,7 @@ Ext.define('HTMLArea.StatusBar', {
classes = new Array(),
classText;
this.clear();
- var path = Ext.core.DomHelper.append(this.statusBarTree, {
+ var path = Ext.DomHelper.append(this.statusBarTree, {
tag: 'span',
html: HTMLArea.localize('Path') + ': '
},true);
@@ -1618,22 +1549,22 @@ Ext.define('HTMLArea.StatusBar', {
}
text += classText;
}
- var element = Ext.core.DomHelper.insertAfter(path, {
+ var element = Ext.DomHelper.insertAfter(path, {
tag: 'a',
href: '#',
- 'data-qtitle': HTMLArea.localize('statusBarStyle'),
- 'data-qtip': ancestor.style.cssText.split(';').join('<br />'),
+ 'ext:qtitle': HTMLArea.localize('statusBarStyle'),
+ 'ext:qtip': ancestor.style.cssText.split(';').join('<br />'),
html: text
}, true);
- // Ext.core.DomHelper does not honour the custom attribute
+ // Ext.DomHelper does not honour the custom attribute
element.dom.ancestor = ancestor;
element.on('click', this.onClick, this);
element.on('mousedown', this.onClick, this);
if (!Ext.isOpera) {
- element.on('contextmenu', this.onContextMenu, this, {stopEvent: true});
+ element.on('contextmenu', this.onContextMenu, this);
}
if (index) {
- Ext.core.DomHelper.insertAfter(element, {
+ Ext.DomHelper.insertAfter(element, {
tag: 'span',
html: String.fromCharCode(0xbb)
});
@@ -1757,20 +1688,19 @@ Ext.define('HTMLArea.StatusBar', {
return true;
}
});
-
+Ext.reg('htmlareastatusbar', HTMLArea.StatusBar);
/*
- * HTMLArea.Framework extends Ext.panel.Panel
+ * HTMLArea.Framework extends Ext.Panel
*/
-Ext.define('HTMLArea.Framework', {
- extend: 'Ext.panel.Panel',
+HTMLArea.Framework = Ext.extend(Ext.Panel, {
/*
- * Initialize component
+ * Constructor
*/
initComponent: function () {
- this.callParent(arguments);
+ HTMLArea.Framework.superclass.initComponent.call(this);
// Set some references
- this.toolbar = this.getDockedComponent('toolbar');
- this.statusBar = this.getDockedComponent('statusbar');
+ this.toolbar = this.getTopToolbar();
+ this.statusBar = this.getBottomToolbar();
this.iframe = this.getComponent('iframe');
this.textAreaContainer = this.getComponent('textAreaContainer');
this.addEvents(
@@ -1802,10 +1732,12 @@ Ext.define('HTMLArea.Framework', {
* Initiate events monitoring
*/
initEventListeners: function () {
+ // Make the framework resizable, if configured by the user
+ this.makeResizable();
// Monitor textArea container becoming shown or hidden as it may change the height of the status bar
- this.mon(this.textAreaContainer, 'show', this.resizable ? this.onResize : this.onWindowResize, this);
+ this.mon(this.textAreaContainer, 'show', this.resizable ? this.onTextAreaShow : this.onWindowResize, this);
// Monitor iframe becoming shown or hidden as it may change the height of the status bar
- this.mon(this.iframe, 'show', this.resizable ? this.onResize : this.onWindowResize, this);
+ this.mon(this.iframe, 'show', this.resizable ? this.onIframeShow : this.onWindowResize, this);
// Monitor window resizing
Ext.EventManager.onWindowResize(this.onWindowResize, this);
// If the textarea is inside a form, on reset, re-initialize the HTMLArea content and update the toolbar
@@ -1821,7 +1753,7 @@ Ext.define('HTMLArea.Framework', {
}
this.addListener({
resize: {
- fn: this.onResize
+ fn: this.onFrameworkResize
}
});
},
@@ -1854,6 +1786,11 @@ Ext.define('HTMLArea.Framework', {
* Should be set in config
*/
nestedParentElements: {},
+ /*
+ * Whether the framework should be made resizable
+ * May be set in config
+ */
+ resizable: false,
/*
* Maximum height to which the framework may resized (in pixels)
* May be set in config
@@ -1873,7 +1810,7 @@ Ext.define('HTMLArea.Framework', {
*/
doLayout: function () {
if (!this.isNested || HTMLArea.util.TYPO3.allElementsAreDisplayed(this.nestedParentElements.sorted)) {
- this.callParent(arguments);
+ HTMLArea.Framework.superclass.doLayout.call(this);
} else {
// Clone the array of nested tabs and inline levels instead of using a reference as HTMLArea.util.TYPO3.accessParentElements will modify the array
var parentElements = [].concat(this.nestedParentElements.sorted);
@@ -1886,14 +1823,38 @@ Ext.define('HTMLArea.Framework', {
*/
onLayout: function () {
if (!this.isNested || HTMLArea.util.TYPO3.allElementsAreDisplayed(this.nestedParentElements.sorted)) {
- this.callParent(arguments);
+ HTMLArea.Framework.superclass.onLayout.call(this);
} else {
// Clone the array of nested tabs and inline levels instead of using a reference as HTMLArea.util.TYPO3.accessParentElements will modify the array
var parentElements = [].concat(this.nestedParentElements.sorted);
// Walk through all nested tabs and inline levels to get correct sizes
- HTMLArea.util.TYPO3.accessParentElements(parentElements, 'HTMLArea.Framework.superclass.onLayout.call(args[0])', [this]);
+ HTMLArea.util.TYPO3.accessParentElements(parentElements, 'HTMLArea.Framework.superclass.onLayout.call(args[0])', [this]);
}
},
+ /*
+ * Make the framework resizable, if configured
+ */
+ makeResizable: function () {
+ if (this.resizable) {
+ this.addClass('resizable');
+ this.resizer = new Ext.Resizable(this.getEl(), {
+ minWidth: 300,
+ maxHeight: this.maxHeight,
+ dynamic: false
+ });
+ this.resizer.on('resize', this.onHtmlAreaResize, this);
+ }
+ },
+ /*
+ * Resize the framework when the resizer handles are used
+ */
+ onHtmlAreaResize: function (resizer, width, height, event) {
+ // Set width first as it may change the height of the toolbar and of the statusBar
+ this.setWidth(width);
+ // Set height of iframe and textarea
+ this.iframe.setHeight(this.getInnerHeight());
+ this.textArea.setSize(this.getInnerWidth(), this.getInnerHeight());
+ },
/*
* Size the iframe according to initial textarea size as set by Page and User TSConfig
*/
@@ -1914,15 +1875,15 @@ Ext.define('HTMLArea.Framework', {
var frameworkHeight = parseInt(this.textAreaInitialSize.height);
if (this.textAreaInitialSize.width.indexOf('%') === -1) {
// Width is specified in pixels
- var frameworkWidth = parseInt(this.textAreaInitialSize.width);
+ var frameworkWidth = parseInt(this.textAreaInitialSize.width) - this.getFrameWidth();
} else {
// Width is specified in %
if (Ext.isNumber(width)) {
// Framework sizing on actual window resize
- var frameworkWidth = parseInt(((width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollbarSize().width) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
+ var frameworkWidth = parseInt(((width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollBarWidth()) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
} else {
// Initial framework sizing
- var frameworkWidth = parseInt(((HTMLArea.util.TYPO3.getWindowSize().width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollbarSize().width) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
+ var frameworkWidth = parseInt(((HTMLArea.util.TYPO3.getWindowSize().width - this.textAreaInitialSize.wizardsWidth - (this.fullScreen ? 10 : Ext.getScrollBarWidth()) - this.getBox().x - 15) * parseInt(this.textAreaInitialSize.width))/100);
}
}
if (this.resizable) {
@@ -1935,25 +1896,33 @@ Ext.define('HTMLArea.Framework', {
/*
* Resize the framework components
*/
- onResize: function () {
+ onFrameworkResize: function () {
+ this.iframe.setSize(this.getInnerWidth(), this.getInnerHeight());
+ this.textArea.setSize(this.getInnerWidth(), this.getInnerHeight());
+ },
+ /*
+ * Adjust the height to the changing size of the statusbar when the textarea is shown
+ */
+ onTextAreaShow: function () {
+ this.iframe.setHeight(this.getInnerHeight());
+ this.textArea.setHeight(this.getInnerHeight());
+ },
+ /*
+ * Adjust the height to the changing size of the statusbar when the iframe is shown
+ */
+ onIframeShow: function () {
if (this.getInnerHeight() <= 0) {
this.onWindowResize();
} else {
- this.iframe.setSize(this.getInnerWidth() - 3, this.getInnerHeight() - 3);
- this.textArea.setSize(this.getInnerWidth(), this.getInnerHeight());
+ this.iframe.setHeight(this.getInnerHeight());
+ this.textArea.setHeight(this.getInnerHeight());
}
},
/*
* Calculate the height available for the editing iframe
*/
getInnerHeight: function () {
- return this.getSize().height - this.toolbar.getHeight() - this.statusBar.getHeight();
- },
- /*
- * Calculate the width available for the editing iframe
- */
- getInnerWidth: function () {
- return this.getSize().width - this.frameSize.right - this.frameSize.left;
+ return this.getSize().height - this.toolbar.getHeight() - this.statusBar.getHeight() - 5;
},
/*
* Fire the editor when all components of the framework are rendered and ready
@@ -1970,7 +1939,7 @@ Ext.define('HTMLArea.Framework', {
this.onWindowResize();
this.fireEvent('HTMLAreaEventFrameworkReady');
} else {
- Ext.Function.defer(this.onIframeReady, 50, this);
+ this.onIframeReady.defer(50, this);
}
},
/*
@@ -2011,17 +1980,16 @@ Ext.define('HTMLArea.Framework', {
return true;
}
});
-
+Ext.reg('htmlareaframework', HTMLArea.Framework);
/***************************************************
* HTMLArea.Editor extends Ext.util.Observable
***************************************************/
-Ext.define('HTMLArea.Editor', {
- extend: 'Ext.util.Observable',
+HTMLArea.Editor = Ext.extend(Ext.util.Observable, {
/*
* HTMLArea.Editor constructor
*/
constructor: function (config) {
- this.callParent([{}]);
+ HTMLArea.Editor.superclass.constructor.call(this, {});
// Save the config
this.config = config;
// Establish references to this editor
@@ -2065,7 +2033,7 @@ Ext.define('HTMLArea.Editor', {
}
}, this);
// Create Ajax object
- this.ajax = Ext.create('HTMLArea.Ajax', {
+ this.ajax = new HTMLArea.Ajax({
editor: this
});
// Initialize keyboard input inhibit flag
@@ -2082,7 +2050,6 @@ Ext.define('HTMLArea.Editor', {
*/
'HTMLAreaEventModeChange'
);
- return this;
},
/*
* Flag set to true when the editor initialization has completed
@@ -2097,42 +2064,27 @@ Ext.define('HTMLArea.Editor', {
*/
generate: function () {
// Create the editor framework
- this.htmlArea = Ext.create('HTMLArea.Framework', {
+ this.htmlArea = new HTMLArea.Framework({
id: this.editorId + '-htmlArea',
- layout: 'auto',
- renderTo: this.textArea.parent(),
- cls: 'htmlarea',
- frame: true,
+ layout: 'anchor',
+ baseCls: 'htmlarea',
editorId: this.editorId,
textArea: this.textArea,
textAreaInitialSize: this.textAreaInitialSize,
fullScreen: this.config.fullScreen,
resizable: this.config.resizable,
- minWidth: 300,
maxHeight: this.config.maxHeight,
isNested: this.isNested,
nestedParentElements: this.nestedParentElements,
- dockedItems: [{
- // The toolbar
- xtype: 'htmlareatoolbar',
- dock: 'top',
- itemId: 'toolbar',
- id: this.editorId + '-toolbar',
- anchor: '100%',
- layout: 'anchor',
- cls: 'toolbar',
- editorId: this.editorId
- },{
- // The status bar
- xtype: 'htmlareastatusbar',
- dock: 'bottom',
- itemId: 'statusbar',
- id: this.editorId + '-statusbar',
- anchor: '100%',
- cls: 'statusBar',
- editorId: this.editorId
- }
- ],
+ // The toolbar
+ tbar: {
+ xtype: 'htmlareatoolbar',
+ id: this.editorId + '-toolbar',
+ anchor: '100%',
+ layout: 'form',
+ cls: 'toolbar',
+ editorId: this.editorId
+ },
items: [{
// The iframe
xtype: 'htmlareaiframe',
@@ -2150,8 +2102,8 @@ Ext.define('HTMLArea.Editor', {
nestedParentElements: this.nestedParentElements,
editorId: this.editorId
},{
- // Container for the textarea
- xtype: 'component',
+ // Box container for the textarea
+ xtype: 'box',
itemId: 'textAreaContainer',
anchor: '100%',
width: (this.textAreaInitialSize.width.indexOf('%') === -1) ? parseInt(this.textAreaInitialSize.width) : 300,
@@ -2175,11 +2127,18 @@ Ext.define('HTMLArea.Editor', {
}
}
}
- ]
+ ],
+ // The status bar
+ bbar: {
+ xtype: 'htmlareastatusbar',
+ anchor: '100%',
+ cls: 'statusBar',
+ editorId: this.editorId
+ }
});
// Set some references
- this.toolbar = this.htmlArea.getDockedComponent('toolbar');
- this.statusBar = this.htmlArea.getDockedComponent('statusbar');
+ this.toolbar = this.htmlArea.getTopToolbar();
+ this.statusBar = this.htmlArea.getBottomToolbar();
this.iframe = this.htmlArea.getComponent('iframe');
this.textAreaContainer = this.htmlArea.getComponent('textAreaContainer');
// Get triggered when the framework becomes ready
@@ -2326,7 +2285,7 @@ Ext.define('HTMLArea.Editor', {
var plugin = HTMLArea[pluginName],
isRegistered = false;
if (typeof(plugin) !== 'undefined' && Ext.isFunction(plugin)) {
- var pluginInstance = Ext.create(plugin, this, pluginName);
+ var pluginInstance = new plugin(this, pluginName);
if (pluginInstance) {
var pluginInformation = pluginInstance.getPluginInformation();
pluginInformation.instance = pluginInstance;
@@ -2384,6 +2343,9 @@ Ext.define('HTMLArea.Editor', {
* Add listeners
*/
initEventsListening: function () {
+ if (Ext.isOpera) {
+ this.iframe.startListening();
+ }
// Add unload handler
var iframe = this.iframe.getEl().dom;
Ext.EventManager.on(iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument, 'unload', this.onUnload, this, {single: true});
@@ -2418,13 +2380,13 @@ Ext.define('HTMLArea.Editor', {
}, false);
}
// Cleanup
- Ext.TaskManager.stopAll();
+ Ext.TaskMgr.stopAll();
// ExtJS is not releasing any resources when the iframe is unloaded
this.htmlArea.destroy();
Ext.iterate(this.plugins, function (pluginId) {
this.unRegisterPlugin(pluginId);
}, this);
- this.clearListeners();
+ this.purgeListeners();
// Cleaning references to DOM in order to avoid IE memory leaks
if (this.wizards) {
this.wizards.dom = null;
@@ -2435,14 +2397,10 @@ Ext.define('HTMLArea.Editor', {
RTEarea[this.editorId].editor = null;
}
});
-HTMLArea.Ajax = Ext.define('HTMLArea.Ajax', {
- /*
- * Constructor
- */
- constructor: function (config) {
- this.initConfig(config);
- return this;
- },
+HTMLArea.Ajax = function (config) {
+ Ext.apply(this, config);
+};
+HTMLArea.Ajax = Ext.extend(HTMLArea.Ajax, {
/*
* Load a Javascript file asynchronously
*
@@ -3445,25 +3403,21 @@ HTMLArea.DOM.Walker = Ext.extend(HTMLArea.DOM.Walker, {
/***************************************************
* HTMLArea.CSS.Parser: CSS Parser
***************************************************/
-Ext.define('HTMLArea.CSS.Parser', {
- extend: 'Ext.util.Observable',
- /*
- * Default config
- */
- config: {
- parseAttemptsMaximumNumber: 20,
- prefixLabelWithClassName: false,
- postfixLabelWithClassName: false,
- showTagFreeClasses: false,
- tags: null,
- editor: null
- },
+HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
/*
* HTMLArea.CSS.Parser constructor
*/
constructor: function (config) {
- this.callParent([{}]);
- this.initConfig(config);
+ HTMLArea.CSS.Parser.superclass.constructor.call(this, {});
+ var configDefaults = {
+ parseAttemptsMaximumNumber: 20,
+ prefixLabelWithClassName: false,
+ postfixLabelWithClassName: false,
+ showTagFreeClasses: false,
+ tags: null,
+ editor: null
+ };
+ Ext.apply(this, config, configDefaults);
if (this.editor.config.styleSheetsMaximumAttempts) {
this.parseAttemptsMaximumNumber = this.editor.config.styleSheetsMaximumAttempts;
}
@@ -3474,7 +3428,6 @@ Ext.define('HTMLArea.CSS.Parser', {
*/
'HTMLAreaEventCssParsingComplete'
);
- return this;
},
/*
* The parsed classes
@@ -3545,7 +3498,7 @@ Ext.define('HTMLArea.CSS.Parser', {
this.fireEvent('HTMLAreaEventCssParsingComplete');
} else if (this.parseAttemptsCounter < this.parseAttemptsMaximumNumber) {
this.parseAttemptsCounter++;
- this.attemptTimeout = Ext.Function.defer(this.parse, 200, this);
+ this.attemptTimeout = this.parse.defer(200, this);
} else {
this.editor.appendToLog('HTMLArea.CSS.Parser', 'parse', 'The stylesheets could not be parsed. Reported error: ' + this.error, 'error');
this.fireEvent('HTMLAreaEventCssParsingComplete');
@@ -3793,7 +3746,7 @@ Ext.define('HTMLArea.CSS.Parser', {
* TIPS ON FORM FIELDS AND MENU ITEMS
***************************************************/
/*
- * Intercept Ext.form.field.Field.afterRender in order to provide tips on form fields
+ * Intercept Ext.form.Field.afterRender in order to provide tips on form fields and menu items
* Adapted from: http://www.extjs.com/forum/showthread.php?t=36642
*/
HTMLArea.util.Tips = function () {
@@ -3812,7 +3765,7 @@ HTMLArea.util.Tips = function () {
style: 'vertical-align: middle; padding-right: 2px;'
});
if (this.helpDisplay == 'image' || this.helpDisplay == 'both'){
- Ext.tip.QuickTipManager.register({
+ Ext.QuickTips.register({
target: helpImage,
title: this.helpTitle,
text: this.helpText
@@ -3820,17 +3773,27 @@ HTMLArea.util.Tips = function () {
}
}
if (this.helpDisplay == 'field' || this.helpDisplay == 'both'){
- Ext.tip.QuickTipManager.register({
+ Ext.QuickTips.register({
target: this,
title: this.helpTitle,
text: this.helpText
});
}
}
+ },
+ tipsOnMenuItems: function () {
+ if (this.helpText || this.helpTitle) {
+ Ext.QuickTips.register({
+ target: this,
+ title: this.helpTitle,
+ text: this.helpText
+ });
+ }
}
}
}();
-Ext.form.field.Field.prototype.afterRender = Ext.Function.createInterceptor(Ext.form.field.Field.prototype.afterRender, HTMLArea.util.Tips.tipsOnFormFields);
+Ext.form.Field.prototype.afterRender = Ext.form.Field.prototype.afterRender.createInterceptor(HTMLArea.util.Tips.tipsOnFormFields);
+Ext.menu.BaseItem.prototype.afterRender = Ext.menu.BaseItem.prototype.afterRender.createInterceptor(HTMLArea.util.Tips.tipsOnMenuItems);
/***************************************************
* COLOR WIDGETS AND UTILITIES
***************************************************/
@@ -3852,7 +3815,7 @@ HTMLArea.util.Color = function () {
* Returns hexadecimal color representation from a number or a rgb-style color.
*/
colorToHex: function(v) {
- if (!v && v !== 0) {
+ if (!v) {
return '';
}
function hex(d) {
@@ -3878,68 +3841,60 @@ HTMLArea.util.Color = function () {
return v;
}
return null;
+ },
+ /*
+ * Select interceptor to ensure that the color exists in the palette before trying to select
+ */
+ checkIfColorInPalette: function (color) {
+ // Do not continue if the new color is not in the palette
+ if (this.el && !this.el.child('a.color-' + color)) {
+ // Remove any previous selection
+ this.deSelect();
+ return false;
+ }
}
}
}();
/*
- * Intercept select method of Ext.picker.Color to ensure that the color exists in the palette before trying to select
+ * Intercept Ext.ColorPalette.prototype.select
*/
-Ext.picker.Color.prototype.select = Ext.Function.createInterceptor(Ext.picker.Color.prototype.select, function (color) {
- // Do not continue if the new color is not in the palette
- if (this.el && !this.el.down('a.color-' + color)) {
- // Remove any previous selection
- this.deSelect();
- return false;
- }
-});
+Ext.ColorPalette.prototype.select = Ext.ColorPalette.prototype.select.createInterceptor(HTMLArea.util.Color.checkIfColorInPalette);
/*
- * Add deSelect method to Ext.picker.Color
+ * Add deSelect method to Ext.ColorPalette
*/
-Ext.override(Ext.picker.Color, {
+Ext.override(Ext.ColorPalette, {
deSelect: function () {
- if (this.el && this.getValue()){
- this.el.down('a.color-' + this.getValue()).removeCls(this.selectedCls);
+ if (this.el && this.value){
+ this.el.child('a.color-' + this.value).removeClass('x-color-palette-sel');
this.value = null;
}
}
});
-Ext.define('HTMLArea.color.Menu', {
- extend: 'Ext.menu.Menu',
- alias: ['widget.htmlareacolormenu'],
+Ext.ux.menu.HTMLAreaColorMenu = Ext.extend(Ext.menu.Menu, {
enableScrolling: false,
hideOnClick: true,
- cls: 'htmlarea-color-menu',
+ cls: 'x-color-menu',
colorPaletteValue: '',
customColorsValue: '',
- layout: {
- type: 'vbox',
- align: 'center'
- },
plain: true,
showSeparator: false,
initComponent: function () {
var paletteItems = [];
+ var width = 'auto';
if (this.colorsConfiguration) {
paletteItems.push({
xtype: 'container',
- cls: 'htmlarea-custom-colors-container',
- layout: 'fit',
+ layout: 'anchor',
width: 160,
+ style: { float: 'right' },
items: {
- xtype: 'colorpicker',
+ xtype: 'colorpalette',
itemId: 'custom-colors',
cls: 'htmlarea-custom-colors',
- data: this.colorsConfiguration,
+ colors: this.colorsConfiguration,
value: this.value,
allowReselect: true,
- listeners: {
- afterrender: {
- fn: this.initRelay,
- scope: this,
- single: true
- }
- },
- tpl: Ext.create('Ext.XTemplate',
+ tpl: new Ext.XTemplate(
'<tpl for="."><a href="#" class="color-{1}" hidefocus="on"><em><span style="background:#{1}" unselectable="on"> </span></em><span unselectable="on">{0}</span></a></tpl>'
)
}
@@ -3948,52 +3903,54 @@ Ext.define('HTMLArea.color.Menu', {
if (this.colors.length) {
paletteItems.push({
xtype: 'container',
- layout: 'fit',
+ layout: 'anchor',
items: {
- xtype: 'colorpicker',
+ xtype: 'colorpalette',
itemId: 'color-palette',
cls: 'color-palette',
colors: this.colors,
value: this.value,
- allowReselect: true,
- listeners: {
- afterrender: {
- fn: this.initRelay,
- scope: this,
- single: true
- }
- }
+ allowReselect: true
}
});
}
+ if (this.colorsConfiguration && this.colors.length) {
+ width = 350;
+ }
Ext.apply(this, {
+ layout: 'menu',
+ width: width,
items: paletteItems
});
- this.callParent(arguments);
+ Ext.ux.menu.HTMLAreaColorMenu.superclass.initComponent.call(this);
+ this.standardPalette = this.find('itemId', 'color-palette')[0];
+ this.customPalette = this.find('itemId', 'custom-colors')[0];
+ if (this.standardPalette) {
+ this.standardPalette.purgeListeners();
+ this.relayEvents(this.standardPalette, ['select']);
+ }
+ if (this.customPalette) {
+ this.customPalette.purgeListeners();
+ this.relayEvents(this.customPalette, ['select']);
+ }
this.on('select', this.menuHide, this);
if (this.handler){
this.on('select', this.handler, this.scope || this);
}
},
- initRelay: function (colorPicker) {
- this.relayEvents(colorPicker, ['select']);
- },
menuHide: function() {
if (this.hideOnClick){
this.hide(true);
}
}
});
-
+Ext.reg('htmlareacolormenu', Ext.ux.menu.HTMLAreaColorMenu);
/*
- * Color picker trigger field
+ * Color palette trigger field
* Based on http://www.extjs.com/forum/showthread.php?t=89312
*/
-Ext.define('HTMLArea.color.Field', {
- extend: 'Ext.form.field.Trigger',
- alias: ['widget.colorpalettefield'],
-
- triggerCls: 'htmlarea-form-color-trigger',
+Ext.ux.form.ColorPaletteField = Ext.extend(Ext.form.TriggerField, {
+ triggerClass: 'x-form-color-trigger',
defaultColors: [
'000000', '222222', '444444', '666666', '999999', 'BBBBBB', 'DDDDDD', 'FFFFFF',
'660000', '663300', '996633', '003300', '003399', '000066', '330066', '660066',
@@ -4011,7 +3968,7 @@ Ext.define('HTMLArea.color.Field', {
colorizeTrigger: false,
editable: true,
initComponent: function () {
- this.callParent(arguments);
+ Ext.ux.form.ColorPaletteField.superclass.initComponent.call(this);
if (!this.colors) {
this.colors = this.defaultColors;
}
@@ -4026,21 +3983,21 @@ Ext.define('HTMLArea.color.Field', {
setValue: function (color) {
if (color) {
if (this.colorizeFieldBackgroud) {
- this.inputEl.applyStyles('background: #' + color + ';');
+ this.el.applyStyles('background: #' + color + ';');
}
if (this.colorizeFieldText) {
- this.inputEl.applyStyles('color: #' + this.rgbToHex(this.invert(this.hexToRgb(color))) + ';');
+ this.el.applyStyles('color: #' + this.rgbToHex(this.invert(this.hexToRgb(color))) + ';');
}
if (this.colorizeTrigger) {
- this.triggerEl.applyStyles('background-color: #' + color + ';');
+ this.trigger.applyStyles('background-color: #' + color + ';');
}
}
- return this.callParent(arguments);
+ return Ext.ux.form.ColorPaletteField.superclass.setValue.call(this, color);
},
// private
onDestroy: function () {
Ext.destroy(this.menu);
- this.callParent(arguments);
+ Ext.ux.form.ColorPaletteField.superclass.onDestroy.call(this);
},
// private
onTriggerClick: function () {
@@ -4048,7 +4005,7 @@ Ext.define('HTMLArea.color.Field', {
return;
}
if (this.menu == null) {
- this.menu = Ext.create('HTMLArea.color.Menu', {
+ this.menu = new Ext.ux.menu.HTMLAreaColorMenu({
cls: 'htmlarea-color-menu',
hideOnClick: false,
colors: this.colors,
@@ -4102,7 +4059,7 @@ Ext.define('HTMLArea.color.Field', {
return HCHARS.charAt( ( n - n % 16 ) / 16 ) + HCHARS.charAt( n % 16 );
}
});
-
+Ext.reg('colorpalettefield', Ext.ux.form.ColorPaletteField);
/**
* Internet Explorer returns an item having the _name_ equal to the given id, even if it's not having any id.
* This way it can return a different form field even if it's not a textarea. This works around the problem by
@@ -4138,10 +4095,10 @@ HTMLArea.initEditor = function(editorNumber) {
document.getElementById('pleasewait' + editorNumber).style.display = 'block';
document.getElementById('editorWrap' + editorNumber).style.visibility = 'hidden';
if (!HTMLArea.isReady) {
- Ext.Function.defer(HTMLArea.initEditor, 150, null, [editorNumber]);
+ HTMLArea.initEditor.defer(150, null, [editorNumber]);
} else {
// Create an editor for the textarea
- var editor = Ext.create('HTMLArea.Editor', Ext.apply(Ext.create('HTMLArea.Config', editorNumber), RTEarea[editorNumber]));
+ var editor = new HTMLArea.Editor(Ext.apply(new HTMLArea.Config(editorNumber), RTEarea[editorNumber]));
editor.generate();
return false;
}
@@ -4157,15 +4114,21 @@ HTMLArea.initEditor = function(editorNumber) {
* Every plugin should be a subclass of this class
*
*/
-Ext.define('HTMLArea.Plugin', {
- /*
- * Reference to the editor instance
- */
- editor: null,
- /*
- * Name of the plugin
- */
- name: 'unknown',
+HTMLArea.Plugin = function (editor, pluginName) {
+};
+/**
+ ***********************************************
+ * THIS FUNCTION IS DEPRECATED AS OF TYPO3 4.6 *
+ ***********************************************
+ * Extends class HTMLArea.Plugin
+ *
+ * Defined for backward compatibility only
+ * Use Ext.extend(SubClassName, config) directly
+ */
+HTMLArea.Plugin.extend = function (config) {
+ return Ext.extend(HTMLArea.Plugin, config);
+};
+HTMLArea.Plugin = Ext.extend(HTMLArea.Plugin, {
/**
* HTMLArea.Plugin constructor
*
@@ -4186,7 +4149,18 @@ Ext.define('HTMLArea.Plugin', {
this.I18N = new Object();
}
this.configurePlugin(editor);
- return this;
+ /**
+ ***********************************************
+ * THIS FUNCTION IS DEPRECATED AS OF TYPO3 4.6 *
+ ***********************************************
+ * Extends class HTMLArea[pluginName]
+ *
+ * Defined for backward compatibility only
+ * Use Ext.extend(SubClassName, config) directly
+ */
+ HTMLArea[pluginName].extend = function (config) {
+ return Ext.extend(HTMLArea[pluginName], config);
+ };
},
/**
* Configures the plugin
@@ -4207,7 +4181,7 @@ Ext.define('HTMLArea.Plugin', {
***********************************************
* THIS FUNCTION IS DEPRECATED AS OF TYPO3 4.6 *
***********************************************
- * Invoke the base class constructor
+ * Invove the base class constructor
*
* Defined for backward compatibility only
* Note: this.base will exclusively refer to the HTMLArea.Plugin class constructor
@@ -4246,7 +4220,7 @@ Ext.define('HTMLArea.Plugin', {
*
* @return object the plugin information object
*/
- getPluginInformation: function() {
+ getPluginInformation : function() {
return this.pluginInformation;
},
@@ -4256,7 +4230,7 @@ Ext.define('HTMLArea.Plugin', {
* @param string pluinName: the name of some plugin
* @return object the plugin object or null
*/
- getPluginInstance: function(pluginName) {
+ getPluginInstance : function(pluginName) {
return this.editor.getPlugin(pluginName);
},
@@ -4265,7 +4239,7 @@ Ext.define('HTMLArea.Plugin', {
*
* @return string editor mode
*/
- getEditorMode: function() {
+ getEditorMode : function() {
return this.editor.getMode();
},
@@ -4276,7 +4250,7 @@ Ext.define('HTMLArea.Plugin', {
*
* @return boolean true if the button is enabled in the toolbar configuration
*/
- isButtonInToolbar: function(buttonId) {
+ isButtonInToolbar : function(buttonId) {
var index = -1;
Ext.each(this.editorConfiguration.toolbar, function (row) {
Ext.each(row, function (group) {
@@ -4413,7 +4387,7 @@ Ext.define('HTMLArea.Plugin', {
*
* @return object the drop-down configuration object
*/
- getDropDownConfiguration: function(dropDownId) {
+ getDropDownConfiguration : function(dropDownId) {
return this.editorConfiguration.buttonsConfig[dropDownId];
},
@@ -4427,7 +4401,7 @@ Ext.define('HTMLArea.Plugin', {
*
* @return boolean true if the hotkey was successfully registered
*/
- registerHotKey: function (hotKeyConfiguration) {
+ registerHotKey : function (hotKeyConfiguration) {
return this.editorConfiguration.registerHotKey(hotKeyConfiguration);
},
@@ -4438,7 +4412,7 @@ Ext.define('HTMLArea.Plugin', {
*
* @return string the buttonId or ""
*/
- translateHotKey: function(key) {
+ translateHotKey : function(key) {
if (typeof(this.editorConfiguration.hotKeyList[key]) !== "undefined") {
var buttonId = this.editorConfiguration.hotKeyList[key].cmd;
if (typeof(buttonId) !== "undefined") {
@@ -4466,7 +4440,7 @@ Ext.define('HTMLArea.Plugin', {
},
/**
* Initializes the plugin
- * Is invoked when the toolbar component is created (subclass of HTMLArea.toolbar.Button or HTMLArea.toolbar.ComboBox)
+ * Is invoked when the toolbar component is created (subclass of Ext.ux.HTMLAreaButton or Ext.ux.form.HTMLAreaCombo)
*
* @param object button: the component
*
@@ -4571,17 +4545,21 @@ Ext.define('HTMLArea.Plugin', {
* @ return void
*/
openContainerWindow: function (buttonId, title, dimensions, url) {
- this.dialog = Ext.create('Ext.window.Window', {
- border: false,
- cls: 'htmlarea-window',
- height: dimensions.height,
- iconCls: this.getButton(buttonId).iconCls,
+ this.dialog = new Ext.Window({
id: this.editor.editorId + buttonId,
- layout: 'fit',
- resizable: true,
title: this.localize(title) || title,
+ cls: 'htmlarea-window',
width: dimensions.width,
+ border: false,
+ resizable: true,
+ iconCls: this.getButton(buttonId).iconCls,
listeners: {
+ afterrender: {
+ fn: this.onContainerResize
+ },
+ resize: {
+ fn: this.onContainerResize
+ },
close: {
fn: this.onClose,
scope: this
@@ -4589,7 +4567,7 @@ Ext.define('HTMLArea.Plugin', {
},
items: {
// The content iframe
- xtype: 'component',
+ xtype: 'box',
height: dimensions.height-20,
itemId: 'content-iframe',
autoEl: {
@@ -4601,6 +4579,15 @@ Ext.define('HTMLArea.Plugin', {
});
this.show();
},
+ /*
+ * Handler invoked when the container window is rendered or resized in order to resize the content iframe to maximum size
+ */
+ onContainerResize: function (panel) {
+ var iframe = panel.getComponent('content-iframe');
+ if (iframe.rendered) {
+ iframe.getEl().setSize(panel.getInnerWidth(), panel.getInnerHeight());
+ }
+ },
/*
* Get the opening diment=sions of the window
*
@@ -4668,12 +4655,19 @@ Ext.define('HTMLArea.Plugin', {
configArray.push(configElement);
}
},
+ /*
+ * Handler for Ext.TabPanel tabchange event
+ * Force window ghost height synchronization
+ * Working around ExtJS 3.1 bug
+ */
+ syncHeight: function (tabPanel, tab) {
+ var position = this.dialog.getPosition();
+ if (position[0] > 0) {
+ this.dialog.setPosition(position);
+ }
+ },
/*
* Show the dialogue window
- *
- * We cannot use autoShow on dialogue windows:
- * - we want to close the window if the editor changes mode
- * - we need to save and restore the selection for IE which looses it when focus leaves the iframe
*/
show: function () {
// Close the window if the editor changes mode
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/about-editor.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/about-editor.js
index 50e4f3a3ba92185566c4de81cac4a9fa79cb8700..e45b28cfe3d4838f8cbac233c76e9db045623678 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/about-editor.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/about-editor.js
@@ -29,27 +29,7 @@
/*
* About Plugin for TYPO3 htmlArea RTE
*/
-/*
- * Define data model for editor plugins data
- */
-Ext.define('HTMLArea.model.AboutEditor', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'name',
- type: 'string'
- },{
- name: 'developer',
- type: 'string'
- },{
- name: 'sponsor',
- type: 'string'
- }]
-});
-/*
- * Define AboutEditor plugin
- */
-Ext.define('HTMLArea.AboutEditor', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.AboutEditor = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -58,7 +38,7 @@ Ext.define('HTMLArea.AboutEditor', {
* Registering plugin "About" information
*/
var pluginInformation = {
- version : '3.0',
+ version : '2.1',
developer : 'Stanislas Rolland',
developerUrl : 'http://www.sjbr.ca/',
copyrightOwner : 'Stanislas Rolland',
@@ -108,13 +88,7 @@ Ext.define('HTMLArea.AboutEditor', {
this.openDialogue(
buttonId,
'About HTMLArea',
- this.getWindowDimensions(
- {
- width: 480,
- height: 350
- },
- buttonId
- ),
+ this.getWindowDimensions({width:450, height:350}, buttonId),
this.buildTabItems()
);
return false;
@@ -130,13 +104,14 @@ Ext.define('HTMLArea.AboutEditor', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions, tabItems) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -151,6 +126,10 @@ Ext.define('HTMLArea.AboutEditor', {
activate: {
fn: this.resetFocus,
scope: this
+ },
+ tabchange: {
+ fn: this.syncHeight,
+ scope: this
}
},
items: tabItems
@@ -171,7 +150,7 @@ Ext.define('HTMLArea.AboutEditor', {
// About tab
tabItems.push({
xtype: 'panel',
- bodyCls: 'htmlarea-about',
+ cls: 'about',
title: this.localize('About'),
html: '<h1 id="version">htmlArea RTE ' + RTEarea[0].version + '</h1>'
+ '<p>' + this.localize('free_editor').replace('<', '<').replace('>', '>') + '</p>'
@@ -181,47 +160,44 @@ Ext.define('HTMLArea.AboutEditor', {
+ '<br />'
+ '© 2002-2004 <a href="http://interactivetools.com" target="_blank">interactivetools.com, inc.</a><br />'
+ '© 2003-2004 <a href="http://dynarch.com" target="_blank">dynarch.com LLC.</a><br />'
- + '© 2004-2011 <a href="http://www.sjbr.ca" target="_blank">Stanislas Rolland</a><br />'
+ + '© 2004-2010 <a href="http://www.sjbr.ca" target="_blank">Stanislas Rolland</a><br />'
+ this.localize('All rights reserved.')
+ '</p>'
});
- // Create pluginInfo global store
- var pluginInfoStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + 'pluginInfo');
- if (!pluginInfoStore) {
- pluginInfoStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.AboutEditor',
- sorters: [{
- property: 'name',
- direction: 'ASC'
- }],
- storeId: 'HTMLArea' + '-store-' + this.name + 'pluginInfo'
+ // Plugins tab
+ if (!this.store) {
+ this.store = new Ext.data.ArrayStore({
+ fields: [{ name: 'name'}, { name: 'developer'}, { name: 'sponsor'}],
+ sortInfo: {
+ field: 'name',
+ direction: 'ASC'
+ },
+ data: this.getPluginsInfo()
});
- pluginInfoStore.loadData(this.getPluginsInfo());
}
tabItems.push({
- xtype: 'grid',
- cls: 'htmlarea-about-plugins',
- height: 300,
+ xtype: 'panel',
+ cls: 'about-plugins',
+ height: 200,
title: this.localize('Plugins'),
- store: pluginInfoStore,
autoScroll: true,
- columns: [{
+ items: {
+ xtype: 'listview',
+ store: this.store,
+ reserveScrollOffset: true,
+ columns: [{
header: this.localize('Name'),
dataIndex: 'name',
- hideable: false,
- width: 150
+ width: .33
},{
header: this.localize('Developer'),
dataIndex: 'developer',
- hideable: false,
- width: 150
+ width: .33
},{
header: this.localize('Sponsored by'),
- dataIndex: 'sponsor',
- hideable: false,
- width: 150
- }
- ]
+ dataIndex: 'sponsor'
+ }]
+ }
});
return tabItems;
},
@@ -233,11 +209,11 @@ Ext.define('HTMLArea.AboutEditor', {
getPluginsInfo: function () {
var pluginsInfo = [];
Ext.iterate(this.editor.plugins, function (pluginId, plugin) {
- pluginsInfo.push({
- name: plugin.name + ' ' + plugin.version,
- developer: '<a href="' + plugin.developerUrl + '" target="_blank">' + plugin.developer + '</a>',
- sponsor: '<a href="' + plugin.sponsorUrl + '" target="_blank">' + plugin.sponsor + '</a>'
- });
+ pluginsInfo.push([
+ plugin.name + ' ' + plugin.version,
+ '<a href="' + plugin.developerUrl + '" target="_blank">' + plugin.developer + '</a>',
+ '<a href="' + plugin.sponsorUrl + '" target="_blank">' + plugin.sponsor + '</a>'
+ ]);
}, this);
return pluginsInfo;
}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/Acronym/acronym.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/Acronym/acronym.js
index ad6a129b983f82da6179a31127e196947da16f9a..1f275176d3048f2739134b809654f08a901f5f86 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/Acronym/acronym.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/Acronym/acronym.js
@@ -27,27 +27,7 @@
/*
* Acronym plugin for htmlArea RTE
*/
-/*
- * Define data model for abbreviation data
- */
-Ext.define('HTMLArea.model.Abbreviation', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'term',
- type: 'string'
- },{
- name: 'abbr',
- type: 'string'
- },{
- name: 'language',
- type: 'string'
- }]
-});
-/*
- * Define Acronym plugin
- */
-Ext.define('HTMLArea.Acronym', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.Acronym = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -57,7 +37,7 @@ Ext.define('HTMLArea.Acronym', {
* Registering plugin "About" information
*/
var pluginInformation = {
- version : '3.0',
+ version : '2.4',
developer : 'Stanislas Rolland',
developerUrl : 'http://www.sjbr.ca/',
copyrightOwner : 'Stanislas Rolland',
@@ -86,15 +66,13 @@ Ext.define('HTMLArea.Acronym', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
+ combo: {
editable: true,
- forceSelection: true,
- queryMode: 'local',
selectOnFocus: true,
- triggerAction: 'all',
typeAhead: true,
- xtype: 'combobox'
+ triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local'
}
},
/*
@@ -126,7 +104,7 @@ Ext.define('HTMLArea.Acronym', {
};
// Open the dialogue window
this.openDialogue(
- this.getButton(buttonId).tooltip.text,
+ this.getButton(buttonId).tooltip.title,
buttonId,
this.getWindowDimensions({ width: 580}, buttonId),
this.buildTabItemsConfig(abbr),
@@ -148,13 +126,14 @@ Ext.define('HTMLArea.Acronym', {
* @return void
*/
openDialogue: function (title, buttonId, dimensions, tabItems, buttonsConfig, activeTab) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.getHelpTip('', title),
cls: 'htmlarea-window',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -162,18 +141,24 @@ Ext.define('HTMLArea.Acronym', {
scope: this
}
},
- items: [{
+ items: {
xtype: 'tabpanel',
activeTab: activeTab ? activeTab : 0,
defaults: {
xtype: 'container',
- layout: 'anchor',
+ layout: 'form',
defaults: {
labelWidth: 150
}
},
+ listeners: {
+ tabchange: {
+ fn: this.syncHeight,
+ scope: this
+ }
+ },
items: tabItems
- }],
+ },
buttons: buttonsConfig
});
this.show();
@@ -245,132 +230,125 @@ Ext.define('HTMLArea.Acronym', {
* @return object the fieldset configuration object
*/
buildDefinedTermFieldsetConfig: function (element, type) {
- // Create global abbreviation store if it does not exist already
- var abbreviationStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name);
- if (!abbreviationStore) {
- this.abbreviationStore = Ext.create('Ext.data.Store', {
- autoLoad: true,
- model: 'HTMLArea.model.Abbreviation',
- proxy: {
- type: 'ajax',
- url: this.pageTSConfiguration.acronymUrl,
- reader: {
- type: 'json',
- root: type
- }
- },
- storeId: this.editorId + '-store-' + this.name
- });
- }
var itemsConfig = [];
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
displayField: 'term',
+ valueField: 'term',
fieldLabel: this.getHelpTip('unabridgedTerm', 'Unabridged_term'),
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{abbr}" class="htmlarea-combo-list-item">{term}</div>';
- },
- },
itemId: 'termSelector',
+ tpl: '<tpl for="."><div ext:qtip="{abbr}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{term}</div></tpl>',
+ store: new Ext.data.JsonStore({
+ autoDestroy: true,
+ autoLoad: true,
+ root: type,
+ fields: [ { name: 'term'}, { name: 'abbr'}, { name: 'language'}],
+ url: this.pageTSConfiguration.acronymUrl
+ }),
+ width: 350,
listeners: {
+ beforerender: {
+ fn: function (combo) {
+ // Ensure the store is loaded
+ combo.getStore().load({
+ callback: function () { this.onSelectorRender(combo); },
+ scope: this
+ });
+ },
+ scope: this
+ },
select: {
fn: this.onTermSelect,
scope: this
}
- },
- store: this.abbreviationStore,
- valueField: 'term',
- width: 350
- }, this.configDefaults['combobox']));
- itemsConfig.push(Ext.applyIf({
+ }
+ }, this.configDefaults['combo']));
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
displayField: 'abbr',
+ valueField: 'abbr',
+ tpl: '<tpl for="."><div ext:qtip="{language}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{abbr}</div></tpl>',
fieldLabel: this.getHelpTip('abridgedTerm', 'Abridged_term'),
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{language}" class="htmlarea-combo-list-item">{abbr}</div>';
- }
- },
itemId: 'abbrSelector',
+ store: new Ext.data.JsonStore({
+ autoDestroy: true,
+ autoLoad: true,
+ root: type,
+ fields: [ { name: 'term'}, { name: 'abbr'}, { name: 'language'}],
+ url: this.pageTSConfiguration.acronymUrl
+ }),
+ width: 100,
listeners: {
+ beforerender: {
+ fn: function (combo) {
+ // Ensure the store is loaded
+ combo.getStore().load({
+ callback: function () { this.onSelectorRender(combo); },
+ scope: this
+ });
+ },
+ scope: this
+ },
select: {
fn: this.onAbbrSelect,
scope: this
}
- },
- store: this.abbreviationStore,
- valueField: 'abbr',
- width: 200
- }, this.configDefaults['combobox']));
- var languagePlugin = this.getPluginInstance('Language');
- if (this.getButton('Language') && languagePlugin) {
- var selectedLanguage = !Ext.isEmpty(element) ? languagePlugin.getLanguageAttribute(element) : 'none';
- // Create global language store if it does not exist already
- var languageStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + languagePlugin.name);
- if (!languageStore) {
- languageStore = Ext.create('Ext.data.Store', {
- autoLoad: true,
- model: 'HTMLArea.model.default',
- proxy: {
- type: 'ajax',
- url: this.getDropDownConfiguration('Language').dataUrl,
- reader: {
- type: 'json',
- root: 'options',
- }
- },
- storeId: this.editorId + '-store-' + languagePlugin.name
- });
}
+ }, this.configDefaults['combo']));
+ var languageObject = this.getPluginInstance('Language');
+ if (this.getButton('Language')) {
+ var selectedLanguage = !Ext.isEmpty(element) ? languageObject.getLanguageAttribute(element) : 'none';
+ function initLanguageStore (store) {
+ if (selectedLanguage !== 'none') {
+ store.removeAt(0);
+ store.insert(0, new store.recordType({
+ text: languageObject.localize('Remove language mark'),
+ value: 'none'
+ }));
+ }
+ this.getButton('Language').setValue('none');
+ }
+ var languageStore = new Ext.data.JsonStore({
+ autoDestroy: true,
+ autoLoad: true,
+ root: 'options',
+ fields: [ { name: 'text'}, { name: 'value'} ],
+ url: this.getDropDownConfiguration('Language').dataUrl,
+ listeners: {
+ load: {
+ fn: initLanguageStore,
+ scope: this
+ }
+ }
+ });
itemsConfig.push(Ext.apply({
- displayField: 'text',
+ xtype: 'combo',
fieldLabel: this.getHelpTip('language', 'Language'),
itemId: 'language',
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
+ valueField: 'value',
+ displayField: 'text',
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>',
+ store: languageStore,
+ width: 200,
+ value: selectedLanguage,
listeners: {
- afterrender: {
+ render: {
fn: function (combo) {
- // Somehow getStore method got lost...
- if (!Ext.isFunction(combo.getStore)) {
- combo.getStore = function () {
- return combo.store;
- };
- }
- var store = combo.getStore();
- store.removeAt(0);
- if (selectedLanguage !== 'none') {
- store.insert(0, {
- text: languagePlugin.localize('Remove language mark'),
- value: 'none'
- });
- } else {
- store.insert(0, {
- text: languagePlugin.localize('No language mark'),
- value: 'none'
- });
- }
- combo.setValue(selectedLanguage);
- },
- scope: this
+ // Load the language dropdown
+ combo.getStore().load({
+ callback: function () { combo.setValue(selectedLanguage); }
+ });
+ }
}
- },
- store: languageStore,
- valueField: 'value',
- width: 350
- }, this.configDefaults['combobox']));
+ }
+ }, this.configDefaults['combo']));
}
return {
xtype: 'fieldset',
title: this.getHelpTip('preDefined' + ((type == 'abbr') ? 'Abbreviation' : 'Acronym'), 'Defined_' + type),
items: itemsConfig,
listeners: {
- afterrender: {
+ render: {
fn: this.onDefinedTermFieldsetRender,
scope: this
}
@@ -379,34 +357,15 @@ Ext.define('HTMLArea.Acronym', {
},
/*
* Handler on rendering the defined abbreviation fieldset
- */
- onDefinedTermFieldsetRender: function (fieldset) {
- // Make sure the store is loaded
- if (!this.abbreviationStore.getCount()) {
- this.abbreviationStore.load({
- callback: function (records) {
- this.abbreviationStore.savedSnapshot = this.abbreviationStore.data.clone();
- this.initializeFieldset(fieldset);
- },
- scope: this
- });
- } else {
- // Refresh the store
- this.abbreviationStore.snapshot = this.abbreviationStore.savedSnapshot.clone();
- this.initializeFieldset(fieldset);
- }
- },
- /*
- * Initialize fieldset
* If an abbr is selected but no term is selected, select any corresponding term with the correct language value, if any
*/
- initializeFieldset: function (fieldset) {
- var termSelector = fieldset.getComponent('termSelector');
+ onDefinedTermFieldsetRender: function (fieldset) {
+ var termSelector = fieldset.find('itemId', 'termSelector')[0];
var term = termSelector.getValue();
- var abbrSelector = fieldset.getComponent('abbrSelector');
+ var abbrSelector = fieldset.find('itemId', 'abbrSelector')[0];
var abbr = abbrSelector.getValue();
var language = '';
- var languageSelector = fieldset.down('combobox[itemId=language]');
+ var languageSelector = fieldset.find('itemId', 'language')[0];
if (languageSelector) {
var language = languageSelector.getValue();
if (language == 'none') {
@@ -421,34 +380,23 @@ Ext.define('HTMLArea.Acronym', {
if (index !== -1) {
term = abbrStore.getAt(index).get('term');
termSelector.setValue(term);
- fieldset.ownerCt.down('component[itemId=useTerm]').setValue(term);
+ fieldset.ownerCt.find('itemId', 'useTerm')[0].setValue(term);
}
}
- // Filter the abbreviation store
- this.abbreviationStore.filterBy(function (record) {
- return !this.params.text
- || !this.params.title
- || this.params.text == record.get('term')
- || this.params.text == record.get('abbr')
- || this.params.title == record.get('term')
- || this.params.title == record.get('abbr');
- }, this);
- // Make sure the combo lists are filtered
- this.abbreviationStore.snapshot = this.abbreviationStore.data;
- if (this.abbreviationStore.getCount()) {
- // Initialize combos
- this.initializeCombo(termSelector);
- this.initializeCombo(abbrSelector);
- } else {
- fieldset.hide();
- }
},
/*
+ * Filter the term and abbr selector lists
* Set initial values
* If there is already an abbr and the filtered list has only one or no element, hide the fieldset
*/
- initializeCombo: function (combo) {
- var store = this.abbreviationStore;
+ onSelectorRender: function (combo) {
+ var store = combo.getStore();
+ store.filterBy(function (record) {
+ return !this.params.text || !this.params.title || this.params.text == record.get('term') || this.params.title == record.get('term') || this.params.title == record.get('abbr');
+ }, this);
+ // Make sure the combo list is filtered
+ store.snapshot = store.data;
+ var store = combo.getStore();
// Initialize the term and abbr combos
if (combo.getItemId() == 'termSelector') {
if (this.params.title) {
@@ -456,14 +404,14 @@ Ext.define('HTMLArea.Acronym', {
if (index !== -1) {
var record = store.getAt(index);
combo.setValue(record.get('term'));
- this.onTermSelect(combo, [record], false);
+ this.onTermSelect(combo, record, index);
}
} else if (this.params.text) {
var index = store.findExact('term', this.params.text);
if (index !== -1) {
var record = store.getAt(index);
combo.setValue(record.get('term'));
- this.onTermSelect(combo, [record], false);
+ this.onTermSelect(combo, record, index);
}
}
} else if (combo.getItemId() == 'abbrSelector' && this.params.text) {
@@ -471,52 +419,56 @@ Ext.define('HTMLArea.Acronym', {
if (index !== -1) {
var record = store.getAt(index);
combo.setValue(record.get('abbr'));
- this.onAbbrSelect(combo, [record], false);
+ this.onAbbrSelect(combo, record, index);
}
}
},
/*
* Handler when a term is selected
*/
- onTermSelect: function (combo, records, options) {
- var record = records[0];
+ onTermSelect: function (combo, record, index) {
var fieldset = combo.findParentByType('fieldset');
var tab = fieldset.findParentByType('container');
var term = record.get('term');
var abbr = record.get('abbr');
var language = record.get('language');
// Update the abbreviation selector
- tab.down('component[itemId=abbrSelector]').setValue(abbr);
+ var abbrSelector = tab.find('itemId', 'abbrSelector')[0];
+ abbrSelector.setValue(abbr);
// Update the language selector
- var languageSelector = tab.down('combobox[itemId=language]');
- if (!Ext.isEmpty(languageSelector) && !Ext.isBoolean(options)) {
- languageSelector.setValue(language ? language : 'none');
+ var languageSelector = tab.find('itemId', 'language');
+ if (!Ext.isEmpty(languageSelector)) {
+ if (language) {
+ languageSelector[0].setValue(language);
+ } else {
+ languageSelector[0].setValue('none');
+ }
}
// Update the term to use
- if (!Ext.isBoolean(options)) {
- tab.down('component[itemId=useTerm]').setValue(term);
- }
+ tab.find('itemId', 'useTerm')[0].setValue(term);
},
/*
* Handler when an abbreviation or acronym is selected
*/
- onAbbrSelect: function (combo, records, options) {
- var record = records[0];
+ onAbbrSelect: function (combo, record, index) {
var fieldset = combo.findParentByType('fieldset');
var tab = fieldset.findParentByType('container');
var term = record.get('term');
var language = record.get('language');
// Update the term selector
- tab.down('component[itemId=termSelector]').setValue(term);
+ var termSelector = tab.find('itemId', 'termSelector')[0];
+ termSelector.setValue(term);
// Update the language selector
- var languageSelector = tab.down('combobox[itemId=language]');
- if (!Ext.isEmpty(languageSelector) && !Ext.isBoolean(options)) {
- languageSelector.setValue(language ? language : 'none');
+ var languageSelector = tab.find('itemId', 'language');
+ if (!Ext.isEmpty(languageSelector)) {
+ if (language) {
+ languageSelector[0].setValue(language);
+ } else {
+ languageSelector[0].setValue('none');
+ }
}
// Update the term to use
- if (!Ext.isBoolean(options)) {
- tab.down('component[itemId=useTerm]').setValue(term);
- }
+ tab.find('itemId', 'useTerm')[0].setValue(term);
},
/*
* This function builds the configuration object for the Abbreviation or Acronym to use fieldset
@@ -546,16 +498,16 @@ Ext.define('HTMLArea.Acronym', {
*/
okHandler: function (button, event) {
this.restoreSelection();
- var tab = this.dialog.down('tabpanel').getActiveTab();
+ var tab = this.dialog.findByType('tabpanel')[0].getActiveTab();
var type = tab.getItemId();
- var languageSelector = tab.down('component[itemId=language]');
- var language = !Ext.isEmpty(languageSelector) ? languageSelector.getValue() : '';
- var term = tab.down('component[itemId=termSelector]').getValue();
+ var languageSelector = tab.find('itemId', 'language');
+ var language = !Ext.isEmpty(languageSelector) ? languageSelector[0].getValue() : '';
+ var term = tab.find('itemId', 'termSelector')[0].getValue();
if (!this.params.abbr) {
var abbr = this.editor.document.createElement(type);
- abbr.title = tab.down('component[itemId=useTerm]').getValue();
+ abbr.title = tab.find('itemId', 'useTerm')[0].getValue();
if (term == abbr.title) {
- abbr.innerHTML = tab.down('component[itemId=abbrSelector]').getValue();
+ abbr.innerHTML = tab.find('itemId', 'abbrSelector')[0].getValue();
} else {
abbr.innerHTML = this.params.text;
}
@@ -565,12 +517,12 @@ Ext.define('HTMLArea.Acronym', {
this.editor.insertNodeAtSelection(abbr);
} else {
var abbr = this.params.abbr;
- abbr.title = tab.down('component[itemId=useTerm]').getValue();
+ abbr.title = tab.find('itemId', 'useTerm')[0].getValue();
if (language) {
this.getPluginInstance('Language').setLanguageAttributes(abbr, language);
}
if (term == abbr.title) {
- abbr.innerHTML = tab.down('component[itemId=abbrSelector]').getValue();
+ abbr.innerHTML = tab.find('itemId', 'abbrSelector')[0].getValue();
}
}
this.close();
@@ -599,7 +551,7 @@ Ext.define('HTMLArea.Acronym', {
button.setInactive(!(el.nodeName.toLowerCase() == 'acronym' && !this.pageTSConfiguration.noAcronym) && !(el.nodeName.toLowerCase() == 'abbr' && !this.pageTSConfiguration.noAbbr));
}
button.setTooltip({
- text: this.localize((button.disabled || button.inactive) ? 'Insert abbreviation' : 'Edit abbreviation')
+ title: this.localize((button.disabled || button.inactive) ? 'Insert abbreviation' : 'Edit abbreviation')
});
button.contextMenuTitle = '';
if (this.dialog) {
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockElements/block-elements.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockElements/block-elements.js
index b9b87800dd33dfd98d0a8fd962f20c7ef8b97c9b..38e0f40d1fa529227a68046f514c3dbdfe5e11a7 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockElements/block-elements.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockElements/block-elements.js
@@ -27,8 +27,7 @@
/*
* BlockElements Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.BlockElements', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.BlockElements = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -120,12 +119,11 @@ Ext.define('HTMLArea.BlockElements', {
};
if (this.buttonsConfiguration.formatblock) {
dropDownConfiguration.width = this.buttonsConfiguration.formatblock.width ? parseInt(this.buttonsConfiguration.formatblock.width, 10) : 200;
- dropDownConfiguration.listConfig = {};
if (this.buttonsConfiguration.formatblock.listWidth) {
- dropDownConfiguration.listConfig.width = parseInt(this.buttonsConfiguration.formatblock.listWidth, 10);
+ dropDownConfiguration.listWidth = parseInt(this.buttonsConfiguration.formatblock.listWidth, 10);
}
if (this.buttonsConfiguration.formatblock.maxHeight) {
- dropDownConfiguration.listConfig.maxHeight = parseInt(this.buttonsConfiguration.formatblock.maxHeight, 10);
+ dropDownConfiguration.maxHeight = parseInt(this.buttonsConfiguration.formatblock.maxHeight, 10);
}
}
this.registerDropDown(dropDownConfiguration);
@@ -1207,16 +1205,16 @@ Ext.define('HTMLArea.BlockElements', {
}
}
if (index == -1) {
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('No block'),
value: 'none'
- });
+ }));
select.setValue('none');
} else {
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('Remove block'),
value: 'none'
- });
+ }));
select.setValue(store.getAt(index+1).get('value'));
}
},
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockStyle/block-style.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockStyle/block-style.js
index 3fc5d802871b3a34ef468276390b0f1510683946..5fa0d4b0d749bf45ae490d9f8591905e76436f3e 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockStyle/block-style.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockStyle/block-style.js
@@ -29,27 +29,7 @@
/*
* Block Style Plugin for TYPO3 htmlArea RTE
*/
-/*
- * Define data model for blockstyle selector box
- */
-Ext.define('HTMLArea.model.BlockStyle', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'text',
- type: 'string'
- },{
- name: 'value',
- type: 'string'
- },{
- name: 'style',
- type: 'string'
- }]
-});
-/*
- * Define BlockStyle plugin
- */
-Ext.define('HTMLArea.BlockStyle', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -125,28 +105,23 @@ Ext.define('HTMLArea.BlockStyle', {
fieldLabel = this.localize('Block style label');
}
var dropDownConfiguration = {
- action: 'onChange',
id: dropDownId,
tooltip: this.localize(dropDownId + '-Tooltip'),
fieldLabel: fieldLabel,
- options: [{
- text: this.localize('No style'),
- value: 'none',
- style: ''
- }],
- model: 'HTMLArea.model.BlockStyle',
- template: '<div data-qtip="{value}" style="{style}" class="htmlarea-combo-list-item">{text}</div>'
+ options: [[this.localize('No style'), 'none']],
+ action: 'onChange',
+ storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
};
if (this.pageTSconfiguration) {
if (this.pageTSconfiguration.width) {
dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
}
- dropDownConfiguration.listConfig = {};
if (this.pageTSconfiguration.listWidth) {
- dropDownConfiguration.listConfig.width = parseInt(this.pageTSconfiguration.listWidth, 10);
+ dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
}
if (this.pageTSconfiguration.maxHeight) {
- dropDownConfiguration.listConfig.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
+ dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
}
}
this.registerDropDown(dropDownConfiguration);
@@ -234,7 +209,7 @@ Ext.define('HTMLArea.BlockStyle', {
// Monitor editor changing mode
this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
// Create CSS Parser object
- this.blockStyles = Ext.create('HTMLArea.CSS.Parser', {
+ this.blockStyles = new HTMLArea.CSS.Parser({
prefixLabelWithClassName: this.prefixLabelWithClassName,
postfixLabelWithClassName: this.postfixLabelWithClassName,
showTagFreeClasses: this.showTagFreeClasses,
@@ -309,10 +284,10 @@ Ext.define('HTMLArea.BlockStyle', {
initializeDropDown: function (dropDown) {
var store = dropDown.getStore();
store.removeAll(false);
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('No style'),
value: 'none'
- });
+ }));
dropDown.setValue('none');
},
/*
@@ -338,11 +313,11 @@ Ext.define('HTMLArea.BlockStyle', {
style = HTMLArea.classesValues[RegExp.leftContext + '-'];
}
}
- store.add({
+ store.add(new store.recordType({
text: value,
value: cssClass,
style: style
- });
+ }));
}, this);
}
},
@@ -361,10 +336,10 @@ Ext.define('HTMLArea.BlockStyle', {
}
}
if (index == -1 && !noUnknown) {
- store.add({
+ store.add(new store.recordType({
text: this.localize('Unknown style'),
value: classNames[classNames.length-1]
- });
+ }));
index = store.getCount()-1;
dropDown.setValue(classNames[classNames.length-1]);
if (!defaultClass) {
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js
index 2f15cecdca82d4512dcd6abbaba884e071d6d82d..3abf81139b4cfe420bb06444d08440a8bf48e260 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js
@@ -31,8 +31,7 @@
/*
* Character Map Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.CharacterMap', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.CharacterMap = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -51,24 +50,17 @@ Ext.define('HTMLArea.CharacterMap', {
};
this.registerPluginInformation(pluginInformation);
/*
- * Registering the buttons
- */
- for (var i = 0, n = this.buttons.length; i < n; ++i) {
- var button = this.buttons[i];
- buttonId = button[0];
- var buttonConfiguration = {
- id: buttonId,
- tooltip: this.localize(buttonId + '-Tooltip'),
- action: 'onButtonPress',
- context: button[1],
- dialog: false,
- iconCls: 'htmlarea-action-' + button[2]
- };
- this.registerButton(buttonConfiguration);
- }
- /*
- * Localizing the maps
+ * Registering the button
*/
+ var buttonId = 'InsertCharacter';
+ var buttonConfiguration = {
+ id : buttonId,
+ tooltip : this.localize(buttonId + '-Tooltip'),
+ action : 'onButtonPress',
+ dialog : true,
+ iconCls : 'htmlarea-action-character-insert-from-map'
+ };
+ this.registerButton(buttonConfiguration);
Ext.iterate(this.maps, function (key, map, maps) {
for (var i = map.length; --i >= 0;) {
maps[key][i].push(this.localize(map[i][1]));
@@ -76,13 +68,6 @@ Ext.define('HTMLArea.CharacterMap', {
}, this);
return true;
},
- /*
- * The list of buttons added by this plugin
- */
- buttons: [
- ['InsertCharacter', null, 'character-insert-from-map'],
- ['InsertSoftHyphen', null, 'soft-hyphen-insert']
- ],
/*
* Character maps
*/
@@ -349,25 +334,12 @@ Ext.define('HTMLArea.CharacterMap', {
// Could be a button or its hotkey
var buttonId = this.translateHotKey(id);
buttonId = buttonId ? buttonId : id;
- switch (buttonId) {
- case 'InsertCharacter':
- this.openDialogue(
- buttonId,
- 'Insert special character',
- this.getWindowDimensions(
- {
- width: 402,
- height: 360
- },
- buttonId
- ),
- this.buildTabItems()
- );
- break;
- case 'InsertSoftHyphen':
- this.insertEntity('\xAD');
- break;
- }
+ this.openDialogue(
+ buttonId,
+ 'Insert special character',
+ this.getWindowDimensions({width:434, height:360}, buttonId),
+ this.buildTabItems()
+ );
return false;
},
/*
@@ -382,13 +354,14 @@ Ext.define('HTMLArea.CharacterMap', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions, tabItems, handler) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -403,6 +376,10 @@ Ext.define('HTMLArea.CharacterMap', {
activate: {
fn: this.resetFocus,
scope: this
+ },
+ tabchange: {
+ fn: this.syncHeight,
+ scope: this
}
},
items: tabItems
@@ -422,12 +399,12 @@ Ext.define('HTMLArea.CharacterMap', {
var tabItems = [];
Ext.iterate(this.maps, function (id, map) {
tabItems.push({
- xtype: 'component',
- cls: 'htmlarea-character-map',
+ xtype: 'box',
+ cls: 'character-map',
title: this.localize(id),
itemId: id,
- tpl: Ext.create('Ext.XTemplate',
- '<tpl for="."><a href="#" class="htmlarea-character-map-character" hidefocus="on" data-qtitle="<span>&</span>{1};" data-qtip="{2}">{0}</a></tpl>'
+ tpl: new Ext.XTemplate(
+ '<tpl for="."><a href="#" class="character" hidefocus="on" ext:qtitle="<span>&</span>{1};" ext:qtip="{2}">{0}</a></tpl>'
),
listeners: {
render: {
@@ -451,43 +428,26 @@ Ext.define('HTMLArea.CharacterMap', {
component.mon(component.el, 'click', this.insertCharacter, this, {delegate: 'a'});
},
/*
- * Handle the click on an item of the map
+ * Insert the selected entity
*
* @param object event: the Ext event
* @param HTMLelement target: the html element target
*
- * @return boolean
+ * @return void
*/
insertCharacter: function (event, target) {
event.stopEvent();
this.editor.focus();
this.restoreSelection();
var entity = Ext.get(target).dom.innerHTML;
- this.insertEntity(entity);
- if (Ext.isIE) {
- this.saveSelection();
- }
- return false;
- },
- /*
- * Insert the selected entity
- *
- * @param string entity: the entity to insert at the current selection
- *
- * @return void
- */
- insertEntity: function (entity) {
- this.editor.focus();
if (Ext.isIE) {
this.editor.insertHTML(entity);
+ this.saveSelection();
} else {
// Firefox and WebKit convert ' ' to '&nbsp;'
- var node = this.editor.document.createTextNode(((Ext.isGecko || Ext.isWebKit) && entity == ' ') ? '\xA0' : entity);
- this.editor.insertNodeAtSelection(node);
- if (!Ext.isIE) {
- this.editor.selectNode(node, false);
- }
+ this.editor.insertNodeAtSelection(this.editor.document.createTextNode(((Ext.isGecko || Ext.isWebKit) && entity == ' ') ? '\xA0' : entity));
}
+ return false;
},
/*
* Reset focus on the the current selection, if at all possible
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xlf b/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xlf
index 13bcbce16288238f0caf37c1ede077486c645966..aca7694bbf247f46c026aa42b5ef1bcfdcb12db5 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xlf
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xlf
@@ -9,9 +9,6 @@
<trans-unit id="InsertCharacter-Tooltip" xml:space="preserve">
<source>Insert special character</source>
</trans-unit>
- <trans-unit id="InsertSoftHyphen-Tooltip" xml:space="preserve">
- <source>Insert soft hyphen</source>
- </trans-unit>
<trans-unit id="Insert special character" xml:space="preserve">
<source>Insert special character</source>
</trans-unit>
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/ContextMenu/context-menu.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/ContextMenu/context-menu.js
index 1cad4ad50f51f2ceb5a462fc29d9dd5006ba1c5a..6dfab8f5128a9de67585132752f538f292574c87 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/ContextMenu/context-menu.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/ContextMenu/context-menu.js
@@ -30,8 +30,7 @@
/*
* Context Menu Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.ContextMenu', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.ContextMenu = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -50,7 +49,7 @@ Ext.define('HTMLArea.ContextMenu', {
* Registering plugin "About" information
*/
var pluginInformation = {
- version : '4.0',
+ version : '3.2',
developer : 'Mihai Bazon & Stanislas Rolland',
developerUrl : 'http://www.sjbr.ca/',
copyrightOwner : 'dynarch.com & Stanislas Rolland',
@@ -65,51 +64,30 @@ Ext.define('HTMLArea.ContextMenu', {
* This function gets called when the editor gets generated
*/
onGenerate: function() {
- // Monitor contextmenu clicks on the iframe
- this.editor.iframe.mon(Ext.get(this.editor.document.documentElement), 'contextmenu', this.show, this, {stopEvent: true, single: true});
- },
- /*
- * Handler to show the context menu
- */
- show: function (event, target) {
- // Build the context menu on first use
- if (!this.menu) {
- this.menu = Ext.create(Ext.menu.Menu, Ext.apply({
- bodyCls: 'htmlarea-context-menu',
- defaultType: 'menuitem',
- floating: true,
- items: this.buildItemsConfig(),
- listeners: {
- afterrender: {
- fn: this.afterRenderMenu,
- scope: this,
- single: true
- },
- click: {
- fn: this.onItemClick,
- scope: this
- },
- hide: {
- fn: this.onMenuHide,
- scope: this
- },
- show: {
- fn: this.onMenuShow,
- scope: this
- }
+ // Build the context menu
+ this.menu = new Ext.menu.Menu(Ext.applyIf({
+ cls: 'htmlarea-context-menu',
+ defaultType: 'menuitem',
+ listeners: {
+ itemClick: {
+ fn: this.onItemClick,
+ scope: this
},
- maxHeight: 500
- }, this.pageTSConfiguration));
- }
- // Need to wait a while for the toolbar state to be updated
- Ext.Function.defer(this.showMenu, 150, this, [target]);
- },
- /*
- * Handler afterrender
- */
- afterRenderMenu: function (menu) {
+ show: {
+ fn: this.onShow,
+ scope: this
+ },
+ hide: {
+ fn: this.onHide,
+ scope: this
+ }
+ },
+ items: this.buildItemsConfig()
+ }, this.pageTSConfiguration));
+ // Monitor contextmenu clicks on the iframe
+ this.menu.mon(Ext.get(this.editor.document.documentElement), 'contextmenu', this.show, this);
// Monitor editor being destroyed
- menu.mon(this.editor.iframe, 'beforedestroy', this.onBeforeDestroy, this, {single: true});
+ this.menu.mon(this.editor, 'beforedestroy', this.onBeforeDestroy, this, {single: true});
},
/*
* Create the menu items config
@@ -123,10 +101,10 @@ Ext.define('HTMLArea.ContextMenu', {
firstInGroup = true;
Ext.each(row, function (group) {
if (!firstInGroup) {
- // If a visible item was added to the line
+ // If a visible item was added to the line
itemsConfig.push({
xtype: 'menuseparator',
- cls: 'htmlarea-context-menu-separator'
+ cls: 'separator'
});
}
firstInGroup = true;
@@ -140,23 +118,12 @@ Ext.define('HTMLArea.ContextMenu', {
var itemId = button.getItemId();
itemsConfig.push({
itemId: itemId,
- cls: 'htmlarea-context-menu-item',
- overCls: 'htmlarea-context-menu-hover',
- text: (button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.text),
+ cls: 'button',
+ overCls: 'hover',
+ text: (button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.title),
iconCls: button.iconCls,
helpText: (button.helpText ? button.helpText : this.localize(itemId + '-tooltip')),
- listeners: {
- afterrender: {
- fn: function (menuitem) {
- if (menuitem.helpText) {
- Ext.tip.QuickTipManager.register({
- target: menuitem,
- text: menuitem.helpText
- });
- }
- }
- }
- }
+ hidden: true
});
firstInGroup = false;
}
@@ -171,7 +138,7 @@ Ext.define('HTMLArea.ContextMenu', {
if (!firstInGroup) {
itemsConfig.push({
xtype: 'menuseparator',
- cls: 'htmlarea-context-menu-separator'
+ cls: 'separator'
});
}
// Add special target delete item
@@ -186,10 +153,24 @@ Ext.define('HTMLArea.ContextMenu', {
return itemsConfig;
},
/*
- * Handler when the mouse goes down in the editor iframe
+ * Handler when the menu gets shown
+ */
+ onShow: function () {
+ this.menu.mon(Ext.get(this.editor.document.documentElement), 'mousedown', this.menu.hide, this.menu, {single: true});
+ },
+ /*
+ * Handler when the menu gets hidden
*/
- hideMenu: function () {
- this.menu.hide();
+ onHide: function () {
+ this.menu.mun(Ext.get(this.editor.document.documentElement), 'mousedown', this.menu.hide, this.menu);
+ },
+ /*
+ * Handler to show the context menu
+ */
+ show: function (event, target) {
+ event.stopEvent();
+ // Need to wait a while for the toolbar state to be updated
+ this.showMenu.defer(150, this, [target]);
},
/*
* Show the context menu
@@ -199,54 +180,48 @@ Ext.define('HTMLArea.ContextMenu', {
if (!Ext.isIE) {
this.ranges = this.editor.getSelectionRanges();
}
- // There is nothing to understand here...
- this.menu.showBy(this.editor.iframe, 'tl-tr?');
- this.menu.showBy(this.editor.iframe, 'tl-tr?');
+ var iframeEl = this.editor.iframe.getEl();
+ // Show the context menu
+ this.menu.showAt([Ext.fly(target).getX() + iframeEl.getX(), Ext.fly(target).getY() + iframeEl.getY()]);
},
/*
* Show items depending on context
*/
showContextItems: function (target) {
- var lastIsSeparator = false,
- lastIsButton = false,
- xtype,
- lastVisible;
- this.menu.items.each(function (menuItem) {
+ var lastIsSeparator = false, lastIsButton = false, xtype, lastVisible;
+ this.menu.cascade(function (menuItem) {
xtype = menuItem.getXType();
- switch (xtype) {
- case 'menuseparator':
- menuItem.setVisible(lastIsButton);
- lastIsButton = false;
- break;
- case 'menuitem':
- var button = this.getButton(menuItem.getItemId());
- if (button) {
- var text = button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.text;
- if (menuItem.text != text) {
- menuItem.setText(text);
- }
- menuItem.helpText = button.helpText ? button.helpText : menuItem.helpText;
- menuItem.setVisible(!button.disabled);
- lastIsButton = lastIsButton || !button.disabled;
+ if (xtype === 'menuseparator') {
+ menuItem.setVisible(lastIsButton);
+ lastIsButton = false;
+ } else if (xtype === 'menuitem') {
+ var button = this.getButton(menuItem.getItemId());
+ if (button) {
+ var text = button.contextMenuTitle ? button.contextMenuTitle : button.tooltip.title;
+ if (menuItem.text != text) {
+ menuItem.setText(text);
+ }
+ menuItem.helpText = button.helpText ? button.helpText : menuItem.helpText;
+ menuItem.setVisible(!button.disabled);
+ lastIsButton = lastIsButton || !button.disabled;
+ } else {
+ // Special target delete item
+ this.deleteTarget = target;
+ if (/^(html|body)$/i.test(target.nodeName)) {
+ this.deleteTarget = null;
+ } else if (/^(table|thead|tbody|tr|td|th|tfoot)$/i.test(target.nodeName)) {
+ this.deleteTarget = Ext.fly(target).findParent('table');
+ } else if (/^(ul|ol|dl|li|dd|dt)$/i.test(target.nodeName)) {
+ this.deleteTarget = Ext.fly(target).findParent('ul') || Ext.fly(target).findParent('ol') || Ext.fly(target).findParent('dl');
+ }
+ if (this.deleteTarget) {
+ menuItem.setVisible(true);
+ menuItem.setText(this.localize('Remove the') + ' <' + this.deleteTarget.nodeName.toLowerCase() + '> ');
+ lastIsButton = true;
} else {
- // Special target delete item
- this.deleteTarget = target;
- if (/^(html|body)$/i.test(target.nodeName)) {
- this.deleteTarget = null;
- } else if (/^(table|thead|tbody|tr|td|th|tfoot)$/i.test(target.nodeName)) {
- this.deleteTarget = Ext.fly(target).findParent('table');
- } else if (/^(ul|ol|dl|li|dd|dt)$/i.test(target.nodeName)) {
- this.deleteTarget = Ext.fly(target).findParent('ul') || Ext.fly(target).findParent('ol') || Ext.fly(target).findParent('dl');
- }
- if (this.deleteTarget) {
- menuItem.setVisible(true);
- menuItem.setText(this.localize('Remove the') + ' <' + this.deleteTarget.nodeName.toLowerCase() + '> ');
- lastIsButton = true;
- } else {
- menuItem.setVisible(false);
- }
+ menuItem.setVisible(false);
}
- break;
+ }
}
if (!menuItem.hidden) {
lastVisible = menuItem;
@@ -258,53 +233,35 @@ Ext.define('HTMLArea.ContextMenu', {
}
},
/*
- * Handler invoked when a menu is clicked on
+ * Handler invoked when a menu item is clicked on
*/
- onItemClick: function (menu, item, event) {
- if (item) {
- if (!Ext.isIE) {
- this.editor.setSelectionRanges(this.ranges);
- }
- var button = this.getButton(item.getItemId());
- if (button) {
- button.fireEvent('HTMLAreaEventContextMenu', button, event, null);
- } else if (item.getItemId() === 'DeleteTarget') {
+ onItemClick: function (item, event) {
+ if (!Ext.isIE) {
+ this.editor.setSelectionRanges(this.ranges);
+ }
+ var button = this.getButton(item.getItemId());
+ if (button) {
+ button.fireEvent('HTMLAreaEventContextMenu', button, event);
+ } else if (item.getItemId() === 'DeleteTarget') {
+ // Do not leave a non-ie table cell empty
+ var parent = this.deleteTarget.parentNode;
+ parent.normalize();
+ if (!Ext.isIE && /^(td|th)$/i.test(parent.nodeName) && parent.childNodes.length == 1) {
// Do not leave a non-ie table cell empty
- var parent = this.deleteTarget.parentNode;
- parent.normalize();
- if (!Ext.isIE && /^(td|th)$/i.test(parent.nodeName) && parent.childNodes.length == 1) {
- // Do not leave a non-ie table cell empty
- parent.appendChild(this.editor.document.createElement('br'));
- }
- // Try to find a reasonable replacement selection
- var nextSibling = this.deleteTarget.nextSibling;
- var previousSibling = this.deleteTarget.previousSibling;
- if (nextSibling) {
- this.editor.selectNode(nextSibling, true);
- } else if (previousSibling) {
- this.editor.selectNode(previousSibling, false);
- }
- HTMLArea.removeFromParent(this.deleteTarget);
- this.editor.updateToolbar();
+ parent.appendChild(this.editor.document.createElement('br'));
+ }
+ // Try to find a reasonable replacement selection
+ var nextSibling = this.deleteTarget.nextSibling;
+ var previousSibling = this.deleteTarget.previousSibling;
+ if (nextSibling) {
+ this.editor.selectNode(nextSibling, true);
+ } else if (previousSibling) {
+ this.editor.selectNode(previousSibling, false);
}
+ HTMLArea.removeFromParent(this.deleteTarget);
+ this.editor.updateToolbar();
}
},
- /*
- * Handler when the menu gets hidden
- */
- onMenuHide: function (menu) {
- // Stop listening to mousedown
- menu.mun(Ext.get(this.editor.document.documentElement), 'mousedown', this.hideMenu, this);
- // Resume listening to contextmenu
- menu.mon(Ext.get(this.editor.document.documentElement), 'contextmenu', this.show, this, {stopEvent: true, single: true});
- },
- /*
- * Handler when the menu gets shown
- */
- onMenuShow: function (menu) {
- // Hide the menu when the mouse goes down in the editor iframe
- menu.mon(Ext.get(this.editor.document.documentElement), 'mousedown', this.hideMenu, this, { single: true });
- },
/*
* Handler invoked when the editor is about to be destroyed
*/
@@ -312,7 +269,7 @@ Ext.define('HTMLArea.ContextMenu', {
this.menu.items.each(function (menuItem) {
Ext.QuickTips.unregister(menuItem);
});
- this.menu.removeAll(true);
- this.menu.destroy();
+ this.menu.removeAll(true);
+ this.menu.destroy();
}
});
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/CopyPaste/copy-paste.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/CopyPaste/copy-paste.js
index e3078e33d7a6ff14fcb58346dacb67a65868e507..58690c9d3bcd2f06c682b97ae3655c7022e8f52e 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/CopyPaste/copy-paste.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/CopyPaste/copy-paste.js
@@ -27,8 +27,7 @@
/*
* Copy Paste for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.CopyPaste', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.CopyPaste = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -145,7 +144,7 @@ Ext.define('HTMLArea.CopyPaste', {
if (Ext.isOpera || Ext.isGecko2) {
var cleaner = this.getButton('CleanWord');
if (cleaner) {
- Ext.Function.defer(cleaner.fireEvent, 250, cleaner, ['click', cleaner]);
+ cleaner.fireEvent.defer(250, cleaner, ['click', cleaner]);
}
}
break;
@@ -163,7 +162,7 @@ Ext.define('HTMLArea.CopyPaste', {
this.editor.inhibitKeyboardInput = true;
var bookmark = this.editor.getBookmark(this.editor._createRange(this.editor._getSelection()));
var html = this.editor.getInnerHTML();
- Ext.Function.defer(this.revertPaste, 200, this, [html, bookmark]);
+ this.revertPaste.defer(200, this, [html, bookmark]);
}
return false;
}
@@ -203,7 +202,7 @@ Ext.define('HTMLArea.CopyPaste', {
* This function removes any link left over by the cut operation
*/
cutHandler: function (event) {
- Ext.Function.defer(this.removeEmptyLink, 50, this);
+ this.removeEmptyLink.defer(50, this);
},
/*
* This function unlinks any empty link left over by the cut operation
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultClean/default-clean.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultClean/default-clean.js
index 467a3ef907388e27ed8b4009d678c1a9b6d1649e..b2d22b583cd96a7264137938c564da4af4d261e3 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultClean/default-clean.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultClean/default-clean.js
@@ -26,8 +26,7 @@
/**
* Default Clean Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.DefaultClean', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultClean = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -167,6 +166,6 @@ Ext.define('HTMLArea.DefaultClean', {
* Handler for paste, dragdrop and drop events
*/
wordCleanHandler: function (event) {
- Ext.Function.defer(this.clean, 250, this);
+ this.clean.defer(250, this);
}
});
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/default-image.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/default-image.js
index 584830e60d6182ed6d83c17893d78330de363d51..b281c9180317a12c16e03cbc641c3a15ca53ee09 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/default-image.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/default-image.js
@@ -29,8 +29,7 @@
/*
* Image Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.DefaultImage', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultImage = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -64,7 +63,7 @@ Ext.define('HTMLArea.DefaultImage', {
* Registering plugin "About" information
*/
var pluginInformation = {
- version : '3.0',
+ version : '2.2',
developer : 'Stanislas Rolland',
developerUrl : 'http://www.sjbr.ca/',
copyrightOwner : 'Stanislas Rolland',
@@ -92,24 +91,17 @@ Ext.define('HTMLArea.DefaultImage', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
- displayField: 'text',
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
+ combo: {
editable: true,
- forceSelection: true,
- helpIcon: true,
- queryMode: 'local',
selectOnFocus: true,
- triggerAction: 'all',
typeAhead: true,
+ triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local',
valueField: 'value',
- xtype: 'combobox'
+ displayField: 'text',
+ helpIcon: true,
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
}
},
/*
@@ -159,11 +151,11 @@ Ext.define('HTMLArea.DefaultImage', {
// Open dialogue window
this.openDialogue(
buttonId,
- this.getButton(buttonId).tooltip.text,
+ this.getButton(buttonId).tooltip.title,
this.getWindowDimensions(
{
width: 460,
- height: 300
+ height:300
},
buttonId
),
@@ -182,13 +174,14 @@ Ext.define('HTMLArea.DefaultImage', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions, tabItems) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title) || title,
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -202,11 +195,17 @@ Ext.define('HTMLArea.DefaultImage', {
activeTab: 0,
defaults: {
xtype: 'container',
- layout: 'anchor',
+ layout: 'form',
defaults: {
labelWidth: 100
}
},
+ listeners: {
+ tabchange: {
+ fn: this.syncHeight,
+ scope: this
+ }
+ },
items: tabItems
},
buttons: [
@@ -235,10 +234,10 @@ Ext.define('HTMLArea.DefaultImage', {
labelSeparator: ''
},
items: [{
- fieldLabel: this.localize('Image URL:'),
- helpTitle: this.localize('Enter the image URL here'),
itemId: 'url',
- value: this.parameters.url
+ fieldLabel: this.localize('Image URL:'),
+ value: this.parameters.url,
+ helpTitle: this.localize('Enter the image URL here')
},{
itemId: 'alt',
fieldLabel: this.localize('Alternate text:'),
@@ -281,52 +280,6 @@ Ext.define('HTMLArea.DefaultImage', {
});
// Layout tab
if (!this.removeItems.test('layout')) {
- // Create image align options global store
- var imageAlignStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + 'imageAlign');
- if (!imageAlignStore) {
- imageAlignStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: 'HTMLArea' + '-store-' + this.name + 'imageAlign'
- });
- imageAlignStore.loadData([
- {
- text: this.localize('Not set'),
- value: ''
- },{
- text: this.localize('Bottom'),
- value: 'bottom'
- },{
- text: this.localize('Middle'),
- value: 'middle'
- },{
- text: this.localize('Top'),
- value: 'top'
- }
- ]);
- }
- // Create cssFloat options global store
- var cssFloatStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + 'cssFloat');
- if (!cssFloatStore) {
- cssFloatStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: 'HTMLArea' + '-store-' + this.name + 'cssFloat'
- });
- cssFloatStore.loadData([
- {
- text: this.localize('Not set'),
- value: ''
- },{
- text: this.localize('Non-floating'),
- value: 'none'
- },{
- text: this.localize('Left'),
- value: 'left'
- },{
- text: this.localize('Right'),
- value: 'right'
- }
- ]);
- }
tabItems.push({
title: this.localize('Layout'),
items: [{
@@ -334,43 +287,57 @@ Ext.define('HTMLArea.DefaultImage', {
defaultType: 'textfield',
defaults: {
helpIcon: true,
- width: 300,
+ width: 250,
labelSeparator: ''
},
items: [
- Ext.applyIf(
- {
- fieldLabel: this.localize('Image alignment:'),
- helpTitle: this.localize('Positioning of this image'),
- hidden: this.removeItems.test('align'),
- hideLabel: this.removeItems.test('align'),
- itemId: 'align',
- store: imageAlignStore,
- value: this.parameters.align
- },
- this.configDefaults['combobox']
- ),
- {
+ Ext.apply({
+ xtype: 'combo',
+ fieldLabel: this.localize('Image alignment:'),
+ itemId: 'align',
+ value: this.parameters.align,
+ helpTitle: this.localize('Positioning of this image'),
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), ''],
+ [this.localize('Bottom'), 'bottom'],
+ [this.localize('Middle'), 'middle'],
+ [this.localize('Top'), 'top']
+ ]
+ }),
+ hidden: this.removeItems.test('align'),
+ hideLabel: this.removeItems.test('align')
+ }, this.configDefaults['combo'])
+ ,{
+ itemId: 'border',
fieldLabel: this.localize('Border thickness:'),
+ width: 100,
+ value: this.parameters.border,
helpTitle: this.localize('Leave empty for no border'),
hidden: this.removeItems.test('border'),
- hideLabel: this.removeItems.test('border'),
- itemId: 'border',
- value: this.parameters.border,
- width: 200
+ hideLabel: this.removeItems.test('border')
},
- Ext.applyIf(
- {
- fieldLabel: this.localize('Float:'),
- helpTitle: this.localize('Where the image should float'),
- hidden: this.removeItems.test('float'),
- hideLabel: this.removeItems.test('float'),
- itemId: 'cssFloat',
- store: cssFloatStore,
- value: this.parameters.cssFloat
- },
- this.configDefaults['combobox']
- )
+ Ext.apply({
+ xtype: 'combo',
+ fieldLabel: this.localize('Float:'),
+ itemId: 'cssFloat',
+ value: this.parameters.cssFloat,
+ helpTitle: this.localize('Where the image should float'),
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), ''],
+ [this.localize('Non-floating'), 'none'],
+ [this.localize('Left'), 'left'],
+ [this.localize('Right'), 'right']
+ ]
+ }),
+ hidden: this.removeItems.test('float'),
+ hideLabel: this.removeItems.test('float')
+ }, this.configDefaults['combo'])
]
}]
});
@@ -384,7 +351,7 @@ Ext.define('HTMLArea.DefaultImage', {
defaultType: 'textfield',
defaults: {
helpIcon: true,
- width: 200,
+ width: 100,
labelSeparator: ''
},
items: [{
@@ -426,8 +393,8 @@ Ext.define('HTMLArea.DefaultImage', {
* Handler invoked when the Preview button is clicked
*/
onPreviewClick: function () {
- var tabPanel = this.dialog.down('component[itemId=tabpanel]');
- var urlField = this.dialog.down('component[itemId=url]');
+ var tabPanel = this.dialog.find('itemId', 'tabpanel')[0];
+ var urlField = this.dialog.find('itemId', 'url')[0];
var url = urlField.getValue().trim();
if (url) {
try {
@@ -452,12 +419,12 @@ Ext.define('HTMLArea.DefaultImage', {
* Handler invoked when the OK button is clicked
*/
onOK: function () {
- var urlField = this.dialog.down('component[itemId=url]');
+ var urlField = this.dialog.find('itemId', 'url')[0];
var url = urlField.getValue().trim();
if (url) {
var fieldNames = ['url', 'alt', 'align', 'border', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'cssFloat'];
Ext.each(fieldNames, function (fieldName) {
- var field = this.dialog.down('component[itemId=' + fieldName + ']');
+ var field = this.dialog.find('itemId', fieldName)[0];
if (field && !field.hidden) {
this.parameters[fieldName] = field.getValue();
}
@@ -465,7 +432,7 @@ Ext.define('HTMLArea.DefaultImage', {
this.insertImage();
this.close();
} else {
- var tabPanel = this.dialog.down('component[itemId=tabpanel]');
+ var tabPanel = this.dialog.find('itemId', 'tabpanel')[0];
TYPO3.Dialog.InformationDialog({
title: this.localize('image_url'),
msg: this.localize('image_url_required'),
@@ -555,9 +522,9 @@ Ext.define('HTMLArea.DefaultImage', {
image = null;
}
if (image) {
- button.setTooltip({ text: this.localize('Modify image') });
+ button.setTooltip({ title: this.localize('Modify image') });
} else {
- button.setTooltip({ text: this.localize('Insert image') });
+ button.setTooltip({ title: this.localize('Insert image') });
}
}
}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/locallang.xlf b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/locallang.xlf
index 3cfa3517c2928c3e4446cdc41fab392af05063f0..98416361ce312155f3214734bcf3fdcfd0669aa3 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/locallang.xlf
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/locallang.xlf
@@ -21,9 +21,6 @@
<trans-unit id="Right:" xml:space="preserve">
<source>Right:</source>
</trans-unit>
- <trans-unit id="Left:" xml:space="preserve">
- <source>Left:</source>
- </trans-unit>
<trans-unit id="Bottom:" xml:space="preserve">
<source>Bottom:</source>
</trans-unit>
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultInline/default-inline.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultInline/default-inline.js
index ac121104d21293cf0323aa620be0b04d5927efd5..33f088dea9789a1c108b620400fe333cfaabe8cf 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultInline/default-inline.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultInline/default-inline.js
@@ -27,8 +27,7 @@
/*
* Default Inline Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.DefaultInline', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultInline = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultLink/default-link.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultLink/default-link.js
index b7f80a61a3a7d2be3cb55c44604bfffeecf85b2c..91e0b909869e5d58f7cbf8654d6a4d78e59ffb7d 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultLink/default-link.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultLink/default-link.js
@@ -29,8 +29,7 @@
/*
* Default Link Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.DefaultLink', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.DefaultLink = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -84,24 +83,17 @@ Ext.define('HTMLArea.DefaultLink', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
- displayField: 'text',
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
+ combo: {
editable: true,
- forceSelection: true,
- helpIcon: true,
- queryMode: 'local',
selectOnFocus: true,
- triggerAction: 'all',
typeAhead: true,
+ triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local',
valueField: 'value',
- xtype: 'combobox'
+ displayField: 'text',
+ helpIcon: true,
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
}
},
/*
@@ -143,7 +135,7 @@ Ext.define('HTMLArea.DefaultLink', {
var selection = this.editor._getSelection();
if (this.editor._selectionEmpty(selection)) {
TYPO3.Dialog.InformationDialog({
- title: this.getButton(buttonId).tooltip.text,
+ title: this.getButton(buttonId).tooltip.title,
msg: this.localize('Select some text')
});
break;
@@ -163,7 +155,7 @@ Ext.define('HTMLArea.DefaultLink', {
// Open dialogue window
this.openDialogue(
buttonId,
- this.getButton(buttonId).tooltip.text,
+ this.getButton(buttonId).tooltip.title,
this.getWindowDimensions(
{
width: 470,
@@ -186,39 +178,14 @@ Ext.define('HTMLArea.DefaultLink', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions) {
- // Create target options global store
- var targetStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + '-target');
- if (!targetStore) {
- targetStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: 'HTMLArea' + '-store-' + this.name + '-target'
- });
- targetStore.loadData([
- {
- text: this.localize('target_none'),
- value: ''
- },{
- text: this.localize('target_blank'),
- value: '_blank'
- },{
- text: this.localize('target_self'),
- value: '_self'
- },{
- text: this.localize('target_top'),
- value: '_top'
- },{
- text: this.localize('target_other'),
- value: '_other'
- }
- ]);
- }
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title) || title,
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
afterrender: {
@@ -251,24 +218,35 @@ Ext.define('HTMLArea.DefaultLink', {
fieldLabel: this.localize('Title (tooltip):'),
value: this.parameters.title,
helpTitle: this.localize('link_title_tooltip')
- }, Ext.applyIf({
- fieldLabel: this.localize('Target:'),
- helpTitle: this.localize('link_target_tooltip'),
- hidden: !this.showTarget,
- itemId: 'target',
- listeners: {
- select: {
- fn: this.onTargetSelect
- }
- },
- store: targetStore
+ }, Ext.apply({
+ xtype: 'combo',
+ fieldLabel: this.localize('Target:'),
+ itemId: 'target',
+ helpTitle: this.localize('link_target_tooltip'),
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('target_none'), ''],
+ [this.localize('target_blank'), '_blank'],
+ [this.localize('target_self'), '_self'],
+ [this.localize('target_top'), '_top'],
+ [this.localize('target_other'), '_other']
+ ]
+ }),
+ listeners: {
+ select: {
+ fn: this.onTargetSelect
+ }
},
- this.configDefaults['combobox']
- ),{
- itemId: 'framename',
- name: 'framename',
+ hidden: !this.showTarget
+ }, this.configDefaults['combo'])
+ ,{
+ itemId: 'frame',
+ name: 'frame',
fieldLabel: this.localize('frame'),
helpTitle: this.localize('frame_help'),
+ hideLabel: true,
hidden: true
}
]
@@ -286,21 +264,16 @@ Ext.define('HTMLArea.DefaultLink', {
* If the current target is not in the available options, show frame field
*/
onAfterRender: function (dialog) {
- var targetCombo = dialog.down('component[itemId=target]');
- // Somehow getStore method got lost...
- if (!Ext.isFunction(targetCombo.getStore)) {
- targetCombo.getStore = function () {
- return targetCombo.store;
- };
- }
- if (!targetCombo.isHidden() && this.parameters.target) {
- var frameField = dialog.down('component[itemId=framename]');
+ var targetCombo = dialog.find('itemId', 'target')[0];
+ if (!targetCombo.hidden && this.parameters.target) {
+ var frameField = dialog.find('itemId', 'frame')[0];
var index = targetCombo.getStore().find('value', this.parameters.target);
if (index == -1) {
// The target is a specific frame name
targetCombo.setValue('_other');
frameField.setValue(this.parameters.target);
frameField.show();
+ frameField.label.show();
} else {
targetCombo.setValue(this.parameters.target);
}
@@ -309,26 +282,28 @@ Ext.define('HTMLArea.DefaultLink', {
/*
* Handler invoked when a target is selected
*/
- onTargetSelect: function (combo, records) {
- var frameField = combo.ownerCt.getComponent('framename');
- if (records[0].get('value') == '_other') {
+ onTargetSelect: function (combo, record) {
+ var frameField = combo.ownerCt.getComponent('frame');
+ if (record.get('value') == '_other') {
frameField.show();
+ frameField.label.show();
frameField.focus();
- } else if (!frameField.isHidden()) {
+ } else if (!frameField.hidden) {
frameField.hide();
+ frameField.label.hide();
}
},
/*
* Handler invoked when the OK button is clicked
*/
onOK: function () {
- var hrefField = this.dialog.down('component[itemId=href]');
+ var hrefField = this.dialog.find('itemId', 'href')[0];
var href = hrefField.getValue().trim();
if (href && href != 'http://') {
- var title = this.dialog.down('component[itemId=title]').getValue();
- var target = this.dialog.down('component[itemId=target]').getValue();
+ var title = this.dialog.find('itemId', 'title')[0].getValue();
+ var target = this.dialog.find('itemId', 'target')[0].getValue();
if (target == '_other') {
- target = this.dialog.down('component[itemId=framename]').getValue().trim();
+ target = this.dialog.find('itemId', 'frame')[0].getValue().trim();
}
this.createLink(href, title, target);
this.close();
@@ -427,9 +402,9 @@ Ext.define('HTMLArea.DefaultLink', {
node = el;
}
if (node != null && /^a$/i.test(node.nodeName)) {
- button.setTooltip({ text: this.localize('Modify link') });
+ button.setTooltip({ title: this.localize('Modify link') });
} else {
- button.setTooltip({ text: this.localize('Insert link') });
+ button.setTooltip({ title: this.localize('Insert link') });
}
}
break;
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefinitionList/definition-list.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefinitionList/definition-list.js
index 3d77b3a36ad3dc3f7551ff32fb069ba252ce0d69..4986dcac35e30eefa56d60283d0d5bac5b0047f6 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefinitionList/definition-list.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefinitionList/definition-list.js
@@ -27,8 +27,7 @@
/*
* DefinitionList Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.DefinitionList', {
- extend: 'HTMLArea.BlockElements',
+HTMLArea.DefinitionList = Ext.extend(HTMLArea.BlockElements, {
/*
* This function gets called by the class constructor
*/
@@ -124,14 +123,14 @@ Ext.define('HTMLArea.DefinitionList', {
if (/^(dd|dt)$/i.test(parentElement.nodeName) && this.indentDefinitionList(parentElement, range)) {
break;
} else {
- this.callParent(arguments);
+ HTMLArea.DefinitionList.superclass.onButtonPress.call(this, editor, id, target, className);
}
break;
case "Outdent" :
if (/^(dt)$/i.test(parentElement.nodeName) && this.outdentDefinitionList(selection, range)) {
break;
} else {
- this.callParent(arguments);
+ HTMLArea.DefinitionList.superclass.onButtonPress.call(this, editor, id, target, className);
}
break;
case "DefinitionList":
@@ -145,7 +144,7 @@ Ext.define('HTMLArea.DefinitionList', {
this.editor.selectRange(this.editor.moveToBookmark(bookmark));
break;
default:
- this.callParent(arguments);
+ HTMLArea.DefinitionList.superclass.onButtonPress.call(this, editor, id, target, className);
}
return false;
},
@@ -321,7 +320,7 @@ Ext.define('HTMLArea.DefinitionList', {
&& !endBlocks.end.nextSibling) {
button.setDisabled(false);
} else {
- this.callParent(arguments);
+ HTMLArea.DefinitionList.superclass.onUpdateToolbar.call(this, button, mode, selectionEmpty, ancestors);
}
break;
case 'DefinitionList':
@@ -332,7 +331,7 @@ Ext.define('HTMLArea.DefinitionList', {
} else {
switch (button.itemId) {
case 'Outdent':
- this.callParent(arguments);
+ HTMLArea.DefinitionList.superclass.onUpdateToolbar.call(this, button, mode, selectionEmpty, ancestors);
break;
}
}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditElement/edit-element.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditElement/edit-element.js
index 966ecf9b09d0dc40c3fbd415cc5342d3f183eda1..5b131cab3b284360095ff3f78b550b4089418c45 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditElement/edit-element.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditElement/edit-element.js
@@ -27,8 +27,7 @@
/*
* EditElement plugin for htmlArea RTE
*/
-Ext.define('HTMLArea.EditElement', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.EditElement = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -41,7 +40,7 @@ Ext.define('HTMLArea.EditElement', {
* Registering plugin "About" information
*/
var pluginInformation = {
- version : '2.0',
+ version : '1.1',
developer : 'Stanislas Rolland',
developerUrl : 'http://www.sjbr.ca/',
copyrightOwner : 'Stanislas Rolland',
@@ -68,24 +67,17 @@ Ext.define('HTMLArea.EditElement', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
- displayField: 'text',
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
+ combo: {
editable: true,
- forceSelection: true,
- helpIcon: true,
- queryMode: 'local',
selectOnFocus: true,
- triggerAction: 'all',
typeAhead: true,
+ triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local',
valueField: 'value',
- xtype: 'combobox'
+ displayField: 'text',
+ helpIcon: true,
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
}
},
/*
@@ -131,13 +123,14 @@ Ext.define('HTMLArea.EditElement', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions, tabItems, buttonsConfig) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.getHelpTip('', title),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -150,11 +143,17 @@ Ext.define('HTMLArea.EditElement', {
activeTab: 0,
defaults: {
xtype: 'container',
- layout: 'anchor',
+ layout: 'form',
defaults: {
labelWidth: 150
}
},
+ listeners: {
+ tabchange: {
+ fn: this.syncHeight,
+ scope: this
+ }
+ },
items: tabItems
},
buttons: buttonsConfig
@@ -172,13 +171,10 @@ Ext.define('HTMLArea.EditElement', {
var tabItems = [];
var generalTabItemConfig = [];
if (this.removedFieldsets.indexOf('identification') == -1) {
- this.addConfigElement(this.buildIdentificationFieldsetConfig(element), generalTabItemConfig);
+ this.addConfigElement(this.buildIdentificationFieldsetConfig(element), generalTabItemConfig);
}
if (this.removedFieldsets.indexOf('style') == -1 && this.removedProperties.indexOf('className') == -1) {
- this.stylePlugin = this.getPluginInstance(HTMLArea.isBlockElement(element) ? 'BlockStyle' : 'TextStyle');
- if (this.stylePlugin) {
- this.addConfigElement(this.buildClassFieldsetConfig(element), generalTabItemConfig);
- }
+ this.addConfigElement(this.buildClassFieldsetConfig(element), generalTabItemConfig);
}
tabItems.push({
title: this.localize('general'),
@@ -250,48 +246,9 @@ Ext.define('HTMLArea.EditElement', {
*/
buildClassFieldsetConfig: function (element) {
var itemsConfig = [];
- // Create global style store if it does not exist already
- var styleStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.stylePlugin.name);
- if (!styleStore) {
- styleStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.' + this.stylePlugin.name,
- storeId: this.editorId + '-store-' + this.stylePlugin.name,
- data: []
- });
- }
- function initStyleCombo (combo) {
- var nodeName = element.nodeName.toLowerCase();
- var classNames = HTMLArea.DOM.getClassNames(element);
- // Somehow getStore method got lost...
- if (!Ext.isFunction(combo.getStore)) {
- combo.getStore = function () {
- return combo.store;
- };
- }
- this.stylePlugin.buildDropDownOptions(combo, nodeName);
- this.stylePlugin.setSelectedOption(combo, classNames, 'noUnknown');
- }
- itemsConfig.push(Ext.applyIf(
- {
- fieldLabel: this.getHelpTip('className', 'className'),
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
- itemId: 'className',
- store: styleStore,
- width: ((this.properties['className'] && this.properties['className'].width) ? this.properties['className'].width : 300),
- listeners: {
- afterrender: {
- fn: initStyleCombo,
- scope: this
- }
- }
- },
- this.configDefaults['combobox']
- ));
+ var stylingCombo = this.buildStylingField('className', 'className', 'className');
+ this.setStyleOptions(stylingCombo, element);
+ itemsConfig.push(stylingCombo);
return {
xtype: 'fieldset',
title: this.localize('className'),
@@ -302,6 +259,48 @@ Ext.define('HTMLArea.EditElement', {
items: itemsConfig
};
},
+ /*
+ * This function builds a style selection field
+ *
+ * @param string fieldName: the name of the field
+ * @param string fieldLabel: the label for the field
+ * @param string cshKey: the csh key
+ *
+ * @return object the style selection field object
+ */
+ buildStylingField: function (fieldName, fieldLabel, cshKey) {
+ return new Ext.form.ComboBox(Ext.apply({
+ xtype: 'combo',
+ itemId: fieldName,
+ fieldLabel: this.getHelpTip(fieldLabel, cshKey),
+ width: ((this.properties['className'] && this.properties['className'].width) ? this.properties['className'].width : 300),
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
+ data: [[this.localize('No style'), 'none']]
+ })
+ }, {
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
+ }, this.configDefaults['combo']
+ ));
+ },
+ /*
+ * This function populates the class store and sets the selected option
+ *
+ * @param object: comboBox: the combobox object
+ * @param object element: the element being edited, if any
+ *
+ * @return object the fieldset configuration object
+ */
+ setStyleOptions: function (comboBox, element) {
+ var nodeName = element.nodeName.toLowerCase();
+ this.stylePlugin = this.getPluginInstance(HTMLArea.isBlockElement(element) ? 'BlockStyle' : 'TextStyle');
+ if (comboBox && this.stylePlugin) {
+ var classNames = HTMLArea.DOM.getClassNames(element);
+ this.stylePlugin.buildDropDownOptions(comboBox, nodeName);
+ this.stylePlugin.setSelectedOption(comboBox, classNames, 'noUnknown');
+ }
+ },
/*
* This function builds the configuration object for the Language fieldset
*
@@ -321,76 +320,48 @@ Ext.define('HTMLArea.EditElement', {
function initLanguageStore (store) {
if (selectedLanguage !== 'none') {
store.removeAt(0);
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: languagePlugin.localize('Remove language mark'),
value: 'none'
- });
+ }));
}
}
- // Create global language store if it does not exist already
- var languageStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + languagePlugin.name);
- if (languageStore) {
- initLanguageStore(languageStore);
- } else {
- languageStore = Ext.create('Ext.data.Store', {
- autoLoad: true,
- model: 'HTMLArea.model.default',
- listeners: {
- load: initLanguageStore
- },
- proxy: {
- type: 'ajax',
- url: languageConfigurationUrl,
- reader: {
- type: 'json',
- root: 'options'
- }
- },
- storeId: this.editorId + '-store-' + languagePlugin.name
- });
- }
- itemsConfig.push(Ext.applyIf(
- {
- fieldLabel: languagePlugin.getHelpTip('languageCombo', 'Language'),
- itemId: 'lang',
- store: languageStore,
- width: ((this.properties['language'] && this.properties['language'].width) ? this.properties['language'].width : 300),
- value: selectedLanguage
- },
- this.configDefaults['combobox']
- ));
+ var languageStore = new Ext.data.JsonStore({
+ autoDestroy: true,
+ autoLoad: true,
+ root: 'options',
+ fields: [ { name: 'text'}, { name: 'value'} ],
+ url: languageConfigurationUrl,
+ listeners: {
+ load: initLanguageStore
+ }
+ });
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
+ fieldLabel: languagePlugin.getHelpTip('languageCombo', 'Language'),
+ itemId: 'lang',
+ store: languageStore,
+ width: ((this.properties['language'] && this.properties['language'].width) ? this.properties['language'].width : 200),
+ value: selectedLanguage
+ }, this.configDefaults['combo']));
}
if (this.removedProperties.indexOf('direction') == -1) {
- // Create direction options global store
- var directionStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + languagePlugin.name + '-direction');
- if (!directionStore) {
- directionStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: 'HTMLArea' + '-store-' + languagePlugin.name + '-direction'
- });
- directionStore.loadData([
- {
- text: languagePlugin.localize('Not set'),
- value: 'not set'
- },{
- text: languagePlugin.localize('RightToLeft'),
- value: 'rtl'
- },{
- text: languagePlugin.localize('LeftToRight'),
- value: 'ltr'
- }
- ]);
- }
- itemsConfig.push(Ext.applyIf(
- {
- fieldLabel: languagePlugin.getHelpTip('directionCombo', 'Text direction'),
- itemId: 'dir',
- store: directionStore,
- value: !Ext.isEmpty(element) && element.dir ? element.dir : 'not set',
- width: ((this.properties['direction'] && this.properties['dirrection'].width) ? this.properties['direction'].width : 300)
- },
- this.configDefaults['combobox']
- ));
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
+ fieldLabel: languagePlugin.getHelpTip('directionCombo', 'Text direction'),
+ itemId: 'dir',
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [languagePlugin.localize('Not set'), 'not set'],
+ [languagePlugin.localize('RightToLeft'), 'rtl'],
+ [languagePlugin.localize('LeftToRight'), 'ltr']
+ ]
+ }),
+ width: ((this.properties['direction'] && this.properties['dirrection'].width) ? this.properties['direction'].width : 200),
+ value: !Ext.isEmpty(element) && element.dir ? element.dir : 'not set'
+ }, this.configDefaults['combo']));
}
return {
xtype: 'fieldset',
@@ -457,11 +428,11 @@ Ext.define('HTMLArea.EditElement', {
*/
okHandler: function (button, event) {
this.restoreSelection();
- var textFields = this.dialog.query('textfield');
+ var textFields = this.dialog.findByType('textfield');
Ext.each(textFields, function (field) {
this.element.setAttribute(field.getItemId(), field.getValue());
}, this);
- var comboFields = this.dialog.query('combobox');
+ var comboFields = this.dialog.findByType('combo');
Ext.each(comboFields, function (field) {
var itemId = field.getItemId();
var value = field.getValue();
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js
index 5a20d1fb620e0416e931b53c1bafd070fe0d9838..315292e564b6e952d7f953d0ea997d8b09830849 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js
@@ -27,8 +27,7 @@
/*
* EditorMode Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.EditorMode', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.EditorMode = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/FindReplace/find-replace.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/FindReplace/find-replace.js
index 515e0d8041dd23a9b2c9c5538063bd2616c71688..86593fba55c72b5011f074ad35d7030286167b09 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/FindReplace/find-replace.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/FindReplace/find-replace.js
@@ -30,8 +30,7 @@
/*
* Find and Replace Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.FindReplace', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.FindReplace = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -117,13 +116,14 @@ Ext.define('HTMLArea.FindReplace', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -266,11 +266,11 @@ Ext.define('HTMLArea.FindReplace', {
* Handler invoked when the replace all checkbox is checked
*/
requestReplacement: function () {
- if (!this.dialog.down('component[itemId=replacement]').getValue() && this.dialog.down('component[itemId=replaceAll]').getValue()) {
+ if (!this.dialog.find('itemId', 'replacement')[0].getValue() && this.dialog.find('itemId', 'replaceAll')[0].getValue()) {
TYPO3.Dialog.InformationDialog({
title: this.getButton('FindReplace').tooltip.title,
msg: this.localize('Inform a replacement word'),
- fn: function () { this.dialog.down('component[itemId=replacement]').focus(); },
+ fn: function () { this.dialog.find('itemId', 'replacement')[0].focus(); },
scope: this
});
}
@@ -280,11 +280,11 @@ Ext.define('HTMLArea.FindReplace', {
* Handler invoked when the 'Next' button is pressed
*/
onNext: function () {
- if (!this.dialog.down('component[itemId=pattern]').getValue()) {
+ if (!this.dialog.find('itemId', 'pattern')[0].getValue()) {
TYPO3.Dialog.InformationDialog({
title: this.getButton('FindReplace').tooltip.title,
msg: this.localize('Enter the text you want to find'),
- fn: function () { this.dialog.down('component[itemId=pattern]').focus(); },
+ fn: function () { this.dialog.find('itemId', 'pattern')[0].focus(); },
scope: this
});
return false;
@@ -298,7 +298,7 @@ Ext.define('HTMLArea.FindReplace', {
];
var params = {};
Ext.each(fields, function (field) {
- params[field] = this.dialog.down('component[itemId=' + field + ']').getValue();
+ params[field] = this.dialog.find('itemId', field)[0].getValue();
}, this);
this.search(params);
return false;
@@ -458,8 +458,6 @@ Ext.define('HTMLArea.FindReplace', {
if (this.buffer != null) {
var transp = this.editor.getInnerHTML();
this.editor.setHTML(this.buffer);
- // Initialize a collapsed selection at the beginning of content
- this.editor.selectNode(this.editor.document.body, true);
this.buffer = transp;
this.disableActions('clear', true);
}
@@ -472,7 +470,7 @@ Ext.define('HTMLArea.FindReplace', {
*/
disableActions: function (actions, disabled) {
Ext.each(actions.split(/[,; ]+/), function (action) {
- this.dialog.down('component[itemId=' + action + ']').setDisabled(disabled);
+ this.dialog.find('itemId', action)[0].setDisabled(disabled);
}, this);
},
/*
@@ -488,25 +486,21 @@ Ext.define('HTMLArea.FindReplace', {
*/
onCancel: function () {
this.clearDoc();
- // Initialize a collapsed selection at the beginning of content
- this.editor.selectNode(this.editor.document.body, true);
var plugin = this.getPluginInstance('UndoRedo');
if (plugin) {
plugin.start();
}
- this.callParent(arguments);
+ HTMLArea.FindReplace.superclass.onCancel.call(this);
},
/*
* Clear the document before leaving on window close handle
*/
onClose: function () {
this.clearDoc();
- // Initialize a collapsed selection at the beginning of content
- this.editor.selectNode(this.editor.document.body, true);
var plugin = this.getPluginInstance('UndoRedo');
if (plugin) {
plugin.start();
}
- this.callParent(arguments);
+ HTMLArea.FindReplace.superclass.onClose.call(this);
}
});
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/InlineElements/inline-elements.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/InlineElements/inline-elements.js
index b5482a9e02f9c211d68b387efd6593fc90d7adad..98b03cbb12b09002e861181abe78929944a3105d 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/InlineElements/inline-elements.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/InlineElements/inline-elements.js
@@ -30,8 +30,7 @@
/*
* Creation of the class of InlineElements plugins
*/
-Ext.define('HTMLArea.InlineElements', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.InlineElements = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the base constructor
*/
@@ -77,12 +76,11 @@ Ext.define('HTMLArea.InlineElements', {
if (this.editorConfiguration.buttons.formattext.width) {
dropDownConfiguration.listWidth = parseInt(this.editorConfiguration.buttons.formattext.width, 10);
}
- dropDownConfiguration.listConfig = {};
if (this.editorConfiguration.buttons.formattext.listWidth) {
- dropDownConfiguration.listConfig.width = parseInt(this.editorConfiguration.buttons.formattext.listWidth, 10);
+ dropDownConfiguration.listWidth = parseInt(this.editorConfiguration.buttons.formattext.listWidth, 10);
}
if (this.editorConfiguration.buttons.formattext.maxHeight) {
- dropDownConfiguration.listConfig.maxHeight = parseInt(this.editorConfiguration.buttons.formattext.maxHeight, 10);
+ dropDownConfiguration.maxHeight = parseInt(this.editorConfiguration.buttons.formattext.maxHeight, 10);
}
}
this.registerDropDown(dropDownConfiguration);
@@ -408,15 +406,15 @@ Ext.define('HTMLArea.InlineElements', {
store.removeAt(0);
if ((store.findExact('value', tagName) != -1) && (selectionEmpty || fullNodeSelected)) {
select.setValue(tagName);
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('Remove markup'),
value: 'none'
- });
+ }));
} else {
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('No markup'),
value: 'none'
- });
+ }));
select.setValue('none');
}
select.setDisabled(!(store.getCount()>1) || disabled);
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/InsertSmiley/insert-smiley.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/InsertSmiley/insert-smiley.js
index d8edb6600dea6faa86ac29f0bda60ad8c15df940..8ee75b8a7b580e6e4398ab7200072919b4b710e2 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/InsertSmiley/insert-smiley.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/InsertSmiley/insert-smiley.js
@@ -30,8 +30,8 @@
/*
* Insert Smiley Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.InsertSmiley', {
- extend: 'HTMLArea.Plugin',
+
+HTMLArea.InsertSmiley = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -60,7 +60,7 @@ Ext.define('HTMLArea.InsertSmiley', {
* Registering plugin "About" information
*/
var pluginInformation = {
- version : '3.0',
+ version : '2.1',
developer : 'Ki Master George & Stanislas Rolland',
developerUrl : 'http://www.sjbr.ca/',
copyrightOwner : 'Ki Master George & Stanislas Rolland',
@@ -96,20 +96,15 @@ Ext.define('HTMLArea.InsertSmiley', {
// Could be a button or its hotkey
var buttonId = this.translateHotKey(id);
buttonId = buttonId ? buttonId : id;
- var dimensions = this.getWindowDimensions(
- {
- width: 220,
- height: 230
- },
- buttonId
- );
- this.dialog = Ext.create('Ext.window.Window', {
+ var dimensions = this.getWindowDimensions({width:216, height:230}, buttonId);
+ this.dialog = new Ext.Window({
title: this.localize('Insert Smiley'),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -118,10 +113,10 @@ Ext.define('HTMLArea.InsertSmiley', {
}
},
items: {
- xtype: 'component',
- cls: 'htmlarea-emoticon-array',
- tpl: Ext.create('Ext.XTemplate',
- '<tpl for="."><a href="#" class="htmlarea-emoticon" hidefocus="on" data-qtitle="{alt}" data-qtip="{title}"><img src="{file}" /></a></tpl>'
+ xtype: 'box',
+ cls: 'emoticon-array',
+ tpl: new Ext.XTemplate(
+ '<tpl for="."><a href="#" class="emoticon" hidefocus="on" ext:qtitle="{alt}" ext:qtip="{title}"><img src="{file}" /></a></tpl>'
),
listeners: {
render: {
@@ -160,8 +155,8 @@ Ext.define('HTMLArea.InsertSmiley', {
var icon = Ext.get(target).first();
var imgTag = this.editor.document.createElement('img');
imgTag.setAttribute('src', icon.getAttribute('src'));
- imgTag.setAttribute('alt', target.getAttribute('data-qtitle'));
- imgTag.setAttribute('title', target.getAttribute('data-qtip'));
+ imgTag.setAttribute('alt', target.getAttribute('ext:qtitle'));
+ imgTag.setAttribute('title', target.getAttribute('ext:qtip'));
this.editor.insertNodeAtSelection(imgTag);
if (!Ext.isIE) {
this.editor.selectNode(imgTag, false);
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/Language/language.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/Language/language.js
index 85d3b54455baf2921c62892afc7809c829229a1d..827e52ae3a3f580f40ee6c2a5eda923cbe461b2e 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/Language/language.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/Language/language.js
@@ -27,8 +27,7 @@
/*
* Language Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.Language', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.Language = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -102,12 +101,11 @@ Ext.define('HTMLArea.Language', {
};
if (this.buttonsConfiguration.language) {
dropDownConfiguration.width = this.buttonsConfiguration.language.width ? parseInt(this.buttonsConfiguration.language.width, 10) : 200;
- dropDownConfiguration.listConfig = {};
if (this.buttonsConfiguration.language.listWidth) {
- dropDownConfiguration.listConfig.width = parseInt(this.buttonsConfiguration.language.listWidth, 10);
+ dropDownConfiguration.listWidth = parseInt(this.buttonsConfiguration.language.listWidth, 10);
}
if (this.buttonsConfiguration.language.maxHeight) {
- dropDownConfiguration.listConfig.maxHeight = parseInt(this.buttonsConfiguration.language.maxHeight, 10);
+ dropDownConfiguration.maxHeight = parseInt(this.buttonsConfiguration.language.maxHeight, 10);
}
}
this.registerDropDown(dropDownConfiguration);
@@ -441,15 +439,15 @@ Ext.define('HTMLArea.Language', {
store.removeAt(0);
if ((store.findExact('value', language) != -1) && (selectionEmpty || fullNodeSelected || !endPointsInSameBlock)) {
select.setValue(language);
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('Remove language mark'),
value: 'none'
- });
+ }));
} else {
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('No language mark'),
value: 'none'
- });
+ }));
select.setValue('none');
}
select.setDisabled(!(store.getCount()>1) || (selectionEmpty && this.editor.getParentElement().nodeName.toLowerCase() === 'body'));
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/PlainText/plain-text.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/PlainText/plain-text.js
index f65afeb2e53bf0738b4a593e7bdc2bd601eddd4c..6a7ce0730a042ab29baf96d5d5c07e854af59050 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/PlainText/plain-text.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/PlainText/plain-text.js
@@ -27,8 +27,7 @@
/*
* Paste as Plain Text Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.PlainText', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.PlainText = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -154,7 +153,7 @@ Ext.define('HTMLArea.PlainText', {
this.getWindowDimensions(
{
width: 260,
- height: 260
+ height:260
},
buttonId
)
@@ -177,13 +176,14 @@ Ext.define('HTMLArea.PlainText', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -232,7 +232,7 @@ Ext.define('HTMLArea.PlainText', {
'pasteFormat'
];
Ext.each(fields, function (field) {
- if (this.dialog.down('component[itemId=' + field +']').getValue()) {
+ if (this.dialog.find('itemId', field)[0].getValue()) {
this.currentBehaviour = field;
return false;
}
@@ -283,7 +283,7 @@ Ext.define('HTMLArea.PlainText', {
this.redirectPaste();
// Process the content of the hidden section after the paste operation is completed
// WebKit seems to be pondering a very long time over what is happenning here...
- Ext.Function.defer(this.processPastedContent, Ext.isWebKit ? 500 : 50, this);
+ this.processPastedContent.defer(Ext.isWebKit ? 500 : 50, this);
}
break;
default:
@@ -397,7 +397,7 @@ Ext.define('HTMLArea.PlainText', {
listeners: {
afterrender: {
// The document will not be immediately ready
- fn: function (event) { Ext.Function.defer(this.onPastingPadAfterRender, 100, this, [event]); },
+ fn: function (event) { this.onPastingPadAfterRender.defer(100, this, [event]); },
scope: this
},
close: {
@@ -447,7 +447,7 @@ Ext.define('HTMLArea.PlainText', {
*/
onPastingPadPaste: function (event) {
// Let the paste operation complete before cleaning
- Ext.Function.defer(this.cleanPastingPadContents, 50, this);
+ this.cleanPastingPadContents.defer(50, this);
},
/*
* Clean the contents of the pasting pad
@@ -476,7 +476,7 @@ Ext.define('HTMLArea.PlainText', {
switch (button.itemId) {
case 'PasteToggle':
button.setTooltip({
- text: this.localize((button.inactive ? 'enable' : 'disable') + this.currentBehaviour)
+ title: this.localize((button.inactive ? 'enable' : 'disable') + this.currentBehaviour)
});
break;
}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/QuickTag/quick-tag.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/QuickTag/quick-tag.js
index a1c7755ec4e872495862a12a7839dd1afba5df1f..a9c8e5e1205d64145cc8b165a4589d30b5eb6fe5 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/QuickTag/quick-tag.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/QuickTag/quick-tag.js
@@ -30,43 +30,7 @@
/*
* Quick Tag Editor Plugin for TYPO3 htmlArea RTE
*/
-/*
- * Define data model for tag attributes store
- */
-Ext.define('HTMLArea.model.TagAttribute', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'text',
- type: 'string'
- },{
- name: 'value',
- type: 'string'
- },{
- name: 'tag',
- type: 'string'
- }]
-});
-/*
- * Define data model for attribute values store
- */
-Ext.define('HTMLArea.model.AttributeValue', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'text',
- type: 'string'
- },{
- name: 'value',
- type: 'string'
- },{
- name: 'attribute',
- type: 'string'
- }]
-});
-/*
- * Define QuiskTag plugin
- */
-Ext.define('HTMLArea.QuickTag', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.QuickTag = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -108,23 +72,15 @@ Ext.define('HTMLArea.QuickTag', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
- displayField: 'text',
+ combo: {
editable: true,
- forceSelection: true,
- helpIcon: true,
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
- queryMode: 'local',
- triggerAction: 'all',
typeAhead: true,
+ triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local',
valueField: 'value',
- xtype: 'combobox'
+ displayField: 'text',
+ helpIcon: true
}
},
/*
@@ -149,52 +105,46 @@ Ext.define('HTMLArea.QuickTag', {
this.buildItemsConfig(),
this.setTag
);
- this.insertedTag = this.dialog.down('component[itemId=insertedTag]');
- this.tagCombo = this.dialog.down('component[itemId=tags]');
- this.attributeCombo = this.dialog.down('component[itemId=attributes]');
- this.valueCombo = this.dialog.down('component[itemId=values]');
- this.colorCombo = this.dialog.down('component[itemId=colors]');
+ this.insertedTag = this.dialog.find('itemId', 'insertedTag')[0];
+ this.tagCombo = this.dialog.find('itemId', 'tags')[0];
+ this.attributeCombo = this.dialog.find('itemId', 'attributes')[0];
+ this.valueCombo = this.dialog.find('itemId', 'values')[0];
+ this.colorCombo = this.dialog.find('itemId', 'colors')[0];
},
/*
* Build the window items config
*/
buildItemsConfig: function (element, buttonId) {
- // Create tag store
- this.tagStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-tag');
- if (!this.tagStore) {
- this.tagStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-tag'
- });
- this.tagStore.loadData(this.tags);
- if (this.denyTags) {
- var denyTags = new RegExp('^(' + this.denyTags.split(',').join('|').replace(/ /g, '') + ')$', 'i');
- this.tagStore.filterBy(function (record) {
- return !denyTags.test(record.get('value'));
- });
- // Make sure the combo is filtered
- this.tagStore.snapshot = this.tagStore.data;
- }
- }
- // Create attribute store
- this.attributeStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-attribute');
- if (!this.attributeStore) {
- this.attributeStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.TagAttribute',
- storeId: this.editorId + '-store-' + this.name + '-attribute'
- });
- this.attributeStore.loadData(this.attributes);
- }
- // Create value store
- this.valueStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-value');
- if (!this.valueStore) {
- this.valueStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.AttributeValue',
- storeId: this.editorId + '-store-' + this.name + '--value'
+ var tagStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: this.tags
+ });
+ if (this.denyTags) {
+ var denyTags = new RegExp('^(' + this.denyTags.split(',').join('|').replace(/ /g, '') + ')$', 'i');
+ tagStore.filterBy(function (record) {
+ return !denyTags.test(record.get('value'));
});
- this.valueStore.loadData(this.values);
- this.captureClasses(this.valueStore);
+ // Make sure the combo list is filtered
+ tagStore.snapshot = tagStore.data;
}
+ var attributeStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ {name: 'tag'}, { name: 'text'}, { name: 'value'}],
+ data: this.attributes
+ });
+ this.valueRecord = Ext.data.Record.create([{name: 'attribute'}, { name: 'text'}, { name: 'value'}]);
+ var valueStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ {name: 'attribute'}, { name: 'text'}, { name: 'value'}],
+ data: this.values,
+ listeners: {
+ load: {
+ fn: this.captureClasses,
+ scope: this
+ }
+ }
+ });
var itemsConfig = [{
xtype: 'textarea',
itemId: 'tagopen',
@@ -216,21 +166,23 @@ Ext.define('HTMLArea.QuickTag', {
},{
xtype: 'displayfield',
text: '>'
- }, Ext.applyIf({
+ }, Ext.apply({
+ xtype: 'combo',
itemId: 'tags',
fieldLabel: this.localize('TAGs'),
- store: this.tagStore,
+ store: tagStore,
listeners: {
select: {
fn: this.onTagSelect,
scope: this
}
}
- }, this.configDefaults['combobox'])
- , Ext.applyIf({
+ }, this.configDefaults['combo'])
+ , Ext.apply({
+ xtype: 'combo',
itemId: 'attributes',
fieldLabel: this.localize('ATTRIBUTES'),
- store: this.attributeStore,
+ store: attributeStore,
hidden: true,
listeners: {
select: {
@@ -238,11 +190,12 @@ Ext.define('HTMLArea.QuickTag', {
scope: this
}
}
- }, this.configDefaults['combobox'])
- , Ext.applyIf({
+ }, this.configDefaults['combo'])
+ , Ext.apply({
+ xtype: 'combo',
itemId: 'values',
fieldLabel: this.localize('OPTIONS'),
- store: this.valueStore,
+ store: valueStore,
hidden: true,
listeners: {
select: {
@@ -250,7 +203,7 @@ Ext.define('HTMLArea.QuickTag', {
scope: this
}
}
- }, this.configDefaults['combobox'])
+ }, this.configDefaults['combo'])
,{
xtype: 'colorpalettefield',
fieldLabel: this.localize('Colors'),
@@ -287,11 +240,11 @@ Ext.define('HTMLArea.QuickTag', {
Ext.each(rules, function (rule) {
if (rule.selectorText) {
if (/^(\w*)\.(\w+)$/.test(rule.selectorText)) {
- valueStore.add({
+ valueStore.add(new this.valueRecord({
attribute: 'class',
text: rule.selectorText,
value: RegExp.$2 + '"'
- });
+ }));
}
} else {
// ImportRule (Mozilla)
@@ -316,14 +269,12 @@ Ext.define('HTMLArea.QuickTag', {
* Handler invoked when a tag is selected
* Update the attributes combo and the inserted tag field
*/
- onTagSelect: function (tagCombo, tagRecords) {
- var tagRecord = tagRecords[0];
+ onTagSelect: function (tagCombo, tagRecord) {
var tag = tagRecord.get('value');
this.filterAttributes();
- var attributeCombo = this.dialog.down('combobox[itemId=attributes]');
- attributeCombo.clearValue();
- attributeCombo.show();
- this.dialog.down('combobox[itemId=values]').hide();
+ this.attributeCombo.clearValue();
+ this.attributeCombo.show();
+ this.valueCombo.hide();
this.insertedTag.setValue(tag);
this.insertedTag.focus(false, 50);
},
@@ -331,67 +282,72 @@ Ext.define('HTMLArea.QuickTag', {
* Filter out attributes not applicable to the tag, already present in the tag or not allowed
*/
filterAttributes: function () {
- var tag = this.dialog.down('combobox[itemId=tags]').getValue();
+ var tag = this.tagCombo.getValue();
var insertedTag = this.insertedTag.getValue();
+ var attributeStore = this.attributeCombo.getStore();
+ if (attributeStore.realSnapshot) {
+ attributeStore.snapshot = attributeStore.realSnapshot;
+ delete attributeStore.realSnapshot;
+ attributeStore.clearFilter(true);
+ }
var allowedAttribs = '';
if (this.allowedAttribs) {
allowedAttribs = this.allowedAttribs.split(',').join('|').replace(/ /g, '');
}
- if (this.allowedTags && this.allowedTags[tag] && this.allowedTags[tag].allowedAttribs) {
+ if (this.tags && this.tags[tag] && this.tags[tag].allowedAttribs) {
allowedAttribs += allowedAttribs ? '|' : '';
- allowedAttribs += this.allowedTags[tag].allowedAttribs.split(',').join('|').replace(/ /g, '');
+ allowedAttribs += this.tags[tag].allowedAttribs.split(',').join('|').replace(/ /g, '');
}
if (allowedAttribs) {
var allowedAttribs = new RegExp('^(' + allowedAttribs + ')$');
}
- // Refresh the store
- this.attributeStore.loadData(this.attributes);
- // Apply filter
- this.attributeStore.filterBy(function (attributeRecord) {
- // Filter out attributes already used in the tag, not applicable to tag or not allowed
+ attributeStore.filterBy(function (attributeRecord) {
+ // Filter out attributes already used in the tag, not applucable to tag or not allowed
var testAttrib = new RegExp('(' + attributeRecord.get('value') + ')', 'ig');
var tagValue = attributeRecord.get('tag');
return (tagValue == 'all' || tagValue == tag) && !testAttrib.test(insertedTag) && (!allowedAttribs || allowedAttribs.test(attributeRecord.get('text')));
});
- // Make sure the combo is filtered
- this.attributeStore.snapshot = this.attributeStore.data;
+ // Make sure the combo list is filtered
+ attributeStore.realSnapshot = attributeStore.snapshot;
+ attributeStore.snapshot = attributeStore.data;
},
/*
* Filter out not applicable to the attribute or style values already present in the tag
* Filter out classes not applicable to the current tag
*/
filterValues: function (attribute) {
- var tag = this.dialog.down('combobox[itemId=tags]').getValue();
+ var tag = this.tagCombo.getValue();
var insertedTag = this.insertedTag.getValue();
+ var valueStore = this.valueCombo.getStore();
+ if (valueStore.realSnapshot) {
+ valueStore.snapshot = valueStore.realSnapshot;
+ delete valueStore.realSnapshot;
+ valueStore.clearFilter(true);
+ }
var expr = new RegExp('(^' + tag + '[\.])|(^[\.])', 'i');
- // Refresh the store
- this.valueStore.loadData(this.values);
- this.captureClasses(this.valueStore);
- // Apply filter
- this.valueStore.filterBy(function (valueRecord) {
+ valueStore.filterBy(function (valueRecord) {
var value = valueRecord.get('value');
if (attribute === 'style') {
expr = new RegExp('(' + ((value.charAt(0) == '+' || value.charAt(0) == '-') ? '\\' : '') + value + ')', 'ig');
}
return valueRecord.get('attribute') == attribute && (attribute !== 'style' || !expr.test(insertedTag)) && (attribute !== 'class' || expr.test(valueRecord.get('text')));
});
- // Make sure the combo is filtered
- this.valueStore.snapshot = this.valueStore.data;
- this.dialog.down('combobox[itemId=values]').setVisible(this.valueStore.getCount() ? true : false);
+ // Make sure the combo list is filtered
+ valueStore.realSnapshot = valueStore.snapshot;
+ valueStore.snapshot = valueStore.data;
+ this.valueCombo.setVisible(valueStore.getCount() ? true : false);
},
/*
* Handler invoked when an attribute is selected
* Update the values combo and the inserted tag field
*/
- onAttributeSelect: function (attributeCombo, attributeRecords) {
- var attributeRecord = attributeRecords[0];
+ onAttributeSelect: function (attributeCombo, attributeRecord) {
var insertedTag = this.insertedTag.getValue();
var attribute = attributeRecord.get('text');
- var valueCombo = this.dialog.down('combobox[itemId=values]');
- valueCombo.clearValue();
+ this.valueCombo.clearValue();
if (/color/.test(attribute)) {
- valueCombo.hide();
- this.dialog.down('colorpalettefield[itemId=colors]').show();
+ this.valueCombo.hide();
+ this.colorCombo.show();
} else {
this.filterValues(attribute);
}
@@ -402,36 +358,32 @@ Ext.define('HTMLArea.QuickTag', {
* Handler invoked when a value is selected
* Update the inserted tag field
*/
- onValueSelect: function (combo, records) {
- var record = records[0];
- var attributeCombo = this.dialog.down('combobox[itemId=attributes]');
- var style = attributeCombo.getValue() === 'style="';
+ onValueSelect: function (combo, record) {
+ var style = this.attributeCombo.getValue() === 'style="';
this.insertedTag.setValue(this.insertedTag.getValue() + (style && !/="$/.test(this.insertedTag.getValue()) ? '; ' : '') + combo.getValue());
this.insertedTag.focus(false, 50);
combo.clearValue();
if (style) {
if (/color/.test(record.get('text'))) {
- this.dialog.down('colorpalettefield[itemId=colors]').show();
+ this.colorCombo.show();
}
} else {
combo.hide();
- attributeCombo.clearValue();
+ this.attributeCombo.clearValue();
}
},
/*
* Handler invoked when a color is selected
* Update the inserted tag field
*/
- onColorSelect: function (combo, records) {
- var record = records[0];
- var attributeCombo = this.dialog.down('combobox[itemId=attributes]');
- var style = attributeCombo.getValue() === 'style="';
+ onColorSelect: function (combo, record) {
+ var style = this.attributeCombo.getValue() === 'style="';
this.insertedTag.setValue(this.insertedTag.getValue() + '#' + combo.getValue() + (style ? '' : '"'));
this.insertedTag.focus(false, 50);
combo.setValue('');
combo.hide();
if (!style) {
- attributeCombo.clearValue();
+ this.attributeCombo.clearValue();
}
},
/*
@@ -440,10 +392,10 @@ Ext.define('HTMLArea.QuickTag', {
setTag: function (button, event) {
this.restoreSelection();
var insertedTag = this.insertedTag.getValue();
- var currentTag = this.dialog.down('combobox[itemId=tags]').getValue();
+ var currentTag = this.tagCombo.getValue();
if (!insertedTag) {
TYPO3.Dialog.InformationDialog({
- title: this.getButton('InsertTag').tooltip.text,
+ title: this.getButton('InsertTag').tooltip.title,
msg: this.localize('Enter the TAG you want to insert'),
fn: function () { this.insertedTag.focus(); },
scope: this
@@ -454,7 +406,7 @@ Ext.define('HTMLArea.QuickTag', {
if (this.quotes.test(insertedTag)) {
if (this.quotes.test(insertedTag + '"')) {
TYPO3.Dialog.InformationDialog({
- title: this.getButton('InsertTag').tooltip.text,
+ title: this.getButton('InsertTag').tooltip.title,
msg: this.localize('There are some unclosed quote'),
fn: function () { this.insertedTag.focus(); this.insertedTag.select(); },
scope: this
@@ -473,6 +425,7 @@ Ext.define('HTMLArea.QuickTag', {
tagOpen = tagOpen + this.subTags.open;
tagClose = this.subTags.close + tagClose;
}
+ this.editor.focus();
this.editor.surroundHTML(tagOpen, tagClose);
this.close();
event.stopEvent();
@@ -492,14 +445,13 @@ Ext.define('HTMLArea.QuickTag', {
if (this.dialog) {
this.dialog.close();
}
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
arguments: arguments,
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
iconCls: this.getButton(arguments.buttonId).iconCls,
listeners: {
close: {
@@ -523,298 +475,298 @@ Ext.define('HTMLArea.QuickTag', {
this.show();
},
tags: [
- { text: 'a', value: 'a'},
- { text: 'abbr', value: 'abbr'},
- { text: 'acronym', value: 'acronym'},
- { text: 'address', value: 'address'},
- { text: 'b', value: 'b'},
- { text: 'big', value: 'big'},
- { text: 'blockquote', value: 'blockquote'},
- { text: 'cite', value: 'cite'},
- { text: 'code', value: 'code'},
- { text: 'div', value: 'div'},
- { text: 'em', value: 'em'},
- { text: 'fieldset', value: 'fieldset'},
- { text: 'font', value: 'font'},
- { text: 'h1', value: 'h1'},
- { text: 'h2', value: 'h2'},
- { text: 'h3', value: 'h3'},
- { text: 'h4', value: 'h4'},
- { text: 'h5', value: 'h5'},
- { text: 'h6', value: 'h6'},
- { text: 'i', value: 'i'},
- { text: 'legend', value: 'legend'},
- { text: 'li', value: 'li'},
- { text: 'ol', value: 'ol'},
- { text: 'ul', value: 'ul'},
- { text: 'p', value: 'p'},
- { text: 'pre', value: 'pre'},
- { text: 'q', value: 'q'},
- { text: 'small', value: 'small'},
- { text: 'span', value: 'span'},
- { text: 'strike', value: 'strike'},
- { text: 'strong', value: 'strong'},
- { text: 'sub', value: 'sub'},
- { text: 'sup', value: 'sup'},
- { text: 'table', value: 'table'},
- { text: 'tt', value: 'tt'},
- { text: 'u', value: 'u'}
+ ['a', 'a'],
+ ['abbr', 'abbr'],
+ ['acronym', 'acronym'],
+ ['address', 'address'],
+ ['b', 'b'],
+ ['big', 'big'],
+ ['blockquote', 'blockquote'],
+ ['cite', 'cite'],
+ ['code', 'code'],
+ ['div', 'div'],
+ ['em', 'em'],
+ ['fieldset', 'fieldset'],
+ ['font', 'font'],
+ ['h1', 'h1'],
+ ['h2', 'h2'],
+ ['h3', 'h3'],
+ ['h4', 'h4'],
+ ['h5', 'h5'],
+ ['h6', 'h6'],
+ ['i', 'i'],
+ ['legend', 'legend'],
+ ['li', 'li'],
+ ['ol', 'ol'],
+ ['ul', 'ul'],
+ ['p', 'p'],
+ ['pre', 'pre'],
+ ['q', 'q'],
+ ['small', 'small'],
+ ['span', 'span'],
+ ['strike', 'strike'],
+ ['strong', 'strong'],
+ ['sub', 'sub'],
+ ['sup', 'sup'],
+ ['table', 'table'],
+ ['tt', 'tt'],
+ ['u', 'u']
],
attributes: [
- { tag: 'all', text: 'class', value: 'class="'},
- { tag: 'all', text: 'dir', value: 'dir="'},
- { tag: 'all', text: 'id', value: 'id="'},
- { tag: 'all', text: 'lang', value: 'lang="'},
- { tag: 'all', text: 'onFocus', value: 'onFocus="'},
- { tag: 'all', text: 'onBlur', value: 'onBlur="'},
- { tag: 'all', text: 'onClick', value: 'onClick="'},
- { tag: 'all', text: 'onDblClick', value: 'onDblClick="'},
- { tag: 'all', text: 'onMouseDown', value: 'onMouseDown="'},
- { tag: 'all', text: 'onMouseUp', value: 'onMouseUp="'},
- { tag: 'all', text: 'onMouseOver', value: 'onMouseOver="'},
- { tag: 'all', text: 'onMouseMove', value: 'onMouseMove="'},
- { tag: 'all', text: 'onMouseOut', value: 'onMouseOut="'},
- { tag: 'all', text: 'onKeyPress', value: 'onKeyPress="'},
- { tag: 'all', text: 'onKeyDown', value: 'onKeyDown="'},
- { tag: 'all', text: 'onKeyUp', value: 'onKeyUp="'},
- { tag: 'all', text: 'style', value: 'style="'},
- { tag: 'all', text: 'title', value: 'title="'},
- { tag: 'all', text: 'xml:lang', value: 'xml:lang="'},
- { tag: 'a', text: 'href', value: 'href="'},
- { tag: 'a', text: 'name', value: 'name="'},
- { tag: 'a', text: 'target', value: 'target="'},
- { tag: 'font', text: 'face', value: 'face="'},
- { tag: 'font', text: 'size', value: 'size="'},
- { tag: 'font', text: 'color', value: 'color="'},
- { tag: 'div', text: 'align', value: 'align="'},
- { tag: 'h1', text: 'align', value: 'align="'},
- { tag: 'h2', text: 'align', value: 'align="'},
- { tag: 'h3', text: 'align', value: 'align="'},
- { tag: 'h4', text: 'align', value: 'align="'},
- { tag: 'h5', text: 'align', value: 'align="'},
- { tag: 'h6', text: 'align', value: 'align="'},
- { tag: 'p', text: 'align', value: 'align="'},
- { tag: 'table', text: 'align', value: 'align="'},
- { tag: 'table', text: 'width', value: 'width="'},
- { tag: 'table', text: 'height', value: 'height="'},
- { tag: 'table', text: 'cellpadding', value: 'cellpadding="'},
- { tag: 'table', text: 'cellspacing', value: 'cellspacing="'},
- { tag: 'table', text: 'background', value: 'background="'},
- { tag: 'table', text: 'bgcolor', value: 'bgcolor="'},
- { tag: 'table', text: 'border', value: 'border="'},
- { tag: 'table', text: 'bordercolor', value: 'bordercolor="'}
+ ['all', 'class', 'class="'],
+ ['all', 'dir', 'dir="'],
+ ['all', 'id', 'id="'],
+ ['all', 'lang', 'lang="'],
+ ['all', 'onFocus', 'onFocus="'],
+ ['all', 'onBlur', 'onBlur="'],
+ ['all', 'onClick', 'onClick="'],
+ ['all', 'onDblClick', 'onDblClick="'],
+ ['all', 'onMouseDown', 'onMouseDown="'],
+ ['all', 'onMouseUp', 'onMouseUp="'],
+ ['all', 'onMouseOver', 'onMouseOver="'],
+ ['all', 'onMouseMove', 'onMouseMove="'],
+ ['all', 'onMouseOut', 'onMouseOut="'],
+ ['all', 'onKeyPress', 'onKeyPress="'],
+ ['all', 'onKeyDown', 'onKeyDown="'],
+ ['all', 'onKeyUp', 'onKeyUp="'],
+ ['all', 'style', 'style="'],
+ ['all', 'title', 'title="'],
+ ['all', 'xml:lang', 'xml:lang="'],
+ ['a', 'href', 'href="'],
+ ['a', 'name', 'name="'],
+ ['a', 'target', 'target="'],
+ ['font', 'face', 'face="'],
+ ['font', 'size', 'size="'],
+ ['font', 'color', 'color="'],
+ ['div', 'align', 'align="'],
+ ['h1', 'align', 'align="'],
+ ['h2', 'align', 'align="'],
+ ['h3', 'align', 'align="'],
+ ['h4', 'align', 'align="'],
+ ['h5', 'align', 'align="'],
+ ['h6', 'align', 'align="'],
+ ['p', 'align', 'align="'],
+ ['table', 'align', 'align="'],
+ ['table', 'width', 'width="'],
+ ['table', 'height', 'height="'],
+ ['table', 'cellpadding', 'cellpadding="'],
+ ['table', 'cellspacing', 'cellspacing="'],
+ ['table', 'background', 'background="'],
+ ['table', 'bgcolor', 'bgcolor="'],
+ ['table', 'border', 'border="'],
+ ['table', 'bordercolor', 'bordercolor="']
],
values: [
- { attribute: 'href', text: 'http://', value: 'http://'},
- { attribute: 'href', text: 'https://', value: 'https://'},
- { attribute: 'href', text: 'ftp://', value: 'ftp://'},
- { attribute: 'href', text: 'mailto:', value: 'mailto:'},
- { attribute: 'href', text: '#', value: '#"'},
- { attribute: 'target', text: '_top', value: '_top"'},
- { attribute: 'target', text: '_self', value: '_self"'},
- { attribute: 'target', text: '_parent', value: '_parent"'},
- { attribute: 'target', text: '_blank', value: '_blank"'},
- { attribute: 'face', text: 'Verdana', value: 'Verdana"'},
- { attribute: 'face', text: 'Arial', value: 'Arial"'},
- { attribute: 'face', text: 'Tahoma', value: 'Tahoma"'},
- { attribute: 'face', text: 'Courier New', value: 'Courier New"'},
- { attribute: 'face', text: 'Times New Roman', value: 'Times New Roman"'},
- { attribute: 'size', text: '1', value: '1"'},
- { attribute: 'size', text: '2', value: '2"'},
- { attribute: 'size', text: '3', value: '3"'},
- { attribute: 'size', text: '4', value: '4"'},
- { attribute: 'size', text: '5', value: '5"'},
- { attribute: 'size', text: '6', value: '6"'},
- { attribute: 'size', text: '+1', value: '+1"'},
- { attribute: 'size', text: '+2', value: '+2"'},
- { attribute: 'size', text: '+3', value: '+3"'},
- { attribute: 'size', text: '+4', value: '+4"'},
- { attribute: 'size', text: '+5', value: '+5"'},
- { attribute: 'size', text: '+6', value: '+6"'},
- { attribute: 'size', text: '-1', value: '-1"'},
- { attribute: 'size', text: '-2', value: '-2"'},
- { attribute: 'size', text: '-3', value: '-3"'},
- { attribute: 'size', text: '-4', value: '-4"'},
- { attribute: 'size', text: '-5', value: '-5"'},
- { attribute: 'size', text: '-6', value: '-6"'},
- { attribute: 'align', text: 'center', value: 'center"'},
- { attribute: 'align', text: 'left', value: 'left"'},
- { attribute: 'align', text: 'right', value: 'right"'},
- { attribute: 'align', text: 'justify', value: 'justify"'},
- { attribute: 'dir', text: 'rtl', value: 'rtl"'},
- { attribute: 'dir', text: 'ltr', value: 'ltr"'},
- { attribute: 'lang', text: 'Afrikaans ', value: 'af"'},
- { attribute: 'lang', text: 'Albanian ', value: 'sq"'},
- { attribute: 'lang', text: 'Arabic ', value: 'ar"'},
- { attribute: 'lang', text: 'Basque ', value: 'eu"'},
- { attribute: 'lang', text: 'Breton ', value: 'br"'},
- { attribute: 'lang', text: 'Bulgarian ', value: 'bg"'},
- { attribute: 'lang', text: 'Belarusian ', value: 'be"'},
- { attribute: 'lang', text: 'Catalan ', value: 'ca"'},
- { attribute: 'lang', text: 'Chinese ', value: 'zh"'},
- { attribute: 'lang', text: 'Croatian ', value: 'hr"'},
- { attribute: 'lang', text: 'Czech ', value: 'cs"'},
- { attribute: 'lang', text: 'Danish ', value: 'da"'},
- { attribute: 'lang', text: 'Dutch ', value: 'nl"'},
- { attribute: 'lang', text: 'English ', value: 'en"'},
- { attribute: 'lang', text: 'Estonian ', value: 'et"'},
- { attribute: 'lang', text: 'Faeroese ', value: 'fo"'},
- { attribute: 'lang', text: 'Farsi ', value: 'fa"'},
- { attribute: 'lang', text: 'Finnish ', value: 'fi"'},
- { attribute: 'lang', text: 'French ', value: 'fr"'},
- { attribute: 'lang', text: 'Gaelic ', value: 'gd"'},
- { attribute: 'lang', text: 'German ', value: 'de"'},
- { attribute: 'lang', text: 'Greek ', value: 'el"'},
- { attribute: 'lang', text: 'Hebrew ', value: 'he"'},
- { attribute: 'lang', text: 'Hindi ', value: 'hi"'},
- { attribute: 'lang', text: 'Hungarian ', value: 'hu"'},
- { attribute: 'lang', text: 'Icelandic ', value: 'is"'},
- { attribute: 'lang', text: 'Indonesian ', value: 'id"'},
- { attribute: 'lang', text: 'Italian ', value: 'it"'},
- { attribute: 'lang', text: 'Japanese ', value: 'ja"'},
- { attribute: 'lang', text: 'Korean ', value: 'ko"'},
- { attribute: 'lang', text: 'Latvian ', value: 'lv"'},
- { attribute: 'lang', text: 'Lithuanian ', value: 'lt"'},
- { attribute: 'lang', text: 'Macedonian ', value: 'mk"'},
- { attribute: 'lang', text: 'Malaysian ', value: 'ms"'},
- { attribute: 'lang', text: 'Maltese ', value: 'mt"'},
- { attribute: 'lang', text: 'Norwegian ', value: 'no"'},
- { attribute: 'lang', text: 'Polish ', value: 'pl"'},
- { attribute: 'lang', text: 'Portuguese ', value: 'pt"'},
- { attribute: 'lang', text: 'Rhaeto-Romanic ', value: 'rm"'},
- { attribute: 'lang', text: 'Romanian ', value: 'ro"'},
- { attribute: 'lang', text: 'Russian ', value: 'ru"'},
- { attribute: 'lang', text: 'Sami ', value: 'sz"'},
- { attribute: 'lang', text: 'Serbian ', value: 'sr"'},
- { attribute: 'lang', text: 'Setswana ', value: 'tn"'},
- { attribute: 'lang', text: 'Slovak ', value: 'sk"'},
- { attribute: 'lang', text: 'Slovenian ', value: 'sl"'},
- { attribute: 'lang', text: 'Spanish ', value: 'es"'},
- { attribute: 'lang', text: 'Sutu ', value: 'sx"'},
- { attribute: 'lang', text: 'Swedish ', value: 'sv"'},
- { attribute: 'lang', text: 'Thai ', value: 'th"'},
- { attribute: 'lang', text: 'Tsonga ', value: 'ts"'},
- { attribute: 'lang', text: 'Turkish ', value: 'tr"'},
- { attribute: 'lang', text: 'Ukrainian ', value: 'uk"'},
- { attribute: 'lang', text: 'Urdu ', value: 'ur"'},
- { attribute: 'lang', text: 'Vietnamese ', value: 'vi"'},
- { attribute: 'lang', text: 'Xhosa ', value: 'xh"'},
- { attribute: 'lang', text: 'Yiddish ', value: 'yi"'},
- { attribute: 'lang', text: 'Zulu', value: 'zu"'},
- { attribute: 'style', text: 'azimuth', value: 'azimuth: '},
- { attribute: 'style', text: 'background', value: 'background: '},
- { attribute: 'style', text: 'background-attachment', value: 'background-attachment: '},
- { attribute: 'style', text: 'background-color', value: 'background-color: '},
- { attribute: 'style', text: 'background-image', value: 'background-image: '},
- { attribute: 'style', text: 'background-position', value: 'background-position: '},
- { attribute: 'style', text: 'background-repeat', value: 'background-repeat: '},
- { attribute: 'style', text: 'border', value: 'border: '},
- { attribute: 'style', text: 'border-bottom', value: 'border-bottom: '},
- { attribute: 'style', text: 'border-left', value: 'border-left: '},
- { attribute: 'style', text: 'border-right', value: 'border-right: '},
- { attribute: 'style', text: 'border-top', value: 'border-top: '},
- { attribute: 'style', text: 'border-bottom-color', value: 'border-bottom-color: '},
- { attribute: 'style', text: 'border-left-color', value: 'border-left-color: '},
- { attribute: 'style', text: 'border-right-color', value: 'border-right-color: '},
- { attribute: 'style', text: 'border-top-color', value: 'border-top-color: '},
- { attribute: 'style', text: 'border-bottom-style', value: 'border-bottom-style: '},
- { attribute: 'style', text: 'border-left-style', value: 'border-left-style: '},
- { attribute: 'style', text: 'border-right-style', value: 'border-right-style: '},
- { attribute: 'style', text: 'border-top-style', value: 'border-top-style: '},
- { attribute: 'style', text: 'border-bottom-width', value: 'border-bottom-width: '},
- { attribute: 'style', text: 'border-left-width', value: 'border-left-width: '},
- { attribute: 'style', text: 'border-right-width', value: 'border-right-width: '},
- { attribute: 'style', text: 'border-top-width', value: 'border-top-width: '},
- { attribute: 'style', text: 'border-collapse', value: 'border-collapse: '},
- { attribute: 'style', text: 'border-color', value: 'border-color: '},
- { attribute: 'style', text: 'border-style', value: 'border-style: '},
- { attribute: 'style', text: 'border-width', value: 'border-width: '},
- { attribute: 'style', text: 'bottom', value: 'bottom: '},
- { attribute: 'style', text: 'caption-side', value: 'caption-side: '},
- { attribute: 'style', text: 'cell-spacing', value: 'cell-spacing: '},
- { attribute: 'style', text: 'clear', value: 'clear: '},
- { attribute: 'style', text: 'clip', value: 'clip: '},
- { attribute: 'style', text: 'color', value: 'color: '},
- { attribute: 'style', text: 'column-span', value: 'column-span: '},
- { attribute: 'style', text: 'content', value: 'content: '},
- { attribute: 'style', text: 'cue', value: 'cue: '},
- { attribute: 'style', text: 'cue-after', value: 'cue-after: '},
- { attribute: 'style', text: 'cue-before', value: 'cue-before: '},
- { attribute: 'style', text: 'cursor', value: 'cursor: '},
- { attribute: 'style', text: 'direction', value: 'direction: '},
- { attribute: 'style', text: 'display', value: 'display: '},
- { attribute: 'style', text: 'elevation', value: 'elevation: '},
- { attribute: 'style', text: 'filter', value: 'filter: '},
- { attribute: 'style', text: 'float', value: 'float: '},
- { attribute: 'style', text: 'font-family', value: 'font-family: '},
- { attribute: 'style', text: 'font-size', value: 'font-size: '},
- { attribute: 'style', text: 'font-size-adjust', value: 'font-size-adjust: '},
- { attribute: 'style', text: 'font-style', value: 'font-style: '},
- { attribute: 'style', text: 'font-variant', value: 'font-variant: '},
- { attribute: 'style', text: 'font-weight', value: 'font-weight: '},
- { attribute: 'style', text: 'height', value: 'height: '},
- { attribute: 'style', text: '!important', value: '!important: '},
- { attribute: 'style', text: 'left', value: 'left: '},
- { attribute: 'style', text: 'letter-spacing', value: 'letter-spacing: '},
- { attribute: 'style', text: 'line-height', value: 'line-height: '},
- { attribute: 'style', text: 'list-style', value: 'list-style: '},
- { attribute: 'style', text: 'list-style-image', value: 'list-style-image: '},
- { attribute: 'style', text: 'list-style-position', value: 'list-style-position: '},
- { attribute: 'style', text: 'list-style-type', value: 'list-style-type: '},
- { attribute: 'style', text: 'margin', value: 'margin: '},
- { attribute: 'style', text: 'margin-bottom', value: 'margin-bottom: '},
- { attribute: 'style', text: 'margin-left', value: 'margin-left: '},
- { attribute: 'style', text: 'margin-right', value: 'margin-right: '},
- { attribute: 'style', text: 'margin-top', value: 'margin-top: '},
- { attribute: 'style', text: 'marks', value: 'marks: '},
- { attribute: 'style', text: 'max-height', value: 'max-height: '},
- { attribute: 'style', text: 'min-height', value: 'min-height: '},
- { attribute: 'style', text: 'max-width', value: 'max-width: '},
- { attribute: 'style', text: 'min-width', value: 'min-width: '},
- { attribute: 'style', text: 'orphans', value: 'orphans: '},
- { attribute: 'style', text: 'overflow', value: 'overflow: '},
- { attribute: 'style', text: 'padding', value: 'padding: '},
- { attribute: 'style', text: 'padding-bottom', value: 'padding-bottom: '},
- { attribute: 'style', text: 'padding-left', value: 'padding-left: '},
- { attribute: 'style', text: 'padding-right', value: 'padding-right: '},
- { attribute: 'style', text: 'padding-top', value: 'padding-top: '},
- { attribute: 'style', text: 'page-break-after', value: 'page-break-after: '},
- { attribute: 'style', text: 'page-break-before', value: 'page-break-before: '},
- { attribute: 'style', text: 'pause', value: 'pause: '},
- { attribute: 'style', text: 'pause-after', value: 'pause-after: '},
- { attribute: 'style', text: 'pause-before', value: 'pause-before: '},
- { attribute: 'style', text: 'pitch', value: 'pitch: '},
- { attribute: 'style', text: 'pitch-range', value: 'pitch-range: '},
- { attribute: 'style', text: 'play-during', value: 'play-during: '},
- { attribute: 'style', text: 'position', value: 'position: '},
- { attribute: 'style', text: 'richness', value: 'richness: '},
- { attribute: 'style', text: 'right', value: 'right: '},
- { attribute: 'style', text: 'row-span', value: 'row-span: '},
- { attribute: 'style', text: 'size', value: 'size: '},
- { attribute: 'style', text: 'speak', value: 'speak: '},
- { attribute: 'style', text: 'speak-date', value: 'speak-date: '},
- { attribute: 'style', text: 'speak-header', value: 'speak-header: '},
- { attribute: 'style', text: 'speak-numeral', value: 'speak-numeral: '},
- { attribute: 'style', text: 'speak-punctuation', value: 'speak-punctuation: '},
- { attribute: 'style', text: 'speak-time', value: 'speak-time: '},
- { attribute: 'style', text: 'speech-rate', value: 'speech-rate: '},
- { attribute: 'style', text: 'stress', value: 'stress: '},
- { attribute: 'style', text: 'table-layout', value: 'table-layout: '},
- { attribute: 'style', text: 'text-align', value: 'text-align: '},
- { attribute: 'style', text: 'text-decoration', value: 'text-decoration: '},
- { attribute: 'style', text: 'text-indent', value: 'text-indent: '},
- { attribute: 'style', text: 'text-shadow', value: 'text-shadow: '},
- { attribute: 'style', text: 'text-transform', value: 'text-transform: '},
- { attribute: 'style', text: 'top', value: 'top: '},
- { attribute: 'style', text: 'vertical-align', value: 'vertical-align: '},
- { attribute: 'style', text: 'visibility', value: 'visibility: '},
- { attribute: 'style', text: 'voice-family', value: 'voice-family: '},
- { attribute: 'style', text: 'volume', value: 'volume: '},
- { attribute: 'style', text: 'white-space', value: 'white-space: '},
- { attribute: 'style', text: 'widows', value: 'widows: '},
- { attribute: 'style', text: 'width', value: 'width: '},
- { attribute: 'style', text: 'word-spacing', value: 'word-spacing: '},
- { attribute: 'style', text: 'z-index', value: 'z-index: '}
+ ['href', 'http://', 'http://'],
+ ['href', 'https://', 'https://'],
+ ['href', 'ftp://', 'ftp://'],
+ ['href', 'mailto:', 'mailto:'],
+ ['href', '#', '#"'],
+ ['target', '_top', '_top"'],
+ ['target', '_self', '_self"'],
+ ['target', '_parent', '_parent"'],
+ ['target', '_blank', '_blank"'],
+ ['face', 'Verdana', 'Verdana"'],
+ ['face', 'Arial', 'Arial"'],
+ ['face', 'Tahoma', 'Tahoma"'],
+ ['face', 'Courier New', 'Courier New"'],
+ ['face', 'Times New Roman', 'Times New Roman"'],
+ ['size', '1', '1"'],
+ ['size', '2', '2"'],
+ ['size', '3', '3"'],
+ ['size', '4', '4"'],
+ ['size', '5', '5"'],
+ ['size', '6', '6"'],
+ ['size', '+1', '+1"'],
+ ['size', '+2', '+2"'],
+ ['size', '+3', '+3"'],
+ ['size', '+4', '+4"'],
+ ['size', '+5', '+5"'],
+ ['size', '+6', '+6"'],
+ ['size', '-1', '-1"'],
+ ['size', '-2', '-2"'],
+ ['size', '-3', '-3"'],
+ ['size', '-4', '-4"'],
+ ['size', '-5', '-5"'],
+ ['size', '-6', '-6"'],
+ ['align', 'center', 'center"'],
+ ['align', 'left', 'left"'],
+ ['align', 'right', 'right"'],
+ ['align', 'justify', 'justify"'],
+ ['dir', 'rtl', 'rtl"'],
+ ['dir', 'ltr', 'ltr"'],
+ ['lang', 'Afrikaans ', 'af"'],
+ ['lang', 'Albanian ', 'sq"'],
+ ['lang', 'Arabic ', 'ar"'],
+ ['lang', 'Basque ', 'eu"'],
+ ['lang', 'Breton ', 'br"'],
+ ['lang', 'Bulgarian ', 'bg"'],
+ ['lang', 'Belarusian ', 'be"'],
+ ['lang', 'Catalan ', 'ca"'],
+ ['lang', 'Chinese ', 'zh"'],
+ ['lang', 'Croatian ', 'hr"'],
+ ['lang', 'Czech ', 'cs"'],
+ ['lang', 'Danish ', 'da"'],
+ ['lang', 'Dutch ', 'nl"'],
+ ['lang', 'English ', 'en"'],
+ ['lang', 'Estonian ', 'et"'],
+ ['lang', 'Faeroese ', 'fo"'],
+ ['lang', 'Farsi ', 'fa"'],
+ ['lang', 'Finnish ', 'fi"'],
+ ['lang', 'French ', 'fr"'],
+ ['lang', 'Gaelic ', 'gd"'],
+ ['lang', 'German ', 'de"'],
+ ['lang', 'Greek ', 'el"'],
+ ['lang', 'Hebrew ', 'he"'],
+ ['lang', 'Hindi ', 'hi"'],
+ ['lang', 'Hungarian ', 'hu"'],
+ ['lang', 'Icelandic ', 'is"'],
+ ['lang', 'Indonesian ', 'id"'],
+ ['lang', 'Italian ', 'it"'],
+ ['lang', 'Japanese ', 'ja"'],
+ ['lang', 'Korean ', 'ko"'],
+ ['lang', 'Latvian ', 'lv"'],
+ ['lang', 'Lithuanian ', 'lt"'],
+ ['lang', 'Macedonian ', 'mk"'],
+ ['lang', 'Malaysian ', 'ms"'],
+ ['lang', 'Maltese ', 'mt"'],
+ ['lang', 'Norwegian ', 'no"'],
+ ['lang', 'Polish ', 'pl"'],
+ ['lang', 'Portuguese ', 'pt"'],
+ ['lang', 'Rhaeto-Romanic ', 'rm"'],
+ ['lang', 'Romanian ', 'ro"'],
+ ['lang', 'Russian ', 'ru"'],
+ ['lang', 'Sami ', 'sz"'],
+ ['lang', 'Serbian ', 'sr"'],
+ ['lang', 'Setswana ', 'tn"'],
+ ['lang', 'Slovak ', 'sk"'],
+ ['lang', 'Slovenian ', 'sl"'],
+ ['lang', 'Spanish ', 'es"'],
+ ['lang', 'Sutu ', 'sx"'],
+ ['lang', 'Swedish ', 'sv"'],
+ ['lang', 'Thai ', 'th"'],
+ ['lang', 'Tsonga ', 'ts"'],
+ ['lang', 'Turkish ', 'tr"'],
+ ['lang', 'Ukrainian ', 'uk"'],
+ ['lang', 'Urdu ', 'ur"'],
+ ['lang', 'Vietnamese ', 'vi"'],
+ ['lang', 'Xhosa ', 'xh"'],
+ ['lang', 'Yiddish ', 'yi"'],
+ ['lang', 'Zulu', 'zu"'],
+ ['style', 'azimuth', 'azimuth: '],
+ ['style', 'background', 'background: '],
+ ['style', 'background-attachment', 'background-attachment: '],
+ ['style', 'background-color', 'background-color: '],
+ ['style', 'background-image', 'background-image: '],
+ ['style', 'background-position', 'background-position: '],
+ ['style', 'background-repeat', 'background-repeat: '],
+ ['style', 'border', 'border: '],
+ ['style', 'border-bottom', 'border-bottom: '],
+ ['style', 'border-left', 'border-left: '],
+ ['style', 'border-right', 'border-right: '],
+ ['style', 'border-top', 'border-top: '],
+ ['style', 'border-bottom-color', 'border-bottom-color: '],
+ ['style', 'border-left-color', 'border-left-color: '],
+ ['style', 'border-right-color', 'border-right-color: '],
+ ['style', 'border-top-color', 'border-top-color: '],
+ ['style', 'border-bottom-style', 'border-bottom-style: '],
+ ['style', 'border-left-style', 'border-left-style: '],
+ ['style', 'border-right-style', 'border-right-style: '],
+ ['style', 'border-top-style', 'border-top-style: '],
+ ['style', 'border-bottom-width', 'border-bottom-width: '],
+ ['style', 'border-left-width', 'border-left-width: '],
+ ['style', 'border-right-width', 'border-right-width: '],
+ ['style', 'border-top-width', 'border-top-width: '],
+ ['style', 'border-collapse', 'border-collapse: '],
+ ['style', 'border-color', 'border-color: '],
+ ['style', 'border-style', 'border-style: '],
+ ['style', 'border-width', 'border-width: '],
+ ['style', 'bottom', 'bottom: '],
+ ['style', 'caption-side', 'caption-side: '],
+ ['style', 'cell-spacing', 'cell-spacing: '],
+ ['style', 'clear', 'clear: '],
+ ['style', 'clip', 'clip: '],
+ ['style', 'color', 'color: '],
+ ['style', 'column-span', 'column-span: '],
+ ['style', 'content', 'content: '],
+ ['style', 'cue', 'cue: '],
+ ['style', 'cue-after', 'cue-after: '],
+ ['style', 'cue-before', 'cue-before: '],
+ ['style', 'cursor', 'cursor: '],
+ ['style', 'direction', 'direction: '],
+ ['style', 'display', 'display: '],
+ ['style', 'elevation', 'elevation: '],
+ ['style', 'filter', 'filter: '],
+ ['style', 'float', 'float: '],
+ ['style', 'font-family', 'font-family: '],
+ ['style', 'font-size', 'font-size: '],
+ ['style', 'font-size-adjust', 'font-size-adjust: '],
+ ['style', 'font-style', 'font-style: '],
+ ['style', 'font-variant', 'font-variant: '],
+ ['style', 'font-weight', 'font-weight: '],
+ ['style', 'height', 'height: '],
+ ['style', '!important', '!important: '],
+ ['style', 'left', 'left: '],
+ ['style', 'letter-spacing', 'letter-spacing: '],
+ ['style', 'line-height', 'line-height: '],
+ ['style', 'list-style', 'list-style: '],
+ ['style', 'list-style-image', 'list-style-image: '],
+ ['style', 'list-style-position', 'list-style-position: '],
+ ['style', 'list-style-type', 'list-style-type: '],
+ ['style', 'margin', 'margin: '],
+ ['style', 'margin-bottom', 'margin-bottom: '],
+ ['style', 'margin-left', 'margin-left: '],
+ ['style', 'margin-right', 'margin-right: '],
+ ['style', 'margin-top', 'margin-top: '],
+ ['style', 'marks', 'marks: '],
+ ['style', 'max-height', 'max-height: '],
+ ['style', 'min-height', 'min-height: '],
+ ['style', 'max-width', 'max-width: '],
+ ['style', 'min-width', 'min-width: '],
+ ['style', 'orphans', 'orphans: '],
+ ['style', 'overflow', 'overflow: '],
+ ['style', 'padding', 'padding: '],
+ ['style', 'padding-bottom', 'padding-bottom: '],
+ ['style', 'padding-left', 'padding-left: '],
+ ['style', 'padding-right', 'padding-right: '],
+ ['style', 'padding-top', 'padding-top: '],
+ ['style', 'page-break-after', 'page-break-after: '],
+ ['style', 'page-break-before', 'page-break-before: '],
+ ['style', 'pause', 'pause: '],
+ ['style', 'pause-after', 'pause-after: '],
+ ['style', 'pause-before', 'pause-before: '],
+ ['style', 'pitch', 'pitch: '],
+ ['style', 'pitch-range', 'pitch-range: '],
+ ['style', 'play-during', 'play-during: '],
+ ['style', 'position', 'position: '],
+ ['style', 'richness', 'richness: '],
+ ['style', 'right', 'right: '],
+ ['style', 'row-span', 'row-span: '],
+ ['style', 'size', 'size: '],
+ ['style', 'speak', 'speak: '],
+ ['style', 'speak-date', 'speak-date: '],
+ ['style', 'speak-header', 'speak-header: '],
+ ['style', 'speak-numeral', 'speak-numeral: '],
+ ['style', 'speak-punctuation', 'speak-punctuation: '],
+ ['style', 'speak-time', 'speak-time: '],
+ ['style', 'speech-rate', 'speech-rate: '],
+ ['style', 'stress', 'stress: '],
+ ['style', 'table-layout', 'table-layout: '],
+ ['style', 'text-align', 'text-align: '],
+ ['style', 'text-decoration', 'text-decoration: '],
+ ['style', 'text-indent', 'text-indent: '],
+ ['style', 'text-shadow', 'text-shadow: '],
+ ['style', 'text-transform', 'text-transform: '],
+ ['style', 'top', 'top: '],
+ ['style', 'vertical-align', 'vertical-align: '],
+ ['style', 'visibility', 'visibility: '],
+ ['style', 'voice-family', 'voice-family: '],
+ ['style', 'volume', 'volume: '],
+ ['style', 'white-space', 'white-space: '],
+ ['style', 'widows', 'widows: '],
+ ['style', 'width', 'width: '],
+ ['style', 'word-spacing', 'word-spacing: '],
+ ['style', 'z-index', 'z-index: ']
],
subTags: {
'table': {
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/RemoveFormat/remove-format.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/RemoveFormat/remove-format.js
index 1370ba18d65131539087fe1d2da54c4a5da43a07..66f68dfea8837bc954cfc68512057eab3de9279b 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/RemoveFormat/remove-format.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/RemoveFormat/remove-format.js
@@ -27,8 +27,7 @@
/*
* Remove Format Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.RemoveFormat', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.RemoveFormat = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -97,13 +96,14 @@ Ext.define('HTMLArea.RemoveFormat', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.getHelpTip('', title),
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
close: {
@@ -184,7 +184,7 @@ Ext.define('HTMLArea.RemoveFormat', {
];
var params = {};
Ext.each(fields, function (field) {
- params[field] = this.dialog.down('component[itemId=' + field + ']').getValue();
+ params[field] = this.dialog.find('itemId', field)[0].getValue();
}, this);
if (params['allHtml'] || params['formatting'] || params['spaces'] || params['images'] || params['msWordFormatting'] || params['typographical']) {
this.applyRequest(params);
@@ -293,8 +293,6 @@ Ext.define('HTMLArea.RemoveFormat', {
}
if (params['allContent']) {
editor.setHTML(html);
- // Initialize a collapsed selection at the beginning of content
- this.editor.selectNode(this.editor.document.body, true);
} else {
editor.insertHTML(html);
}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js
index 02e35926ea0c6ad8eb34fc7217a237581ddbf949..142f8058b745a90e02957089027eca595cb9df64 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js
@@ -27,8 +27,7 @@
/*
* SelectFont Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.SelectFont', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.SelectFont = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -79,18 +78,17 @@ Ext.define('HTMLArea.SelectFont', {
tooltip: this.localize(buttonId.toLowerCase()),
storeUrl: this.buttonsConfiguration[dropDown[2]].dataUrl,
action: 'onChange',
- template: '<div data-qtip="{value}"' + (this.disablePCexamples ? '' : 'style="' + dropDown[3] + '"') + ' class="htmlarea-combo-list-item">{text}</div>'
+ tpl: this.disablePCexamples ? '' : '<tpl for="."><div ext:qtip="{value}" style="' + dropDown[3] + '" class="x-combo-list-item">{text}</div></tpl>'
};
if (this.buttonsConfiguration[dropDown[2]]) {
if (this.editorConfiguration.buttons[dropDown[2]].width) {
dropDownConfiguration.width = parseInt(this.editorConfiguration.buttons[dropDown[2]].width, 10);
}
- dropDownConfiguration.listConfig = {};
if (this.editorConfiguration.buttons[dropDown[2]].listWidth) {
- dropDownConfiguration.listConfig.width = parseInt(this.editorConfiguration.buttons[dropDown[2]].listWidth, 10);
+ dropDownConfiguration.listWidth = parseInt(this.editorConfiguration.buttons[dropDown[2]].listWidth, 10);
}
if (this.editorConfiguration.buttons[dropDown[2]].maxHeight) {
- dropDownConfiguration.listConfig.maxHeight = parseInt(this.editorConfiguration.buttons[dropDown[2]].maxHeight, 10);
+ dropDownConfiguration.maxHeight = parseInt(this.editorConfiguration.buttons[dropDown[2]].maxHeight, 10);
}
}
this.registerDropDown(dropDownConfiguration);
@@ -103,8 +101,8 @@ Ext.define('HTMLArea.SelectFont', {
* The list of buttons added by this plugin
*/
dropDownList: [
- ['FontName', null, 'fontstyle', 'font-family:{value};'],
- ['FontSize', null, 'fontsize', 'font-size:{value};']
+ ['FontName', null, 'fontstyle', 'font-family:{value};text-align:left;font-size:11px;'],
+ ['FontSize', null, 'fontsize', 'text-align:left;font-size:{value};']
],
/*
* Conversion object: button name to corresponding style property name
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js
index 8d22801219c8825031b43544ab07aef222b2f7a8..3db138da876c78f26ec3d14141db190487db935d 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/SpellChecker/spell-checker.js
@@ -30,8 +30,7 @@
/*
* Spell Checker Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.SpellChecker', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.SpellChecker = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -74,26 +73,17 @@ Ext.define('HTMLArea.SpellChecker', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
- displayField: 'text',
+ combo: {
editable: true,
- forceSelection: true,
- helpIcon: true,
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
- model: 'HTMLArea.model.Default',
- queryMode: 'local',
selectOnFocus: true,
typeAhead: true,
triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local',
valueField: 'value',
- width: 160,
- xtype: 'combobox'
+ displayField: 'text',
+ helpIcon: true,
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
}
},
/*
@@ -115,7 +105,7 @@ Ext.define('HTMLArea.SpellChecker', {
this.getWindowDimensions(
{
width: 740,
- height: 500
+ height: 600
},
buttonId
)
@@ -132,15 +122,15 @@ Ext.define('HTMLArea.SpellChecker', {
* @return void
*/
openDialogue: function (buttonId, title, dimensions) {
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
cls: 'htmlarea-window',
- bodyCls: 'spell-check',
+ bodyCssClass: 'spell-check',
border: false,
- layout: 'fit',
width: dimensions.width,
- height: dimensions.height,
- resizable: true,
+ height: Ext.isIE ? dimensions.height - 50 : 'auto',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(buttonId).iconCls,
listeners: {
afterrender: {
@@ -155,11 +145,9 @@ Ext.define('HTMLArea.SpellChecker', {
scope: this
}
},
- items: [
- {
+ items: [{
// The hidden form
xtype: 'form',
- layout: 'auto',
method: 'POST',
itemId: 'spell-check-form',
url: this.pageTSconfiguration.path,
@@ -193,219 +181,195 @@ Ext.define('HTMLArea.SpellChecker', {
value: this.userUid
},{
xtype: 'hidden',
- name: 'enablePersonalDicts',
+ name:'enablePersonalDicts',
value: this.enablePersonalDicts
},{
xtype: 'hidden',
- name: 'restrictToDictionaries',
+ name:'restrictToDictionaries',
value: this.restrictToDictionaries
- },{
- xtype: 'hidden',
- name: 'accept-charset',
- value: this.contentCharset.toUpperCase()
- },{
- xtype: 'hidden',
- name: 'target',
- value: 'contentframe'
}
]
},{
// The iframe
- xtype: 'component',
+ xtype: 'box',
itemId: 'spell-check-iframe',
+ width: dimensions.width - 225,
autoEl: {
name: 'contentframe',
tag: 'iframe',
cls: 'contentframe',
- src: Ext.isIE && Ext.isSecure ? HTMLArea.editorUrl + 'popups/blank.html' : 'about:blank'
+ src: Ext.isGecko ? 'javascript:void(0);' : HTMLArea.editorUrl + 'popups/blank.html'
}
- }
- ],
- dockedItems: [
- {
- xtype: 'panel',
- border: 0,
- bodyCls: 'spell-check',
- dock: 'left',
- itemId: 'controls',
- layout:'anchor',
- weight: 10,
- width: 200,
- items: [
- {
- // The original word
- xtype: 'fieldset',
- title: this.localize('Original word'),
- cls: 'controls',
- labelWidth: 0,
- defaults: {
- hideLabel: true,
- disabled: true,
- minWidth: 160
- },
- items: [{
- xtype: 'textfield',
- itemId: 'word',
- disabled: false,
- hideLabel: true,
- width: 160
- },
- this.buildButtonConfig('Revert', this.onRevertClick)
- ]
+ },{
+ // The original word
+ xtype: 'fieldset',
+ title: this.localize('Original word'),
+ cls: 'controls',
+ labelWidth: 0,
+ defaults: {
+ hideLabel: true,
+ disabled: true,
+ minWidth: 160
+ },
+ items: [{
+ xtype: 'textfield',
+ itemId: 'word',
+ disabled: false
+ },
+ this.buildButtonConfig('Revert', this.onRevertClick)
+ ]
+ },{
+ // The replacement word and actions
+ xtype: 'fieldset',
+ title: this.localize('Replacement'),
+ cls: 'controls',
+ defaultType: 'button',
+ labelWidth: 0,
+ defaults: {
+ hideLabel: true,
+ disabled: true,
+ minWidth: 160
+ },
+ items: [{
+ xtype: 'textfield',
+ disabled: false,
+ width: 160,
+ itemId: 'replacement'
+ },{
+ itemId: 'replace',
+ text: this.localize('Replace'),
+ listeners: {
+ click: {
+ fn: this.onReplaceClick,
+ scope: this
+ }
+ }
},{
- // The replacement word and actions
- xtype: 'fieldset',
- title: this.localize('Replacement'),
- cls: 'controls',
- defaultType: 'button',
- labelWidth: 0,
- defaults: {
- hideLabel: true,
- disabled: true,
- minWidth: 160
- },
- items: [{
- xtype: 'textfield',
- disabled: false,
- itemId: 'replacement',
- width: 160
- },{
- itemId: 'replace',
- text: this.localize('Replace'),
- listeners: {
- click: {
- fn: this.onReplaceClick,
- scope: this
- }
- }
- },{
- itemId: 'replaceAll',
- text: this.localize('Replace all'),
- listeners: {
- click: {
- fn: this.onReplaceAllClick,
- scope: this
- }
- }
- },{
- itemId: 'ignore',
- text: this.localize('Ignore'),
- listeners: {
- click: {
- fn: this.onIgnoreClick,
- scope: this
- }
- }
- },{
- itemId: 'ignoreAll',
- text: this.localize('Ignore all'),
- listeners: {
- click: {
- fn: this.onIgnoreAllClick,
- scope: this
- }
- }
- },{
- itemId: 'learn',
- text: this.localize('Learn'),
- hidden: !this.enablePersonalDicts,
- listeners: {
- click: {
- fn: this.onLearnClick,
- scope: this
- }
- }
+ itemId: 'replaceAll',
+ text: this.localize('Replace all'),
+ listeners: {
+ click: {
+ fn: this.onReplaceAllClick,
+ scope: this
}
- ]
+ }
},{
- // The suggestions
- xtype: 'fieldset',
- title: this.localize('Suggestions'),
- cls: 'controls',
- labelWidth: 0,
- defaults: {
- hideLabel: true,
- minWidth: 160
- },
- items: [
- Ext.applyIf({
- itemId: 'suggestions',
- store: new Ext.data.ArrayStore({
- model: this.configDefaults['combobox']['model'],
- storeId: 'HTMLArea' + '-store-' + this.name + '-suggestions'
- }),
- listeners: {
- select: {
- fn: this.onSuggestionSelect,
- scope: this
- }
- }
- }, this.configDefaults['combobox'])
- ]
+ itemId: 'ignore',
+ text: this.localize('Ignore'),
+ listeners: {
+ click: {
+ fn: this.onIgnoreClick,
+ scope: this
+ }
+ }
+ },{
+ itemId: 'ignoreAll',
+ text: this.localize('Ignore all'),
+ listeners: {
+ click: {
+ fn: this.onIgnoreAllClick,
+ scope: this
+ }
+ }
},{
- // The dictionaries
- xtype: 'fieldset',
- title: this.localize('Dictionary'),
- cls: 'controls',
- defaultType: 'button',
- labelWidth: 0,
- defaults: {
- hideLabel: true,
- disabled: true,
- minWidth: 160
- },
- items: [
- Ext.applyIf({
- itemId: 'dictionaries',
- disabled: false,
- store: new Ext.data.ArrayStore({
- model: this.configDefaults['combobox']['model'],
- storeId: 'HTMLArea' + '-store-' + this.name + '-dictionaries'
- }),
- listeners: {
- select: {
- fn: this.onDictionarySelect,
- scope: this
- }
- }
- }, this.configDefaults['combobox']),
- {
- itemId: 'recheck',
- text: this.localize('Re-check'),
- listeners: {
- click: {
- fn: this.onRecheckClick,
- scope: this
- }
- }
+ itemId: 'learn',
+ text: this.localize('Learn'),
+ hidden: !this.enablePersonalDicts,
+ listeners: {
+ click: {
+ fn: this.onLearnClick,
+ scope: this
}
- ]
+ }
}
]
},{
- xtype: 'toolbar',
- itemId: 'bottomToolbar',
- dock: 'bottom',
- ui: 'footer',
+ // The suggestions
+ xtype: 'fieldset',
+ title: this.localize('Suggestions'),
+ cls: 'controls',
+ labelWidth: 0,
defaults: {
+ hideLabel: true,
+ minWidth: 160
+ },
+ items: [
+ Ext.apply({
+ xtype: 'combo',
+ itemId: 'suggestions',
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [{name: 'text'}, {name: 'value'}],
+ data: []
+ }),
+ listeners: {
+ select: {
+ fn: this.onSuggestionSelect,
+ scope: this
+ }
+ }
+ }, this.configDefaults['combo'])
+ ]
+ },{
+ // The dictionaries
+ xtype: 'fieldset',
+ title: this.localize('Dictionary'),
+ cls: 'controls',
+ defaultType: 'button',
+ labelWidth: 0,
+ defaults: {
+ hideLabel: true,
disabled: true,
- minWidth: 75
+ minWidth: 160
},
items: [
+ Ext.apply({
+ xtype: 'combo',
+ itemId: 'dictionaries',
+ disabled: false,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [{name: 'text'}, {name: 'value'}],
+ data: []
+ }),
+ listeners: {
+ select: {
+ fn: this.onDictionarySelect,
+ scope: this
+ }
+ }
+ }, this.configDefaults['combo']),
{
- xtype: 'tbtext',
- itemId: 'spell-check-status',
- text: this.localize('Please wait. Calling spell checker.'),
- cls: 'status-wait',
- disabled: false
- },
- '->',
- this.buildButtonConfig('OK', this.onOK),
- this.buildButtonConfig('Info', this.onInfoClick),
- this.buildButtonConfig('Cancel', this.onCancel)
+ itemId: 'recheck',
+ text: this.localize('Re-check'),
+ listeners: {
+ click: {
+ fn: this.onRecheckClick,
+ scope: this
+ }
+ }
+ }
]
}
- ]
+ ],
+ bbar: {
+ defaults: {
+ disabled: true
+ },
+ items: [
+ {
+ xtype: 'tbtext',
+ itemId: 'spell-check-status',
+ text: this.localize('Please wait. Calling spell checker.'),
+ cls: 'status-wait',
+ disabled: false
+ },
+ '->',
+ this.buildButtonConfig('OK', this.onOK),
+ this.buildButtonConfig('Info', this.onInfoClick),
+ this.buildButtonConfig('Cancel', this.onCancel)
+ ]
+ }
});
this.show();
},
@@ -413,16 +377,6 @@ Ext.define('HTMLArea.SpellChecker', {
* Handler invoked after the window has been rendered
*/
onWindowAfterRender: function () {
- var combos = this.dialog.query('combobox');
- Ext.each(combos, function (combo) {
- // Somehow getStore method got lost...
- if (!Ext.isFunction(combo.getStore)) {
- combo.getStore = function () {
- return combo.store;
- };
- }
- });
- this.onWindowResize(this.dialog, this.dialog.getWidth(), this.dialog.getHeight());
// True when some word has been modified
this.modified = false;
// Array of words to add to the personal dictionary
@@ -430,11 +384,12 @@ Ext.define('HTMLArea.SpellChecker', {
// List of word pairs to add to replacement list of the personal dictionary
this.addToReplacementList = [];
// Initial submit
- this.dialog.getComponent('spell-check-form').submit({
+ this.dialog.getComponent('spell-check-form').getForm().getEl().set({
target: 'contentframe',
'accept-charset': this.contentCharset.toUpperCase()
});
- this.status = this.dialog.getDockedComponent('bottomToolbar').getComponent('spell-check-status');
+ this.dialog.getComponent('spell-check-form').getForm().submit();
+ this.status = this.dialog.getBottomToolbar().getComponent('spell-check-status');
this.statusIconClass = 'status-wait';
},
/*
@@ -443,7 +398,7 @@ Ext.define('HTMLArea.SpellChecker', {
onWindowResize: function (window, width, height) {
var frame = window.getComponent('spell-check-iframe').getEl();
if (frame) {
- frame.setSize(width - window.getDockedComponent('controls').getWidth() - 12, window.getDockedComponent('controls').getHeight());
+ frame.setSize(width - 225, height - 75);
}
},
/*
@@ -492,7 +447,7 @@ Ext.define('HTMLArea.SpellChecker', {
});
return false;
} else {
- return this.callParent(arguments);
+ return HTMLArea.SpellChecker.superclass.onCancel.call(this);
}
},
/*
@@ -503,9 +458,9 @@ Ext.define('HTMLArea.SpellChecker', {
* @return void
*/
setStatusIconClass: function (iconCls) {
- this.status.removeCls(this.statusIconClass);
+ this.status.removeClass(this.statusIconClass);
this.statusIconClass = iconCls;
- this.status.addCls(this.statusIconClass);
+ this.status.addClass(this.statusIconClass);
},
/*
* Clean away span elements from the text before leaving or re-submitting
@@ -577,10 +532,10 @@ Ext.define('HTMLArea.SpellChecker', {
link.onclick = function (event) { return false; };
}, this);
// Enable buttons
- Ext.each(this.dialog.query('button'), function (button) {
+ Ext.each(this.dialog.findByType('button'), function (button) {
button.setDisabled(false);
});
- Ext.each(this.dialog.getDockedComponent('bottomToolbar').query('button'), function (button) {
+ Ext.each(this.dialog.getBottomToolbar().findByType('button'), function (button) {
button.setDisabled(false);
});
if (this.misspelledWords.length) {
@@ -590,14 +545,14 @@ Ext.define('HTMLArea.SpellChecker', {
// Populate the dictionaries combo
var dictionaries = contentWindow.dictionaries.split(/,/);
if (dictionaries.length) {
- var select = this.dialog.down('component[itemId=dictionaries]');
+ var select = this.dialog.find('itemId', 'dictionaries')[0];
var store = select.getStore();
store.removeAll();
Ext.each(dictionaries, function (dictionary) {
- store.add({
+ store.add(new store.recordType({
text: dictionary,
value: dictionary
- });
+ }));
});
select.setValue(contentWindow.selectedDictionary);
var selectedIndex = store.find('value', contentWindow.selectedDictionary);
@@ -673,8 +628,8 @@ Ext.define('HTMLArea.SpellChecker', {
HTMLArea.DOM.addClass(word, 'htmlarea-spellcheck-same');
}
}, this);
- this.dialog.down('component[itemId=replaceAll]').setDisabled(occurrences.length <= 1);
- this.dialog.down('component[itemId=ignoreAll]').setDisabled(occurrences.length <= 1);
+ this.dialog.find('itemId', 'replaceAll')[0].setDisabled(occurrences.length <= 1);
+ this.dialog.find('itemId', 'ignoreAll')[0].setDisabled(occurrences.length <= 1);
// Display status
var txt;
var txt2;
@@ -697,22 +652,22 @@ Ext.define('HTMLArea.SpellChecker', {
} else {
suggestions = [];
}
- var select = this.dialog.down('component[itemId=suggestions]');
+ var select = this.dialog.find('itemId', 'suggestions')[0];
var store = select.getStore();
store.removeAll();
Ext.each(suggestions, function (suggestion) {
- store.add({
+ store.add(new store.recordType({
text: suggestion,
value: suggestion
- });
+ }));
});
// Update the current word
- this.dialog.down('component[itemId=word]').setValue(this.currentElement.htmlareaOriginalWord);
+ this.dialog.find('itemId', 'word')[0].setValue(this.currentElement.htmlareaOriginalWord);
if (suggestions.length > 0) {
select.setValue(store.getAt(0).get('value'));
select.fireEvent('select', select, store.getAt(0), 0);
} else {
- this.dialog.down('component[itemId=replacement]').setValue(this.currentElement.innerHTML);
+ this.dialog.find('itemId', 'replacement')[0].setValue(this.currentElement.innerHTML);
}
return false;
},
@@ -732,19 +687,19 @@ Ext.define('HTMLArea.SpellChecker', {
* Handler invoked when a suggestion is selected
*/
onSuggestionSelect: function (select, record, index) {
- this.dialog.down('component[itemId=replacement]').setValue(record.get('value'));
+ this.dialog.find('itemId', 'replacement')[0].setValue(record.get('value'));
},
/*
* Handler invoked when a dictionary is selected
*/
onDictionarySelect: function (select, record, index) {
- this.dialog.down('component[itemId=dictionary]').setValue(record.get('value'));
+ this.dialog.find('itemId', 'dictionary')[0].setValue(record.get('value'));
},
/*
* Handler invoked when the Revert button is clicked
*/
onRevertClick: function () {
- this.dialog.down('component[itemId=replacement]').setValue(this.currentElement.htmlareaOriginalWord);
+ this.dialog.find('itemId', 'replacement')[0].setValue(this.currentElement.htmlareaOriginalWord);
this.replaceWord(this.currentElement);
HTMLArea.DOM.removeClass(this.currentElement, 'htmlarea-spellcheck-fixed');
HTMLArea.DOM.addClass(this.currentElement, 'htmlarea-spellcheck-error');
@@ -758,7 +713,7 @@ Ext.define('HTMLArea.SpellChecker', {
HTMLArea.DOM.removeClass(element, 'htmlarea-spellcheck-hover');
HTMLArea.DOM.addClass(element, 'htmlarea-spellcheck-fixed');
element.htmlareaFixed = true;
- var replacement = this.dialog.down('component[itemId=replacement]').getValue();
+ var replacement = this.dialog.find('itemId', 'replacement')[0].getValue();
if (element.innerHTML != replacement) {
this.addToReplacementList.push([element.innerHTML, replacement]);
element.innerHTML = replacement;
@@ -804,14 +759,14 @@ Ext.define('HTMLArea.SpellChecker', {
* Handler invoked when the Ignore button is clicked
*/
onIgnoreClick: function () {
- this.dialog.down('component[itemId=replacement]').setValue(this.currentElement.htmlareaOriginalWord);
+ this.dialog.find('itemId', 'replacement')[0].setValue(this.currentElement.htmlareaOriginalWord);
return this.onReplaceClick();
},
/*
* Handler invoked when the Ignore all button is clicked
*/
onIgnoreAllClick: function () {
- this.dialog.down('component[itemId=replacement]').setValue(this.currentElement.htmlareaOriginalWord);
+ this.dialog.find('itemId', 'replacement')[0].setValue(this.currentElement.htmlareaOriginalWord);
return this.onReplaceAllClick();
},
/*
@@ -826,19 +781,16 @@ Ext.define('HTMLArea.SpellChecker', {
*/
onRecheckClick: function () {
// Disable buttons
- Ext.each(this.dialog.query('button'), function (button) {
+ Ext.each(this.dialog.findByType('button'), function (button) {
button.setDisabled(true);
});
- Ext.each(this.dialog.getDockedComponent('bottomToolbar').query('button'), function (button) {
+ Ext.each(this.dialog.getBottomToolbar().findByType('button'), function (button) {
button.setDisabled(true);
});
- this.status.setText(this.localize('Please wait: changing dictionary to') + ': "' + this.dialog.down('component[itemId=dictionary]').getValue() + '".');
+ this.status.setText(this.localize('Please wait: changing dictionary to') + ': "' + this.dialog.find('itemId', 'dictionary')[0].getValue() + '".');
this.setStatusIconClass('status-wait');
- this.dialog.down('component[itemId=content]').setValue(this.cleanDocument(true));
- this.dialog.getComponent('spell-check-form').submit({
- target: 'contentframe',
- 'accept-charset': this.contentCharset.toUpperCase()
- });
+ this.dialog.find('itemId', 'content')[0].setValue(this.cleanDocument(true));
+ this.dialog.getComponent('spell-check-form').getForm().submit();
},
/*
* Handler invoked when the Info button is clicked
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
index cf6399203da77caefe38f5cb097c7f7d8e725048..912861eccd34b427caeb9b03eddc64c9d1a297e3 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
@@ -27,8 +27,7 @@
/*
* TYPO3 Color Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.TYPO3Color', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TYPO3Color = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -136,7 +135,7 @@ Ext.define('HTMLArea.TYPO3Color', {
this.getWindowDimensions(
{
width: 350,
- height: 330
+ height: 350
},
buttonId
),
@@ -154,9 +153,8 @@ Ext.define('HTMLArea.TYPO3Color', {
if (!this.disableColorPicker) {
paletteItems.push({
xtype: 'container',
- layout: 'fit',
items: {
- xtype: 'colorpicker',
+ xtype: 'colorpalette',
itemId: 'color-palette',
colors: this.colors,
cls: 'color-palette',
@@ -175,14 +173,13 @@ Ext.define('HTMLArea.TYPO3Color', {
if (this.colorsConfiguration) {
paletteItems.push({
xtype: 'container',
- layout: 'fit',
items: {
- xtype: 'colorpicker',
+ xtype: 'colorpalette',
itemId: 'custom-colors',
cls: 'htmlarea-custom-colors',
- data: this.colorsConfiguration,
+ colors: this.colorsConfiguration,
value: (element && element.style[this.styleProperty[buttonId]]) ? HTMLArea.util.Color.colorToHex(element.style[this.styleProperty[buttonId]]).substr(1, 6) : '',
- tpl: Ext.create('Ext.XTemplate',
+ tpl: new Ext.XTemplate(
'<tpl for="."><a href="#" class="color-{1}" hidefocus="on"><em><span style="background:#{1}" unselectable="on"> </span></em><span unselectable="on">{0}<span></a></tpl>'
),
allowReselect: true,
@@ -204,34 +201,27 @@ Ext.define('HTMLArea.TYPO3Color', {
xtype: 'displayfield',
itemId: 'show-color',
cls: 'show-color',
- fieldLabel: ' ',
- width: 180,
+ width: 60,
height: 22,
- labelSeparator: '',
- helpTitle: this.localize(buttonId),
- listeners: {
- afterrender: {
- fn: this.onAfterRender,
- scope: this
- }
- }
+ helpTitle: this.localize(buttonId)
});
itemsConfig.push({
itemId: 'color',
cls: 'color',
- width: 180,
+ width: 60,
+ minValue: 0,
value: (element && element.style[this.styleProperty[buttonId]]) ? HTMLArea.util.Color.colorToHex(element.style[this.styleProperty[buttonId]]).substr(1, 6) : '',
enableKeyEvents: true,
fieldLabel: this.localize(buttonId),
helpTitle: this.localize(buttonId),
listeners: {
- afterrender: {
- fn: this.onAfterRender,
- scope: this
- },
change: {
fn: this.onChange,
scope: this
+ },
+ afterrender: {
+ fn: this.onAfterRender,
+ scope: this
}
}
});
@@ -239,9 +229,9 @@ Ext.define('HTMLArea.TYPO3Color', {
xtype: 'fieldset',
title: this.localize('color_title'),
defaultType: 'textfield',
+ labelWidth: 175,
defaults: {
- helpIcon: false,
- labelWidth: 120
+ helpIcon: false
},
items: itemsConfig
};
@@ -250,15 +240,15 @@ Ext.define('HTMLArea.TYPO3Color', {
* On select handler: set the value of the color field, display the new color and update the other palette
*/
onSelect: function (palette, color) {
- this.dialog.down('component[itemId=color]').setValue(color);
+ this.dialog.find('itemId', 'color')[0].setValue(color);
this.showColor(color);
- if (palette.getItemId() === 'color-palette') {
- var customPalette = this.dialog.down('component[itemId=custom-colors]');
+ if (palette.getItemId() == 'color-palette') {
+ var customPalette = this.dialog.find('itemId', 'custom-colors')[0];
if (customPalette) {
customPalette.deSelect();
}
} else {
- var standardPalette = this.dialog.down('component[itemId=color-palette]');
+ var standardPalette = this.dialog.find('itemId', 'color-palette')[0];
if (standardPalette) {
standardPalette.deSelect();
}
@@ -267,32 +257,27 @@ Ext.define('HTMLArea.TYPO3Color', {
/*
* Display the selected color
*/
- showColor: function (color, showField) {
- if (!showField) {
- var showField = this.dialog.down('component[itemId=show-color]');
- }
- if (color.length) {
+ showColor: function (color) {
+ if (color) {
var newColor = color;
if (newColor.indexOf('#') == 0) {
newColor = newColor.substr(1);
}
- Ext.fly(showField.getEl().query('.x-form-item-body')[0]).setStyle('backgroundColor', HTMLArea.util.Color.colorToHex(parseInt(newColor, 16)));
- } else {
- Ext.fly(showField.getEl().query('.x-form-item-body')[0]).setStyle('backgroundColor', '');
+ this.dialog.find('itemId', 'show-color')[0].el.setStyle('backgroundColor', HTMLArea.util.Color.colorToHex(parseInt(newColor, 16)));
}
},
/*
* On change handler: display the new color and select it in the palettes, if it exists
*/
onChange: function (field, value) {
- if (value != null) {
+ if (value) {
var color = value.toUpperCase();
this.showColor(color);
- var standardPalette = this.dialog.down('component[itemId=color-palette]');
+ var standardPalette = this.dialog.find('itemId', 'color-palette')[0];
if (standardPalette) {
standardPalette.select(color);
}
- var customPalette = this.dialog.down('component[itemId=custom-colors]');
+ var customPalette = this.dialog.find('itemId', 'custom-colors')[0];
if (customPalette) {
customPalette.select(color);
}
@@ -301,10 +286,9 @@ Ext.define('HTMLArea.TYPO3Color', {
/*
* On after render handler: display the color
*/
- onAfterRender: function (showField) {
- var field = showField.ownerCt.getComponent('color');
+ onAfterRender: function (field) {
if (!Ext.isEmpty(field.getValue())) {
- this.showColor(field.getValue(), showField);
+ this.showColor(field.getValue());
}
},
/*
@@ -322,15 +306,16 @@ Ext.define('HTMLArea.TYPO3Color', {
if (this.dialog) {
this.dialog.close();
}
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
arguments: arguments,
cls: 'htmlarea-window',
border: false,
width: dimensions.width,
height: dimensions.height,
- layout: 'anchor',
- resizable: true,
+ autoScroll: true,
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
iconCls: this.getButton(arguments.buttonId).iconCls,
listeners: {
close: {
@@ -338,7 +323,17 @@ Ext.define('HTMLArea.TYPO3Color', {
scope: this
}
},
- items: items,
+ items: {
+ xtype: 'container',
+ layout: 'form',
+ style: {
+ width: '95%'
+ },
+ defaults: {
+ labelWidth: 150
+ },
+ items: items
+ },
buttons: [
this.buildButtonConfig('OK', handler),
this.buildButtonConfig('Cancel', this.onCancel)
@@ -352,7 +347,7 @@ Ext.define('HTMLArea.TYPO3Color', {
setColor: function(button, event) {
this.restoreSelection();
var buttonId = this.dialog.arguments.buttonId;
- var color = this.dialog.down('component[itemId=color]').getValue();
+ var color = this.dialog.find('itemId', 'color')[0].getValue();
if (color) {
if (color.indexOf('#') == 0) {
color = color.substr(1);
@@ -360,7 +355,7 @@ Ext.define('HTMLArea.TYPO3Color', {
color = HTMLArea.util.Color.colorToHex(parseInt(color, 16));
}
this.editor.focus();
- var element,
+ var element,
fullNodeSelected = false;
var selection = this.editor._getSelection();
var range = this.editor._createRange(selection);
@@ -396,9 +391,9 @@ Ext.define('HTMLArea.TYPO3Color', {
// Set the color in the style attribute
element.style[this.styleProperty[buttonId]] = color;
this.editor.wrapWithInlineElement(element, selection, range);
- if (!Ext.isIE) {
- range.detach();
- }
+ }
+ if (!Ext.isIE) {
+ range.detach();
}
this.close();
event.stopEvent();
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3HtmlParser/typo3html-parser.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3HtmlParser/typo3html-parser.js
index 456897dfc26af76accc4e66a9f504675200f3346..41129ecf4f43de58c1ce583b2822dfcc84e5437a 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3HtmlParser/typo3html-parser.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3HtmlParser/typo3html-parser.js
@@ -26,8 +26,7 @@
/**
* TYPO3HtmlParser Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.TYPO3HtmlParser', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TYPO3HtmlParser = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -111,6 +110,6 @@ Ext.define('HTMLArea.TYPO3HtmlParser', {
* Handler for paste, dragdrop and drop events
*/
wordCleanHandler: function (event) {
- Ext.Function.defer(this.clean, 50, this);
+ this.clean.defer(50, this);
}
});
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Image/typo3image.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Image/typo3image.js
index 3b3ec13d3e8e96a7263bab3f6d8fcc31eab3e5bc..dd659e1b79651db043c6705ed4c8ddea01b178a2 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Image/typo3image.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Image/typo3image.js
@@ -27,8 +27,7 @@
/*
* TYPO3Image plugin for htmlArea RTE
*/
-Ext.define('HTMLArea.TYPO3Image', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TYPO3Image = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -85,7 +84,7 @@ Ext.define('HTMLArea.TYPO3Image', {
}
this.openContainerWindow(
buttonId,
- this.getButton(buttonId).tooltip.text,
+ this.getButton(buttonId).tooltip.title,
this.getWindowDimensions(
{
width: 610,
@@ -127,9 +126,9 @@ Ext.define('HTMLArea.TYPO3Image', {
image = null;
}
if (image) {
- button.setTooltip({ text: this.localize('Modify image') });
+ button.setTooltip({ title: this.localize('Modify image') });
} else {
- button.setTooltip({ text: this.localize('Insert image') });
+ button.setTooltip({ title: this.localize('Insert image') });
}
}
}
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Link/typo3link.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Link/typo3link.js
index e890bb5017c20d4363bd8dec4d0de61140ce352d..a4e40438fadfb936dab8bec826de97a011bd2991 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Link/typo3link.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Link/typo3link.js
@@ -27,8 +27,7 @@
/*
* TYPO3Link plugin for htmlArea RTE
*/
-Ext.define('HTMLArea.TYPO3Link', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TYPO3Link = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -160,7 +159,7 @@ Ext.define('HTMLArea.TYPO3Link', {
}
this.openContainerWindow(
buttonId,
- this.getButton(buttonId).tooltip.text,
+ this.getButton(buttonId).tooltip.title,
this.getWindowDimensions(
{
width: 550,
@@ -451,9 +450,9 @@ Ext.define('HTMLArea.TYPO3Link', {
node = el;
}
if (node != null && /^a$/i.test(node.nodeName)) {
- button.setTooltip({ text: this.localize('Modify link') });
+ button.setTooltip({ title: this.localize('Modify link') });
} else {
- button.setTooltip({ text: this.localize('Insert link') });
+ button.setTooltip({ title: this.localize('Insert link') });
}
}
break;
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TableOperations/table-operations.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TableOperations/table-operations.js
index 3ea7861ebfefa21c966c8e9296f93364d906d774..08ad0446f334626a93d4715df325336e4d0a027c 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TableOperations/table-operations.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TableOperations/table-operations.js
@@ -31,8 +31,7 @@
/*
* Table Operations Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.TableOperations', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TableOperations = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -129,24 +128,17 @@ Ext.define('HTMLArea.TableOperations', {
* Sets of default configuration values for dialogue form fields
*/
configDefaults: {
- combobox: {
- cls: 'htmlarea-combo',
- displayField: 'text',
+ combo: {
editable: true,
- forceSelection: true,
- helpIcon: true,
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" class="htmlarea-combo-list-item">{text}</div>';
- }
- },
- queryMode: 'local',
selectOnFocus: true,
- triggerAction: 'all',
typeAhead: true,
+ triggerAction: 'all',
+ forceSelection: true,
+ mode: 'local',
valueField: 'value',
- xtype: 'combobox'
+ displayField: 'text',
+ helpIcon: true,
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
}
},
/*
@@ -222,7 +214,7 @@ Ext.define('HTMLArea.TableOperations', {
column: type == 'column',
buttonId: buttonId
},
- type == 'table' ? this.getWindowDimensions({ width: 500}, buttonId) : this.getWindowDimensions({ width: 500}, buttonId),
+ type == 'table' ? this.getWindowDimensions({ width: 600}, buttonId) : this.getWindowDimensions({ width: 600}, buttonId),
this.buildTabItemsConfig(element, type, buttonId),
type == 'table' ? this.tablePropertiesUpdate : this.rowCellPropertiesUpdate
);
@@ -336,14 +328,15 @@ Ext.define('HTMLArea.TableOperations', {
if (this.dialog) {
this.dialog.close();
}
- this.dialog = Ext.create('Ext.window.Window', {
+ this.dialog = new Ext.Window({
title: this.localize(title),
arguments: arguments,
cls: 'htmlarea-window',
+ // As of ExtJS 3.1, JS error with IE when the window is resizable
+ resizable: !Ext.isIE,
border: false,
width: dimensions.width,
- layout: 'anchor',
- resizable: true,
+ height: 'auto',
iconCls: this.getButton(arguments.buttonId).iconCls,
listeners: {
close: {
@@ -356,11 +349,17 @@ Ext.define('HTMLArea.TableOperations', {
activeTab: 0,
defaults: {
xtype: 'container',
- layout: 'anchor',
+ layout: 'form',
defaults: {
labelWidth: 150
}
},
+ listeners: {
+ tabchange: {
+ fn: this.syncHeight,
+ scope: this
+ }
+ },
items: tabItems
},
buttons: [
@@ -376,8 +375,13 @@ Ext.define('HTMLArea.TableOperations', {
tablePropertiesUpdate: function () {
this.restoreSelection()
var params = {};
- Ext.each(this.dialog.query('combobox, textfield, numberfield, checkbox, colorpalettefield'), function (field) {
- params[field.getItemId()] = field.getValue();
+ var fieldTypes = ['combo', 'textfield', 'numberfield', 'checkbox', 'colorpalettefield'];
+ this.dialog.findBy(function (item) {
+ if (fieldTypes.indexOf(item.getXType()) !== -1) {
+ params[item.getItemId()] = item.getValue();
+ return true;
+ }
+ return false;
});
var errorFlag = false;
if (this.properties.required) {
@@ -387,7 +391,7 @@ Ext.define('HTMLArea.TableOperations', {
title: this.getButton(this.dialog.arguments.buttonId).tooltip.title,
msg: this.localize('captionOrSummary' + '-required')
});
- var field = this.dialog.down('component[itemId=f_caption]');
+ var field = this.dialog.find('itemId', 'f_caption')[0];
var tab = field.findParentByType('container');
tab.ownerCt.activate(tab);
field.focus();
@@ -404,7 +408,7 @@ Ext.define('HTMLArea.TableOperations', {
title: this.getButton(this.dialog.arguments.buttonId).tooltip.title,
msg: this.localize(required[item] + '-required')
});
- var field = this.dialog.down('component[itemId=' + item + ']');
+ var field = this.dialog.find('itemId', item)[0];
var tab = field.findParentByType('container');
tab.ownerCt.activate(tab);
field.focus();
@@ -429,7 +433,7 @@ Ext.define('HTMLArea.TableOperations', {
title: this.getButton(this.dialog.arguments.buttonId).tooltip.title,
msg: this.localize(required[item])
});
- var field = this.dialog.down('component[itemId=' + item + ']');
+ var field = this.dialog.find('itemId', item)[0];
var tab = field.findParentByType('container');
tab.ownerCt.activate(tab);
field.focus();
@@ -572,8 +576,13 @@ Ext.define('HTMLArea.TableOperations', {
this.restoreSelection()
// Collect values from each form field
var params = {};
- Ext.each(this.dialog.query('combobox, textfield, numberfield, checkbox, colorpalettefield'), function (field) {
- params[field.getItemId()] = field.getValue();
+ var fieldTypes = ['combo', 'textfield', 'numberfield', 'checkbox', 'colorpalettefield'];
+ this.dialog.findBy(function (item) {
+ if (fieldTypes.indexOf(item.getXType()) !== -1) {
+ params[item.getItemId()] = item.getValue();
+ return true;
+ }
+ return false;
});
var cell = this.dialog.arguments.cell;
var column = this.dialog.arguments.column;
@@ -1146,7 +1155,7 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return array the array of cells of the column
*/
- getColumnCells: function (cell) {
+ getColumnCells : function (cell) {
var cells = new Array();
var index = cell.cellIndex;
var table = cell.parentNode.parentNode.parentNode;
@@ -1170,7 +1179,7 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return void
*/
- toggleBorders: function (forceBorders) {
+ toggleBorders : function (forceBorders) {
var body = this.editor._doc.body;
if (!HTMLArea.DOM.hasClass(body, 'htmlarea-showtableborders')) {
HTMLArea.DOM.addClass(body,'htmlarea-showtableborders');
@@ -1274,7 +1283,7 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return void
*/
- alternateRows: function (table, classConfiguration, remove) {
+ alternateRows : function (table, classConfiguration, remove) {
var oddClass = { tbody : classConfiguration.rows.oddClass, thead : classConfiguration.rows.oddHeaderClass };
var evenClass = { tbody : classConfiguration.rows.evenClass, thead : classConfiguration.rows.evenHeaderClass };
var startAt = parseInt(classConfiguration.rows.startAt);
@@ -1314,7 +1323,7 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return void
*/
- alternateColumns: function (table, classConfiguration, remove) {
+ alternateColumns : function (table, classConfiguration, remove) {
var oddClass = { td : classConfiguration.columns.oddClass, th : classConfiguration.columns.oddHeaderClass };
var evenClass = { td : classConfiguration.columns.evenClass, th : classConfiguration.columns.evenHeaderClass };
var startAt = parseInt(classConfiguration.columns.startAt);
@@ -1394,7 +1403,7 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return void
*/
- countRows: function (table, classConfiguration, remove) {
+ countRows : function (table, classConfiguration, remove) {
var rowClass = { tbody : classConfiguration.rows.rowClass, thead : classConfiguration.rows.rowHeaderClass };
var rowLastClass = { tbody : classConfiguration.rows.rowLastClass, thead : classConfiguration.rows.rowHeaderLastClass };
var startAt = parseInt(classConfiguration.rows.startAt);
@@ -1440,7 +1449,7 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return void
*/
- countColumns: function (table, classConfiguration, remove) {
+ countColumns : function (table, classConfiguration, remove) {
var columnClass = { td : classConfiguration.columns.columnClass, th : classConfiguration.columns.columnHeaderClass };
var columnLastClass = { td : classConfiguration.columns.columnLastClass, th : classConfiguration.columns.columnHeaderLastClass };
var startAt = parseInt(classConfiguration.columns.startAt);
@@ -1564,7 +1573,7 @@ Ext.define('HTMLArea.TableOperations', {
/*
* This function remaps the given cell to the specified node name
*/
- remapCell: function(element, nodeName) {
+ remapCell : function(element, nodeName) {
var newCell = this.editor.convertNode(element, nodeName);
var attributes = element.attributes, attributeName, attributeValue;
for (var i = attributes.length; --i >= 0;) {
@@ -1608,7 +1617,7 @@ Ext.define('HTMLArea.TableOperations', {
return newCell;
},
- remapRowCells: function (row, toType) {
+ remapRowCells : function (row, toType) {
var cells = row.cells;
if (toType === "th") {
for (var i = cells.length; --i >= 0 ;) {
@@ -1769,7 +1778,7 @@ Ext.define('HTMLArea.TableOperations', {
labelSeparator: '',
itemId: 'f_rows',
value: (this.properties.numberOfRows && this.properties.numberOfRows.defaultValue) ? this.properties.numberOfRows.defaultValue : '2',
- width: 200,
+ width: 30,
minValue: 1,
helpTitle: this.localize('Number of rows')
});
@@ -1778,36 +1787,24 @@ Ext.define('HTMLArea.TableOperations', {
labelSeparator: '',
itemId: 'f_cols',
value: (this.properties.numberOfColumns && this.properties.numberOfColumns.defaultValue) ? this.properties.numberOfColumns.defaultValue : '4',
- width: 200,
+ width: 30,
minValue: 1,
helpTitle: this.localize('Number of columns')
});
}
if (this.removedProperties.indexOf('headers') == -1) {
// Create combo store
- var headersStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-headers');
- if (!headersStore) {
- headersStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-headers'
- });
- headersStore.loadData([
- {
- text: this.localize('No header cells'),
- value: 'none'
- },{
- text: this.localize('Header cells on top'),
- value: 'top'
- },{
- text: this.localize('Header cells on left'),
- value: 'left'
- },{
- text: this.localize('Header cells on top and left'),
- value: 'both'
- }
- ]);
- this.removeOptions(headersStore, 'headers');
- }
+ var store = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('No header cells'), 'none'],
+ [this.localize('Header cells on top'), 'top'],
+ [this.localize('Header cells on left'), 'left'],
+ [this.localize('Header cells on top and left'), 'both']
+ ]
+ });
+ this.removeOptions(store, 'headers');
if (Ext.isEmpty(table)) {
var selected = (this.properties.headers && this.properties.headers.defaultValue) ? this.properties.headers.defaultValue : 'top';
} else {
@@ -1824,15 +1821,16 @@ Ext.define('HTMLArea.TableOperations', {
}
}
}
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Headers:'),
labelSeparator: '',
itemId: 'f_headers',
helpTitle: this.localize('Table headers'),
- store: headersStore,
- width: (this.properties['headers'] && this.properties['headers'].width) ? this.properties['headers'].width : 300,
+ store: store,
+ width: (this.properties['headers'] && this.properties['headers'].width) ? this.properties['headers'].width : 200,
value: selected
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
}
return {
xtype: 'fieldset',
@@ -1856,50 +1854,26 @@ Ext.define('HTMLArea.TableOperations', {
var itemsConfig = [];
var nodeName = element ? element.nodeName.toLowerCase() : 'table';
var table = (nodeName == 'table');
- var select = this.buildStylingFieldConfig(
- 'f_class',
- (table ? 'Table class:' : 'Class:'),
- (table ? 'Table class selector' : 'Class selector'),
- function (combo) {
- this.setStyleOptions(combo, element, nodeName, (buttonId === 'InsertTable') ? this.defaultClass : null)
- }
- );
+ var select = this.buildStylingFieldConfig('f_class', (table ? 'Table class:' : 'Class:'), (table ? 'Table class selector' : 'Class selector'));
+ this.setStyleOptions(select, element, nodeName, (buttonId === 'InsertTable') ? this.defaultClass : null);
itemsConfig.push(select);
if (element && table) {
var tbody = element.getElementsByTagName('tbody')[0];
if (tbody) {
- var tbodyStyleSelect = this.buildStylingFieldConfig(
- 'f_class_tbody',
- 'Table body class:',
- 'Table body class selector',
- function (combo) {
- this.setStyleOptions(combo, tbody, 'tbody')
- }
- );
+ var tbodyStyleSelect = this.buildStylingFieldConfig('f_class_tbody', 'Table body class:', 'Table body class selector');
+ this.setStyleOptions(tbodyStyleSelect, tbody, 'tbody');
itemsConfig.push(tbodyStyleSelect);
}
var thead = element.getElementsByTagName('thead')[0];
if (thead) {
- var theadStyleSelect = this.buildStylingFieldConfig(
- 'f_class_thead',
- 'Table header class:',
- 'Table header class selector',
- function (combo) {
- this.setStyleOptions(combo, thead, 'thead')
- }
- );
+ var theadStyleSelect = this.buildStylingFieldConfig('f_class_thead', 'Table header class:', 'Table header class selector');
+ this.setStyleOptions(theadStyleSelect, thead, 'thead');
itemsConfig.push(theadStyleSelect);
}
var tfoot = element.getElementsByTagName('tfoot')[0];
if (tfoot) {
- var tfootStyleSelect = this.buildStylingFieldConfig(
- 'f_class_tfoot',
- 'Table footer class:',
- 'Table footer class selector',
- function (combo) {
- this.setStyleOptions(combo, tfoot, 'tfoot')
- }
- );
+ var tfootStyleSelect = this.buildStylingFieldConfig('f_class_tfoot', 'Table footer class:', 'Table footer class selector');
+ this.setStyleOptions(tfootStyleSelect, tfoot, 'tfoot');
itemsConfig.push(tfootStyleSelect);
}
}
@@ -1921,37 +1895,22 @@ Ext.define('HTMLArea.TableOperations', {
*
* @return object the style selection field object
*/
- buildStylingFieldConfig: function(fieldName, fieldLabel, fieldTitle, afterRenderHandler) {
- // Create global style store if it does not exist already
- var styleStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + 'BlockStyle');
- if (!styleStore) {
- styleStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.' + this.stylePlugin.name,
- storeId: this.editorId + '-store-' + this.stylePlugin.name
- });
- }
- return Ext.applyIf(
- {
- itemId: fieldName,
- fieldLabel: this.localize(fieldLabel),
- helpTitle: this.localize(fieldTitle),
- width: (this.properties['style'] && this.properties['style'].width) ? this.properties['style'].width : 300,
- store: styleStore,
- listeners: {
- afterrender: {
- fn: afterRenderHandler,
- scope: this
- }
- },
- listConfig: {
- cls: 'htmlarea-combo-list',
- getInnerTpl: function () {
- return '<div data-qtip="{value}" style="{style}" class="htmlarea-combo-list-item">{text}</div>';
- }
- }
- },
- this.configDefaults['combobox']
- );
+ buildStylingFieldConfig: function(fieldName, fieldLabel, fieldTitle) {
+ return new Ext.form.ComboBox(Ext.apply({
+ xtype: 'combo',
+ itemId: fieldName,
+ fieldLabel: this.localize(fieldLabel),
+ helpTitle: this.localize(fieldTitle),
+ width: (this.properties['style'] && this.properties['style'].width) ? this.properties['style'].width : 300,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
+ data: [[this.localize('No block style'), 'none']]
+ })
+ }, {
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
+ }, this.configDefaults['combo']
+ ));
},
/*
* This function populates the style store and sets the selected option
@@ -1971,12 +1930,6 @@ Ext.define('HTMLArea.TableOperations', {
classNames.push(defaultClass);
} else {
var classNames = HTMLArea.DOM.getClassNames(element);
- }
- // Somehow getStore method got lost...
- if (!Ext.isFunction(dropDown.getStore)) {
- dropDown.getStore = function () {
- return dropDown.store;
- };
}
blockStyle.buildDropDownOptions(dropDown, nodeName);
blockStyle.setSelectedOption(dropDown, classNames, 'noUnknown', defaultClass);
@@ -1991,78 +1944,56 @@ Ext.define('HTMLArea.TableOperations', {
*/
buildLanguageFieldsetConfig: function (element) {
var itemsConfig = [];
- var languagePlugin = this.getPluginInstance('Language');
- if (this.removedProperties.indexOf('language') == -1 && languagePlugin && this.getButton('Language')) {
- var selectedLanguage = !Ext.isEmpty(element) ? languagePlugin.getLanguageAttribute(element) : 'none';
+ var languageObject = this.getPluginInstance('Language');
+ if (this.removedProperties.indexOf('language') == -1 && this.getButton('Language')) {
+ var selectedLanguage = !Ext.isEmpty(element) ? languageObject.getLanguageAttribute(element) : 'none';
function initLanguageStore (store) {
if (selectedLanguage !== 'none') {
store.removeAt(0);
- store.insert(0, {
- text: languagePlugin.localize('Remove language mark'),
+ store.insert(0, new store.recordType({
+ text: languageObject.localize('Remove language mark'),
value: 'none'
- });
+ }));
}
}
- // Create global language store if it does not exist already
- var languageStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + languagePlugin.name);
- if (languageStore) {
- initLanguageStore(languageStore);
- } else {
- languageStore = Ext.create('Ext.data.Store', {
- autoLoad: true,
- model: 'HTMLArea.model.default',
- listeners: {
- load: initLanguageStore
- },
- proxy: {
- type: 'ajax',
- url: this.getDropDownConfiguration('Language').dataUrl,
- reader: {
- type: 'json',
- root: 'options'
- }
- },
- storeId: this.editorId + '-store-' + languagePlugin.name
- });
- }
- itemsConfig.push(Ext.applyIf({
+ var languageStore = new Ext.data.JsonStore({
+ autoDestroy: true,
+ autoLoad: true,
+ root: 'options',
+ fields: [ { name: 'text'}, { name: 'value'} ],
+ url: this.getDropDownConfiguration('Language').dataUrl,
+ listeners: {
+ load: initLanguageStore
+ }
+ });
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Language'),
itemId: 'f_lang',
helpTitle: this.localize('Language'),
store: languageStore,
- width: (this.properties['language'] && this.properties['language'].width) ? this.properties['language'].width : 300,
+ width: (this.properties['language'] && this.properties['language'].width) ? this.properties['language'].width : 200,
value: selectedLanguage
- }, this.configDefaults['combobox']));
- }
- if (this.removedProperties.indexOf('direction') == -1 && languagePlugin && (this.getButton('LeftToRight') || this.getButton('RightToLeft'))) {
- // Create direction options global store
- var directionStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + languagePlugin.name + '-direction');
- if (!directionStore) {
- directionStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: 'HTMLArea' + '-store-' + languagePlugin.name + '-direction'
- });
- directionStore.loadData([
- {
- text: languagePlugin.localize('Not set'),
- value: 'not set'
- },{
- text: languagePlugin.localize('RightToLeft'),
- value: 'rtl'
- },{
- text: languagePlugin.localize('LeftToRight'),
- value: 'ltr'
- }
- ]);
- }
- itemsConfig.push(Ext.applyIf({
+ }, this.configDefaults['combo']));
+ }
+ if (this.removedProperties.indexOf('direction') == -1 && (this.getButton('LeftToRight') || this.getButton('RightToLeft'))) {
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Text direction'),
itemId: 'f_dir',
helpTitle: this.localize('Text direction'),
- store: directionStore,
- width: (this.properties['direction'] && this.properties['dirrection'].width) ? this.properties['direction'].width : 300,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('RightToLeft'), 'rtl'],
+ [this.localize('LeftToRight'), 'ltr']
+ ]
+ }),
+ width: (this.properties['direction'] && this.properties['dirrection'].width) ? this.properties['direction'].width : 200,
value: !Ext.isEmpty(element) && element.dir ? element.dir : 'not set'
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
}
return {
xtype: 'fieldset',
@@ -2090,14 +2021,14 @@ Ext.define('HTMLArea.TableOperations', {
fieldLabel: this.localize('Cell spacing:'),
itemId: 'f_spacing',
value: !Ext.isEmpty(table) ? table.cellSpacing : '',
- width: 200,
+ width: 30,
minValue: 0,
helpTitle: this.localize('Space between adjacent cells')
},{
fieldLabel: this.localize('Cell padding:'),
itemId: 'f_padding',
value: !Ext.isEmpty(table) ? table.cellPadding : '',
- width: 200,
+ width: 30,
minValue: 0,
helpTitle: this.localize('Space between content and border in cell')
}]
@@ -2128,113 +2059,84 @@ Ext.define('HTMLArea.TableOperations', {
var heightTitle = 'Cell height';
}
if (this.removedProperties.indexOf('width') === -1) {
- var widthUnitStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-widthUnit');
- if (!widthUnitStore) {
- widthUnitStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-widthUnit'
- });
- widthUnitStore.loadData([
- {
- text: this.localize('percent'),
- value: '%'
- },{
- text: this.localize('pixels'),
- value: 'px'
- },{
- text: this.localize('em'),
- value: 'em'
- }
- ]);
- this.removeOptions(widthUnitStore, 'widthUnit');
- }
+ var widthUnitStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('percent'), '%'],
+ [this.localize('pixels'), 'px'],
+ [this.localize('em'), 'em']
+ ]
+ });
+ this.removeOptions(widthUnitStore, 'widthUnit');
itemsConfig.push({
fieldLabel: this.localize('Width:'),
labelSeparator: '',
- minValue: 0,
itemId: 'f_st_width',
value: element ? this.getLength(element.style.width) : ((this.properties.width && this.properties.width.defaultValue) ? this.properties.width.defaultValue : ''),
- width: 200,
+ width: 30,
helpTitle: this.localize(widthTitle)
});
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Width unit'),
itemId: 'f_st_widthUnit',
helpTitle: this.localize('Width unit'),
store: widthUnitStore,
- width: (this.properties['widthUnit'] && this.properties['widthUnit'].width) ? this.properties['widthUnit'].width : 200,
+ width: (this.properties['widthUnit'] && this.properties['widthUnit'].width) ? this.properties['widthUnit'].width : 60,
value: element ? (/%/.test(element.style.width) ? '%' : (/px/.test(element.style.width) ? 'px' : 'em')) : ((this.properties.widthUnit && this.properties.widthUnit.defaultValue) ? this.properties.widthUnit.defaultValue : '%')
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
}
if (this.removedProperties.indexOf('height') === -1) {
- var heightUnitStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-heightUnit');
- if (!heightUnitStore) {
- heightUnitStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-heightUnit'
- });
- heightUnitStore.loadData([
- {
- text: this.localize('percent'),
- value: '%'
- },{
- text: this.localize('pixels'),
- value: 'px'
- },{
- text: this.localize('em'),
- value: 'em'
- }
- ]);
- this.removeOptions(heightUnitStore, 'heightUnit');
- }
+ var heightUnitStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('percent'), '%'],
+ [this.localize('pixels'), 'px'],
+ [this.localize('em'), 'em']
+ ]
+ });
+ this.removeOptions(heightUnitStore, 'heightUnit');
itemsConfig.push({
fieldLabel: this.localize('Height:'),
labelSeparator: '',
- minValue: 0,
itemId: 'f_st_height',
value: element ? this.getLength(element.style.height) : ((this.properties.height && this.properties.height.defaultValue) ? this.properties.height.defaultValue : ''),
- width: 200,
+ width: 30,
helpTitle: this.localize(heightTitle)
});
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Height unit'),
itemId: 'f_st_heightUnit',
helpTitle: this.localize('Height unit'),
store: heightUnitStore,
- width: (this.properties['heightUnit'] && this.properties['heightUnit'].width) ? this.properties['heightUnit'].width : 200,
+ width: (this.properties['heightUnit'] && this.properties['heightUnit'].width) ? this.properties['heightUnit'].width : 60,
value: element ? (/%/.test(element.style.height) ? '%' : (/px/.test(element.style.height) ? 'px' : 'em')) : ((this.properties.heightUnit && this.properties.heightUnit.defaultValue) ? this.properties.heightUnit.defaultValue : '%')
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
}
if (nodeName == 'table' && this.removedProperties.indexOf('float') === -1) {
- var floatStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-float');
- if (!floatStore) {
- floatStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-float'
- });
- floatStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('Left'),
- value: 'left'
- },{
- text: this.localize('Right'),
- value: 'right'
- }
- ]);
- this.removeOptions(floatStore, 'float');
- }
- itemsConfig.push(Ext.applyIf({
+ var floatStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('Left'), 'left'],
+ [this.localize('Right'), 'right']
+ ]
+ });
+ this.removeOptions(floatStore, 'float');
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Float:'),
labelSeparator: '',
itemId: 'f_st_float',
helpTitle: this.localize('Specifies where the table should float'),
store: floatStore,
- width: (this.properties['float'] && this.properties['float'].width) ? this.properties['float'].width : 200,
- value: element ? (Ext.fly(element).hasCls(this.floatLeft) ? 'left' : (Ext.fly(element).hasCls(this.floatRight) ? 'right' : 'not set')) : this.floatDefault
- }, this.configDefaults['combobox']));
+ width: (this.properties['float'] && this.properties['float'].width) ? this.properties['float'].width : 120,
+ value: element ? (Ext.get(element).hasClass(this.floatLeft) ? 'left' : (Ext.get(element).hasClass(this.floatRight) ? 'right' : 'not set')) : this.floatDefault
+ }, this.configDefaults['combo']));
}
return {
xtype: 'fieldset',
@@ -2260,7 +2162,7 @@ Ext.define('HTMLArea.TableOperations', {
var blockElements = this.getPluginInstance('BlockElements');
if (element && blockElements) {
Ext.iterate(this.convertAlignment, function (value) {
- if (Ext.fly(element).hasCls(blockElements.useClass[this.convertAlignment[value]])) {
+ if (Ext.get(element).hasClass(blockElements.useClass[this.convertAlignment[value]])) {
selectedTextAlign = value;
return false;
}
@@ -2269,75 +2171,45 @@ Ext.define('HTMLArea.TableOperations', {
} else {
selectedTextAlign = (element && element.style.textAlign) ? element.style.textAlign : 'not set';
}
- var textAlignStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-textAlign');
- if (!textAlignStore) {
- textAlignStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-textAlign'
- });
- textAlignStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('Left'),
- value: 'left'
- },{
- text: this.localize('Center'),
- value: 'center'
- },{
- text: this.localize('Right'),
- value: 'right'
- },{
- text: this.localize('Justify'),
- value: 'justify'
- }
- ]);
- this.removeOptions(textAlignStore, 'textAlign');
- }
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Text alignment:'),
itemId: 'f_st_textAlign',
helpTitle: this.localize('Horizontal alignment of text within cell'),
- store: textAlignStore,
- width: (this.properties['textAlign'] && this.properties['textAlign'].width) ? this.properties['textAlign'].width : 250,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('Left'), 'left'],
+ [this.localize('Center'), 'center'],
+ [this.localize('Right'), 'right'],
+ [this.localize('Justify'), 'justify']
+ ]
+ }),
+ width: (this.properties['textAlign'] && this.properties['textAlign'].width) ? this.properties['textAlign'].width : 100,
value: selectedTextAlign
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
// Vertical alignment
- var verticalAlignStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-verticalAlign');
- if (!verticalAlignStore) {
- verticalAlignStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-verticalAlign'
- });
- verticalAlignStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('Top'),
- value: 'top'
- },{
- text: this.localize('Middle'),
- value: 'middle'
- },{
- text: this.localize('Bottom'),
- value: 'bottom'
- },{
- text: this.localize('Baseline'),
- value: 'baseline'
- }
- ]);
- this.removeOptions(verticalAlignStore, 'verticalAlign');
- }
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Vertical alignment:'),
itemId: 'f_st_vertAlign',
helpTitle: this.localize('Vertical alignment of content within cell'),
- store: verticalAlignStore,
- width: (this.properties['verticalAlign'] && this.properties['verticalAlign'].width) ? this.properties['verticalAlign'].width : 250,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('Top'), 'top'],
+ [this.localize('Middle'), 'middle'],
+ [this.localize('Bottom'), 'bottom'],
+ [this.localize('Baseline'), 'baseline']
+ ]
+ }),
+ width: (this.properties['verticalAlign'] && this.properties['verticalAlign'].width) ? this.properties['verticalAlign'].width : 100,
value: (element && element.style.verticalAlign) ? element.style.verticalAlign : 'not set'
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
return {
xtype: 'fieldset',
title: this.localize('Alignment'),
@@ -2358,69 +2230,46 @@ Ext.define('HTMLArea.TableOperations', {
var itemsConfig = [];
var nodeName = element ? element.nodeName.toLowerCase() : 'table';
// Border style
- var borderStyleStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-borderStyle');
- if (!borderStyleStore) {
- borderStyleStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-borderStyle'
- });
- borderStyleStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('No border'),
- value: 'none'
- },{
- text: this.localize('Dotted'),
- value: 'dotted'
- },{
- text: this.localize('Dashed'),
- value: 'dashed'
- },{
- text: this.localize('Solid'),
- value: 'solid'
- },{
- text: this.localize('Double'),
- value: 'double'
- },{
- text: this.localize('Groove'),
- value: 'groove'
- },{
- text: this.localize('Ridge'),
- value: 'ridge'
- },{
- text: this.localize('Inset'),
- value: 'inset'
- },{
- text: this.localize('Outset'),
- value: 'outset'
- }
- ]);
- this.removeOptions(borderStyleStore, 'borderStyle');
- }
+ var borderStyleStore = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('No border'), 'none'],
+ [this.localize('Dotted'), 'dotted'],
+ [this.localize('Dashed'), 'dashed'],
+ [this.localize('Solid'), 'solid'],
+ [this.localize('Double'), 'double'],
+ [this.localize('Groove'), 'groove'],
+ [this.localize('Ridge'), 'ridge'],
+ [this.localize('Inset'), 'inset'],
+ [this.localize('Outset'), 'outset']
+ ]
+ });
+ this.removeOptions(borderStyleStore, 'borderStyle');
// Gecko reports "solid solid solid solid" for "border-style: solid".
// That is, "top right bottom left" -- we only consider the first value.
var selectedBorderStyle = element && element.style.borderStyle ? element.style.borderStyle : ((this.properties.borderWidth) ? ((this.properties.borderStyle && this.properties.borderStyle.defaultValue) ? this.properties.borderStyle.defaultValue : 'solid') : 'not set');
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Border style:'),
itemId: 'f_st_borderStyle',
helpTitle: this.localize('Border style'),
store: borderStyleStore,
- width: (this.properties.borderStyle && this.properties.borderStyle.width) ? this.properties.borderStyle.width : 250,
+ width: (this.properties.borderStyle && this.properties.borderStyle.width) ? this.properties.borderStyle.width : 150,
value: selectedBorderStyle,
listeners: {
change: {
fn: this.setBorderFieldsDisabled
}
}
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
// Border width
itemsConfig.push({
fieldLabel: this.localize('Border width:'),
itemId: 'f_st_borderWidth',
value: element ? this.getLength(element.style.borderWidth) : ((this.properties.borderWidth && this.properties.borderWidth.defaultValue) ? this.properties.borderWidth.defaultValue : ''),
- width: 200,
+ width: 30,
minValue: 0,
helpTitle: this.localize('Border width'),
helpText: this.localize('pixels'),
@@ -2439,119 +2288,70 @@ Ext.define('HTMLArea.TableOperations', {
});
if (nodeName === 'table') {
// Collapsed borders
- var borderCollapseStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-borderCollapse');
- if (!borderCollapseStore) {
- borderCollapseStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-borderCollapse'
- });
- borderCollapseStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('Collapsed borders'),
- value: 'collapse'
- },{
- text: this.localize('Detached borders'),
- value: 'separate'
- }
- ]);
- this.removeOptions(borderCollapseStore, 'borderCollapse');
- }
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Collapsed borders'),
labelSeparator: ':',
itemId: 'f_st_borderCollapse',
helpTitle: this.localize('Collapsed borders'),
- store: borderCollapseStore,
- width: (this.properties.borderCollapse && this.properties.borderCollapse.width) ? this.properties.borderCollapse.width : 300,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('Collapsed borders'), 'collapse'],
+ [this.localize('Detached borders'), 'separate']
+ ]
+ }),
+ width: (this.properties.borderCollapse && this.properties.borderCollapse.width) ? this.properties.borderCollapse.width : 150,
value: element && element.style.borderCollapse ? element.style.borderCollapse : 'not set',
disabled: (selectedBorderStyle === 'none')
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
// Frame
- var frameStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-frame');
- if (!frameStore) {
- frameStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-frame'
- });
- frameStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('No sides'),
- value: 'void'
- },{
- text: this.localize('The top side only'),
- value: 'above'
- },{
- text: this.localize('The bottom side only'),
- value: 'below'
- },{
- text: this.localize('The top and bottom sides only'),
- value: 'hsides'
- },{
- text: this.localize('The right and left sides only'),
- value: 'vsides'
- },{
- text: this.localize('The left-hand side only'),
- value: 'lhs'
- },{
- text: this.localize('The right-hand side only'),
- value: 'rhs'
- },{
- text: this.localize('All four sides'),
- value: 'box'
- }
- ]);
- this.removeOptions(frameStore, 'frame');
- }
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Frames:'),
itemId: 'f_frames',
helpTitle: this.localize('Specifies which sides should have a border'),
- store: frameStore,
- width: (this.properties.frame && this.properties.frame.width) ? this.properties.frame.width : 400,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('No sides'), 'void'],
+ [this.localize('The top side only'), 'above'],
+ [this.localize('The bottom side only'), 'below'],
+ [this.localize('The top and bottom sides only'), 'hsides'],
+ [this.localize('The right and left sides only'), 'vsides'],
+ [this.localize('The left-hand side only'), 'lhs'],
+ [this.localize('The right-hand side only'), 'rhs'],
+ [this.localize('All four sides'), 'box']
+ ]
+ }),
+ width: (this.properties.frame && this.properties.frame.width) ? this.properties.frame.width : 250,
value: (element && element.frame) ? element.frame : 'not set',
disabled: (selectedBorderStyle === 'none')
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
// Rules
- var rulesStore = Ext.data.StoreManager.lookup(this.editorId + '-store-' + this.name + '-rules');
- if (!rulesStore) {
- rulesStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: this.editorId + '-store-' + this.name + '-rules'
- });
- rulesStore.loadData([
- {
- text: this.localize('Not set'),
- value: 'not set'
- },{
- text: this.localize('No rules'),
- value: 'none'
- },{
- text: this.localize('Rules will appear between rows only'),
- value: 'rows'
- },{
- text: this.localize('Rules will appear between columns only'),
- value: 'cols'
- },{
- text: this.localize('Rules will appear between all rows and columns'),
- value: 'all'
- }
- ]);
- this.removeOptions(rulesStore, 'rules');
- }
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Rules:'),
itemId: 'f_rules',
helpTitle: this.localize('Specifies where rules should be displayed'),
- store: rulesStore,
- width: (this.properties.rules && this.properties.rules.width) ? this.properties.rules.width : 400,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Not set'), 'not set'],
+ [this.localize('No rules'), 'none'],
+ [this.localize('Rules will appear between rows only'), 'rows'],
+ [this.localize('Rules will appear between columns only'), 'cols'],
+ [this.localize('Rules will appear between all rows and columns'), 'all']
+ ]
+ }),
+ width: (this.properties.rules && this.properties.rules.width) ? this.properties.rules.width : 360,
value: (element && element.rules) ? element.rules : 'not set'
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
}
return {
xtype: 'fieldset',
@@ -2568,10 +2368,10 @@ Ext.define('HTMLArea.TableOperations', {
* onChange handler: enable/disable other fields of the same fieldset
*/
setBorderFieldsDisabled: function (field, value) {
- Ext.each(field.ownerCt.query('combobox, textfield, numberfield, colorpalettefield'), function (item) {
+ field.ownerCt.findBy(function (item) {
var itemId = item.getItemId();
if (itemId == 'f_st_borderStyle' || itemId == 'f_rules') {
- return true;
+ return false;
} else if (value === 'none') {
switch (item.getXType()) {
case 'numberfield':
@@ -2580,10 +2380,8 @@ Ext.define('HTMLArea.TableOperations', {
case 'colorpalettefield':
item.setValue('');
break;
- case 'combobox':
- item.setValue('not set');
- break;
default:
+ item.setValue('not set');
break;
}
item.setDisabled(true);
@@ -2651,63 +2449,48 @@ Ext.define('HTMLArea.TableOperations', {
var itemsConfig = [];
if (column) {
var data = [
- {
- text: this.localize('Data cells'),
- value: 'td'
- },{
- text: this.localize('Headers for rows'),
- value: 'throw'
- },{
- text: this.localize('Headers for row groups'),
- value: 'throwgroup'
- }
+ [this.localize('Data cells'), 'td'],
+ [this.localize('Headers for rows'), 'throw'],
+ [this.localize('Headers for row groups'), 'throwgroup']
];
} else {
var data = [
- {
- text: this.localize('Normal'),
- value: 'td'
- },{
- text: this.localize('Header for column'),
- value: 'thcol'
- },{
- text: this.localize('Header for row'),
- value: 'throw'
- },{
- text: this.localize('Header for row group'),
- value: 'throwgroup'
- }
+ [this.localize('Normal'), 'td'],
+ [this.localize('Header for column'), 'thcol'],
+ [this.localize('Header for row'), 'throw'],
+ [this.localize('Header for row group'), 'throwgroup']
];
}
// onChange handler: reset the CSS class dropdown and show/hide abbr field when the cell type changes
// @param object cellTypeField: the combo object
- // @param object records: the selected records
+ // @param object record: the selected record
// @return void
var self = this;
- function cellTypeChange(cellTypeField, records) {
- var record = records[0];
+ function cellTypeChange(cellTypeField, record) {
var value = record.get('value');
- var styleCombo = self.dialog.down('combobox[itemId=f_class]');
+ var styleCombo = self.dialog.find('itemId', 'f_class')[0];
if (styleCombo) {
self.setStyleOptions(styleCombo, element, value.substring(0,2));
}
// abbr field present only for single cell, not for column
- var abbrField = self.dialog.down('textfield[itemId=f_cell_abbr]');
+ var abbrField = self.dialog.find('itemId', 'f_cell_abbr')[0];
if (abbrField) {
abbrField.setVisible(value != 'td');
+ abbrField.label.setVisible(value != 'td');
}
}
var selected = element.nodeName.toLowerCase() + element.scope.toLowerCase();
- var store = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default'
- });
- store.loadData(data);
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize(column ? 'Type of cells of the column' : 'Type of cell'),
itemId: 'f_cell_type',
helpTitle: this.localize(column ? 'Specifies the type of cells' : 'Specifies the type of cell'),
- store: store,
- width: (this.properties.cellType && this.properties.cellType.width) ? this.properties.cellType.width : 300,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: data
+ }),
+ width: (this.properties.cellType && this.properties.cellType.width) ? this.properties.cellType.width : 250,
value: (column && selected == 'thcol') ? 'td' : selected,
listeners: {
select: {
@@ -2715,7 +2498,7 @@ Ext.define('HTMLArea.TableOperations', {
scope: this
}
}
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
if (!column) {
itemsConfig.push({
xtype: 'textfield',
@@ -2726,7 +2509,8 @@ Ext.define('HTMLArea.TableOperations', {
width: 300,
value: element.abbr,
hideMode: 'visibility',
- hidden: (selected == 'td')
+ hidden: (selected == 'td'),
+ hideLabel: (selected == 'td')
});
}
return {
@@ -2751,46 +2535,37 @@ Ext.define('HTMLArea.TableOperations', {
var current = element.parentNode.nodeName.toLowerCase();
// onChange handler: show/hide cell conversion checkbox with appropriate label
// @param object field: the combo object
- // @param object record: the selected records
+ // @param object record: the selected record
// @return void
- function displayCheckbox(field, records) {
+ function displayCheckbox(field, record, index) {
var checkBox = field.ownerCt.getComponent('f_convertCells');
- var record = records[0];
var value = record.get('value');
if (current !== value && (current === 'thead' || value === 'thead')) {
- checkBox.labelEl.update((value === 'thead') ? this.localize('Make cells header cells') : this.localize('Make cells data cells'));
+ checkBox.label.dom.innerHTML = (value === 'thead') ? this.localize('Make cells header cells') : this.localize('Make cells data cells');
checkBox.show();
+ checkBox.label.show();
checkBox.setValue(true);
} else {
checkBox.setValue(false);
checkBox.hide();
+ checkBox.label.hide();
}
}
- var tableSectionStore = Ext.data.StoreManager.lookup('HTMLArea' + '-store-' + this.name + '-tableSection');
- if (!tableSectionStore) {
- tableSectionStore = Ext.create('Ext.data.ArrayStore', {
- model: 'HTMLArea.model.Default',
- storeId: 'HTMLArea' + '-store-' + this.name + '-tableSection'
- });
- tableSectionStore.loadData([
- {
- text: this.localize('Table body'),
- value: 'tbody'
- },{
- text: this.localize('Table header'),
- value: 'thead'
- },{
- text: this.localize('Table footer'),
- value: 'tfoot'
- }
- ]);
- }
- itemsConfig.push(Ext.applyIf({
+ itemsConfig.push(Ext.apply({
+ xtype: 'combo',
fieldLabel: this.localize('Row group:'),
itemId: 'f_rowgroup',
helpTitle: this.localize('Table section'),
- store: tableSectionStore,
- width: (this.properties.rowGroup && this.properties.rowGroup.width) ? this.properties.rowGroup.width : 200,
+ store: new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [ { name: 'text'}, { name: 'value'}],
+ data: [
+ [this.localize('Table body'), 'tbody'],
+ [this.localize('Table header'), 'thead'],
+ [this.localize('Table footer'), 'tfoot']
+ ]
+ }),
+ width: (this.properties.rowGroup && this.properties.rowGroup.width) ? this.properties.rowGroup.width : 150,
value: current,
labelSeparator: '',
listeners: {
@@ -2799,7 +2574,7 @@ Ext.define('HTMLArea.TableOperations', {
scope: this
}
}
- }, this.configDefaults['combobox']));
+ }, this.configDefaults['combo']));
// Cell conversion checkbox
itemsConfig.push({
xtype: 'checkbox',
@@ -2809,7 +2584,8 @@ Ext.define('HTMLArea.TableOperations', {
helpTitle: this.localize('Make cells header cells'),
value: false,
hideMode: 'visibility',
- hidden: true
+ hidden: true,
+ hideLabel: true
});
return {
xtype: 'fieldset',
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextIndicator/text-indicator.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextIndicator/text-indicator.js
index 2d56c4346b1f3e66bd7f1dd1042a1e3759979701..01b4675d28ecad5d50fbe2fc3b878371be86f0e4 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextIndicator/text-indicator.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextIndicator/text-indicator.js
@@ -27,8 +27,7 @@
/*
* TextIndicator Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.TextIndicator', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TextIndicator = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextStyle/text-style.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextStyle/text-style.js
index a61f948533b122c8588a7edf5ce00e8e5e3b24f2..ca649f747bd650d0763eb5e4210115fa5db4a198 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextStyle/text-style.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TextStyle/text-style.js
@@ -28,26 +28,9 @@
* Text Style Plugin for TYPO3 htmlArea RTE
*/
/*
- * Define data model for blockstyle selector box
+ * Creation of the class of TextStyle plugins
*/
-Ext.define('HTMLArea.model.TextStyle', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'text',
- type: 'string'
- },{
- name: 'value',
- type: 'string'
- },{
- name: 'style',
- type: 'string'
- }]
-});
-/*
- * Define TextStyle plugin
- */
-Ext.define('HTMLArea.TextStyle', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.TextStyle = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -117,28 +100,23 @@ Ext.define('HTMLArea.TextStyle', {
fieldLabel = this.localize('text_style');
}
var dropDownConfiguration = {
- action: 'onChange',
id: buttonId,
tooltip: this.localize(buttonId + '-Tooltip'),
fieldLabel: fieldLabel,
- options: [{
- text: this.localize('No style'),
- value: 'none',
- style: ''
- }],
- model: 'HTMLArea.model.TextStyle',
- template: '<div data-qtip="{value}" style="{style}" class="htmlarea-combo-list-item">{text}</div>'
+ options: [[this.localize('No style'), 'none']],
+ action: 'onChange',
+ storeFields: [ { name: 'text'}, { name: 'value'}, { name: 'style'} ],
+ tpl: '<tpl for="."><div ext:qtip="{value}" style="{style}text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
};
if (this.pageTSconfiguration) {
if (this.pageTSconfiguration.width) {
dropDownConfiguration.width = parseInt(this.pageTSconfiguration.width, 10);
}
- dropDownConfiguration.listConfig = {};
if (this.pageTSconfiguration.listWidth) {
- dropDownConfiguration.listConfig.width = parseInt(this.pageTSconfiguration.listWidth, 10);
+ dropDownConfiguration.listWidth = parseInt(this.pageTSconfiguration.listWidth, 10);
}
if (this.pageTSconfiguration.maxHeight) {
- dropDownConfiguration.listConfig.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
+ dropDownConfiguration.maxHeight = parseInt(this.pageTSconfiguration.maxHeight, 10);
}
}
this.registerDropDown(dropDownConfiguration);
@@ -237,7 +215,7 @@ Ext.define('HTMLArea.TextStyle', {
// Monitor editor changing mode
this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
// Create CSS Parser object
- this.textStyles = Ext.create('HTMLArea.CSS.Parser', {
+ this.textStyles = new HTMLArea.CSS.Parser({
prefixLabelWithClassName: this.prefixLabelWithClassName,
postfixLabelWithClassName: this.postfixLabelWithClassName,
showTagFreeClasses: this.showTagFreeClasses,
@@ -322,7 +300,7 @@ Ext.define('HTMLArea.TextStyle', {
}
}
}
- var selectionInInlineElement = (tagName !== false) && this.REInlineTags.test(tagName);
+ var selectionInInlineElement = tagName && this.REInlineTags.test(tagName);
var disabled = !editor.endPointsInSameBlock() || (fullNodeSelected && !tagName) || (selectionEmpty && !selectionInInlineElement);
if (!disabled && !tagName) {
tagName = "span";
@@ -341,10 +319,10 @@ Ext.define('HTMLArea.TextStyle', {
initializeDropDown: function (dropDown) {
var store = dropDown.getStore();
store.removeAll(false);
- store.insert(0, {
+ store.insert(0, new store.recordType({
text: this.localize('No style'),
value: 'none'
- });
+ }));
dropDown.setValue('none');
},
/*
@@ -363,20 +341,12 @@ Ext.define('HTMLArea.TextStyle', {
}
}
Ext.iterate(allowedClasses, function (cssClass, value) {
- var style = null;
- // this.editor.config.disablePCexamples is deprecated as of TYPO3 4.6 and will be removed in TYPO 4.8
- if (!this.pageTSconfiguration.disableStyleOnOptionLabel && !this.editor.config.disablePCexamples) {
- if (HTMLArea.classesValues[cssClass] && !HTMLArea.classesNoShow[cssClass]) {
- style = HTMLArea.classesValues[cssClass];
- } else if (/-[0-9]+$/.test(cssClass) && HTMLArea.classesValues[RegExp.leftContext + '-']) {
- style = HTMLArea.classesValues[RegExp.leftContext + '-'];
- }
- }
- store.add({
+ store.add(new store.recordType({
text: value,
value: cssClass,
- style: style
- });
+ // this.editor.config.disablePCexamples is deprecated as of TYPO3 4.6 and will be removed in TYPO 4.8
+ style: (!(this.pageTSconfiguration && this.pageTSconfiguration.disableStyleOnOptionLabel) && !this.editor.config.disablePCexamples && HTMLArea.classesValues && HTMLArea.classesValues[cssClass] && !HTMLArea.classesNoShow[cssClass]) ? HTMLArea.classesValues[cssClass] : null
+ }));
}, this);
}
},
@@ -395,10 +365,10 @@ Ext.define('HTMLArea.TextStyle', {
}
}
if (index == -1 && !noUnknown) {
- store.add({
+ store.add(new store.recordType({
text: this.localize('Unknown style'),
value: classNames[classNames.length-1]
- });
+ }));
index = store.getCount()-1;
dropDown.setValue(classNames[classNames.length-1]);
if (!defaultClass) {
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/UndoRedo/undo-redo.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/UndoRedo/undo-redo.js
index 05ca730f9f9f4fbec97568e69a3696cf3d8eab20..0a6eeac6fb0b585fe2bfb3801d889118c27ebcad 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/UndoRedo/undo-redo.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/UndoRedo/undo-redo.js
@@ -29,8 +29,7 @@
/*
* Undo Redo Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.UndoRedo', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.UndoRedo = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
@@ -101,7 +100,7 @@ Ext.define('HTMLArea.UndoRedo', {
*/
start: function () {
if (this.customUndo) {
- Ext.TaskManager.start(this.task);
+ Ext.TaskMgr.start(this.task);
}
},
/*
@@ -109,7 +108,7 @@ Ext.define('HTMLArea.UndoRedo', {
*/
stop: function () {
if (this.customUndo) {
- Ext.TaskManager.stop(this.task);
+ Ext.TaskMgr.stop(this.task);
}
},
/*
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/UserElements/user-elements.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/UserElements/user-elements.js
index 19b3c47a73278e479d2125ae8353e8c97d4a0ee5..7bac0a8092461bd4f2769d129e48fbfab77e2479 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/UserElements/user-elements.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/UserElements/user-elements.js
@@ -26,8 +26,7 @@
/*
* User Elements Plugin for TYPO3 htmlArea RTE
*/
-Ext.define('HTMLArea.UserElements', {
- extend: 'HTMLArea.Plugin',
+HTMLArea.UserElements = Ext.extend(HTMLArea.Plugin, {
/*
* This function gets called by the class constructor
*/
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css b/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
index e21751f8ed94dac1a1a99598791ad629aca1efd8..a4bf035b44a763d79e4d7209837bcffc6f676997 100644
--- a/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
+++ b/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
@@ -1,7 +1,7 @@
/* Selectors for the htmlArea RTE editor */
.htmlarea {
- margin: 0 2px 0 0;
- padding: 0;
+ margin: 2px;
+ padding: 0;
}
.pleasewait {
position: relative;
@@ -19,9 +19,11 @@
padding: 0;
}
.editorWrap textarea {
- border-style: none !important;
- padding:0px 1px;
- margin:0;
+ border-style: solid;
+ border-color: #C7C7C7;
+ border-width: 0px 1px 1px 1px;
+ padding: 0px 1px;
+ margin: 0;
}
.editorWrap .resizable {
background-image: url("images/status/resizable.gif");
@@ -34,57 +36,75 @@
}
/* Selectors for the editor toolbar */
.htmlarea .toolbar {
+ background-color: #f3f3f3;
cursor: default;
- font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
+ border: 1px solid #c7c7c7;
+ border-bottom: 0;
margin: 0;
padding: 2px;
+ font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
}
.htmlarea .toolbar .tb-group {
- clear: none;
+ clear:none;
+ float:left;
+ margin:1px 2px 0px 0px;
+ padding:0;
+}
+.htmlarea .toolbar .x-form-item {
float: left;
- margin: 1px 2px 0px 0px;
- padding: 0;
+ margin:0;
+}
+.htmlarea .toolbar .x-form-item-label {
+ vertical-align:middle;
+ background-color:transparent;
+ border-style:none;
+ margin:0;padding:3px 3px 0px 3px;
+}
+/* Fix combo box left loat in IE6 */
+body.ext-ie6 .htmlarea .toolbar .x-form-item {
+ width: 1%;
}
.htmlarea .toolbar .button {
+ background-color: transparent;
+ color: ButtonText;
border-style: solid;
+ border-width: 1px;
border-color: transparent;
border-collapse: separate;
- border-width: 1px;
- float: left;
- height: 20px;
- margin: 0 1px 4px 1px;
-}
-.htmlarea .toolbar .x-btn-default-medium {
- padding: 1px 1px 0 1px;
-}
-.htmlarea .toolbar .x-btn-default-medium-icon button {
- height: 19px;
- padding: 0;
- width: 19px !important;
-}
-.htmlarea .toolbar .x-btn-default-medium-icon button,
-.htmlarea .toolbar .x-btn-default-medium-icon .x-btn-inner,
-.htmlarea .toolbar .x-btn-default-medium-noicon button,
-.htmlarea .toolbar .x-btn-default-medium-noicon .x-btn-inner {
- height: 19px;
- line-height: 19px;
-}
-.htmlarea .toolbar .x-btn-default-medium .x-btn-inner {
+ margin: 0 0 4px 0;
padding: 0;
-}
-.htmlarea .toolbar div.x-btn-icon {
- background-color: transparent;
- background-image: none;
+ float: left;
}
/* fixing button border-color in IE6 */
body.ext-ie6 .htmlarea .toolbar .button {
border-color: #f3f3f3;
}
-.htmlarea .toolbar span.x-btn-icon {
+.htmlarea .toolbar .x-btn-mc {
+ background-color: transparent;
+ background-image: none;
+ border-style: none;
+ margin: 0;
+ padding: 0;
+}
+.htmlarea .toolbar .x-btn-tl,
+.htmlarea .toolbar .x-btn-tc,
+.htmlarea .toolbar .x-btn-tr,
+.htmlarea .toolbar .x-btn-ml,
+.htmlarea .toolbar .x-btn-mr,
+.htmlarea .toolbar .x-btn-bl,
+.htmlarea .toolbar .x-btn-bc,
+.htmlarea .toolbar .x-btn-br {
+ display: none;
+}
+.htmlarea .toolbar .x-btn-text {
background-image: url("images/sprites/actions.png");
background-repeat: no-repeat;
+ width: 20px;
+ height: 18px;
+ padding: 0;
+ margin: 1px 0 1px 2px;
}
-body.ext-ie6 .htmlarea .toolbar span.x-btn-icon {
+body.ext-ie6 .htmlarea .toolbar .x-btn-text {
background-image: url("images/sprites/actions.gif");
}
/* fixing button background-color and border-color in IE6 */
@@ -92,19 +112,21 @@ body.ext-ie6 .htmlarea .toolbar .buttonHover,
.htmlarea .toolbar .buttonHover {
border-style: solid;
border-width: 1px;
- border-color: white #C5C5D5 #C5C5D5 white;
+ border-color: #e4e0db #999999 #999999 #e4e0db;
background-color: #E0E0E9;
opacity: 1.00;
}
/* fixing button background-color and border-color in IE6 */
body.ext-ie6 .htmlarea .toolbar .buttonActive,
body.ext-ie6 .htmlarea .toolbar .buttonPressed,
+body.ext-ie6 .htmlarea-context-menu .buttonActive,
.htmlarea .toolbar .buttonActive,
-.htmlarea .toolbar .buttonPressed {
+.htmlarea .toolbar .buttonPressed,
+.htmlarea-context-menu .buttonActive {
border-style: solid;
border-width: 1px;
- border-color: #C5C5D5 #C5C5D5 #C5C5D5 #C5C5D5;
- background-color: ButtonHighlight !important;
+ border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+ background-color: ButtonHighlight;
text-decoration: none;
opacity: 1.00;
}
@@ -116,63 +138,64 @@ body.ext-ie6 .htmlarea .toolbar .buttonPressed,
overflow: hidden;
text-align: center;
border: 1px solid ButtonShadow;
- margin: 3px 2px 3px 2px;
+ margin: 3px 1px 5px 1px;
padding: 0 3px;
float: left;
}
-.htmlarea .toolbar .htmlarea-toolbar-separator {
- border-color: ButtonShadow;
- border-style: solid;
- border-width: 0 0 0 1px;
- float: left;
- height: 14px;
- margin: 5px 2px 5px 2px;
- width: 1px;
+.htmlarea .toolbar .buttonDisabled {
+ filter: alpha(opacity=25);
+ opacity: 0.25;
+ -moz-opacity: 0.25;
}
-.htmlarea .toolbar .htmlarea-toolbar-spacer {
+.htmlarea .toolbar .separator {
+ border:1px solid #999;
+ width: 7px;
+ height: 23px;
+ margin-bottom: 1px;
float: left;
- height: 24px;
}
-.htmlarea .toolbar .htmlarea-clear-left {
- clear: left;
- height: 1px;
+.htmlarea .toolbar .space {
+ height:22px;
+ border-style:none;
+ margin:0;padding:0 1px;
+ float:left;
}
-.htmlarea .toolbar .x-form-item {
- float: left;
- margin: 0 1px 2px 1px !important;
+.htmlarea .toolbar .select {
+ color: WindowText;
+ margin: 0 0 4px 0;
}
-/* Fix combo box left loat in IE6 */
-body.ext-ie6 .htmlarea .toolbar .x-form-item {
- width: 1%;
+.htmlarea .toolbar .x-form-item label.x-form-item-label{
+ padding-right: 0;
}
-.htmlarea .toolbar .x-form-item-label {
- background-color: transparent;
- border-style: none;
- color: ButtonText;
- font-size: .9em;
- margin: 0;
- padding: 3px 0 0 3px;
- vertical-align: middle;
+.htmlarea .toolbar .x-form-field-wrap .x-form-trigger {
+ right: 0;
+}
+.htmlarea .toolbar .select, .htmlarea .toolbar .select:hover, .htmlarea .toolbar .select:active {
+ background-color:#fff;color:ButtonText;
+}
+.htmlarea .toolbar .buttonDisabled {
+ background-color:#e4e0db;
}
.htmlarea .editorIframe {
- border-style: none;
clear: both;
+ width: 100%;
+ border: 1px solid #c7c7c7;
+ border-bottom: none;
margin: 0;
padding: 0;
- width: 100%;
}
.htmlarea .noStatusBar {
- border-bottom:1px solid #A2AAB8;
+ border-bottom:1px solid #000;
}
.htmlarea .statusBar {
- background-color: #5b5b5b;
- background-image: url('../images/backgrounds/row-header.png');
- background-image: linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
- background-image: -moz-linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #7f7f7f), color-stop(1, #5b5b5b));
- background-repeat: repeat-x;
+ background-color: #5b5b5b;
+ background-image: url('images/backgrounds/row-header.png');
+ background-image: linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
+ background-image: -moz-linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #7f7f7f), color-stop(1, #5b5b5b));
+ background-repeat: repeat-x;
color: #FFFFFF;
- font-size: .9em;
+ font-size: 10px;
border: 1px solid #c7c7c7;
margin: 0;
padding: 0 3px;
@@ -180,13 +203,13 @@ body.ext-ie6 .htmlarea .toolbar .x-form-item {
font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
}
.htmlarea .statusBar .statusBarTree a {
- color:#FFFFFF;
+ color:ButtonText;
text-decoration:none;
font-weight:bold;
padding:0px 5px;
}
.htmlarea .statusBar .statusBarTree a:visited {
- color:#FFFFFF;
+ color:#00f;
}
.htmlarea .statusBar .statusBarTree a:hover {
text-decoration: underline;
@@ -194,36 +217,24 @@ body.ext-ie6 .htmlarea .toolbar .x-form-item {
.htmlarea .statusBar .statusBarWordCount {
float: right;
}
-/* Selectors for combo list */
-.htmlarea-combo-list ul {
- margin-left: 0;
- padding-left: 5px;
-}
-.htmlarea-combo-list ul li {
- margin-left: 0;
- padding-left: 0;
-}
-.htmlarea-combo-list-item {
- font-size: .9em;
- text-align: left;
-}
/* Selectors for dialogue windows */
-.htmlarea-window .x-window-header-icon {
+.htmlarea-window .x-panel-icon {
background-image: url("images/sprites/actions.png");
background-repeat: no-repeat;
- height: 18px;
- width: 18px;
+ margin-top: 2px;
+ height: 22px;
}
-body.ext-ie6 .htmlarea-window .x-window-header-icon {
+body.ext-ie6 .htmlarea-window .x-panel-icon {
background-image: url("images/sprites/actions.gif");
}
.htmlarea-window .x-window-header .t3-help-link {
+ color: #fff;
}
.htmlarea-window ul.x-tab-strip {
list-style: none;
}
-.htmlarea-window .x-panel-body {
- background-color: #efeff4;
+.htmlarea-window .x-tab-panel-body {
+ background-color: #EFEFF4;
}
.htmlarea-window .x-fieldset {
margin: 3px;
@@ -239,7 +250,7 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
clear: left;
}
.htmlarea-window .x-form-item-label {
- font-size: .9em;
+ font-size: 10px;
text-align: right;
margin: 0;
padding: 3px 5px 0 5px;
@@ -253,36 +264,26 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
}
.htmlarea-window iframe {
background-color: #FFF;
- border: 1px solid #A2AAB8;
color: #000;
- padding-left: 7px;
+ border: 1px solid #A2AAB8;
}
.htmlarea-window iframe.content-iframe {
- background-color: #EFEFF4;
+ background-color: #E4E0DB;
}
-.htmlarea-window .show-color .x-form-item-body {
- margin-bottom: 5px;
+.htmlarea-window .show-color {
margin-top: 10px;
border-style: solid;
border-width: 1px;
border-color: white;
}
-.htmlarea-color-menu .htmlarea-custom-colors {
- height: 170px;
- overflow: auto;
-}
-.htmlarea-window .htmlarea-custom-colors {
- height: auto;
- margin-left: 10px;
- overflow: inherit;
-}
.htmlarea-custom-colors a {
border-color: transparent;
+ float: none;
display: block;
width: 100%;
}
-.htmlarea-window .htmlarea-custom-colors a {
- width: 100%;
+.htmlarea-custom-colors {
+ height: auto;
}
.htmlarea-custom-colors em {
display: block;
@@ -294,99 +295,101 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
width: 100%;
}
/* Selectors for the About dialogue */
-.htmlarea-window .htmlarea-about {
- padding: 5px;
-}
-.htmlarea-window .htmlarea-about-plugins .x-grid-cell-inner,
-.htmlarea-window .htmlarea-about-plugins .x-grid-hd-inner {
- white-space: normal;
+.htmlarea-window .about-plugins .x-list-body dt {
+ overflow: auto;
+ white-space: normal;
}
/* Selectors for the default image dialogue */
.htmlarea-window .image-preview {
- float: right;
- height: 300px;
- width: 99%;
+ height: 300px;
+ width: 99%;
+ float: right;
}
/* Selectors for the InsertSmiley plugin */
-.htmlarea-window .htmlarea-emoticon-array {
- padding: 5px;
+.htmlarea-window .emoticon-array {
+ padding: 10px;
}
-.htmlarea-window .htmlarea-emoticon {
+.htmlarea-window .emoticon {
display: block;
float: left;
- height: 32px;
- text-align: center;
- text-decoration: none;
+ padding: 5px;
+ width: 20px;
+ height: 20px;
vertical-align: middle;
- width: 32px;
-}
-.htmlarea-window .htmlarea-emoticon img {
- margin: 6px 0 0 0 ;
-}
-.htmlarea-window .htmlarea-emoticon:hover {
- background-color: #ffffff;
- border: 1px solid #a2aab8;
}
/* Selectors for the CharacterMap dialogue */
-.htmlarea-window .htmlarea-character-map .htmlarea-character-map-character {
- border: 1px solid transparent;
+.htmlarea-window .character-map .character {
display: block;
float: left;
+ height: 20px;
+ width: 20px;
font-size: 14px;
font-weight: bold;
- height: 26px;
- line-height: 20px;
text-align: center;
- text-decoration: none;
- vertical-align: middle !important;
- width: 26px;
+ padding: 3px;
+ border: 1px solid transparent;
}
-.htmlarea-window .htmlarea-character-map .htmlarea-character-map-character:hover {
- background-color: #ffffff;
- border: 1px solid #a2aab8;
+.htmlarea-window .character-map .character:hover {
+ background-color: #FFFFFF;
+ border: 1px solid #A2AAB8;
}
/* Selectors for the SpellChecker dialogue */
-.htmlarea-window .spell-check {
- margin-right: 3px;
+.htmlarea-window .spell-check .controls {
+ text-align: center;
+ width: 175px;
+ margin: 3px;
}
.htmlarea-window .spell-check .controls .x-btn {
margin-top: 3px;
+ margin-left: 8px;
+}
+.htmlarea-window .spell-check .contentframe {
+ float: right;
+ height: 450px;
+ margin: 9px 0px;
}
/* Selectors for the ContextMenu plugin */
.htmlarea-context-menu {
- background-color: #EFEFF4;
- color: #212424;
+ background-color:#EFEFF4;
+ color:#212424;
font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
- font-size: .9em;
+ font-size:10px;
+}
+.htmlarea-context-menu ul {
+ list-style: none;
+ margin: 0;
+}
+.htmlarea-context-menu li {
+ margin: 0;
+ padding: 0;
+ border-width: 0;
}
.htmlarea-context-menu a {
font-weight: normal;
}
-.htmlarea-context-menu .htmlarea-context-menu-item {
- height: 22px;
- margin-bottom: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-top: 0;
+.htmlarea-context-menu .button {
+ background-color: transparent;
+ margin: 0 2px 0 0;
+ padding-top: 1px;
}
-.htmlarea-context-menu .htmlarea-context-menu-separator {
+.htmlarea-context-menu .separator {
border-top: 1px solid #A2AAB8;
}
-.htmlarea-context-menu .htmlarea-context-menu-hover {
+.htmlarea-context-menu .hover {
background-image: url("images/alt_menu_mainitem_bg.gif");
background-repeat: repeat-x;
- border-color: #A2AAB8;
color: #FFF;
+ margin: 0 2px 0 0;
+ padding-top: 1px;
+ border-color: #A2AAB8;
}
.htmlarea-context-menu .x-menu-item-icon {
background-image: url("images/sprites/actions.png");
background-repeat: no-repeat;
- height: 18px;
- margin-bottom: 0;
- margin-top: 1px;
- padding-bottom: 0;
- padding-top: 0;
+ margin-top: -2px;
+ margin-left: -2px;
width: 18px;
+ height: 18px;
}
body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
background-image: url("images/sprites/actions.gif");
@@ -395,23 +398,20 @@ body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
.htmlarea-window .status-ready {
padding-left: 21px !important;
background-repeat: no-repeat;
- background-image: url("images/status/dialog-ok.png");
+ background-image: url("images/dialog-ok.png");
background-position: 0px 2px;
- height: 20px;
}
.htmlarea-window .status-info {
padding-left: 21px !important;
background-repeat: no-repeat;
- background-image: url("images/status/dialog-information.png");
+ background-image: url("images/dialog-information.png");
background-position: 0px 2px;
- height: 20px;
}
.htmlarea-window .status-wait {
padding-left: 45px !important;
background-repeat: no-repeat;
- background-image: url("images/status/loading-balls.gif");
+ background-image:url("images/loading-balls.gif");
background-position: 0px 6px;
- height: 20px;
}
.htmlarea-window .x-toolbar .x-btn {
margin-left: 5px;
@@ -419,6 +419,34 @@ body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
.htmlarea-window .x-toolbar .xtb-text {
cursor: default;
}
+/* Button background positioning in window status bar*/
+.htmlarea-window .x-toolbar .x-btn-tl{
+ background-position: 0 0;
+}
+.htmlarea-window .x-toolbar .x-btn-tr{
+ background-position: -3px 0;
+}
+.htmlarea-window .x-toolbar .x-btn-tc{
+ background-position: 0 -6px;
+}
+.htmlarea-window .x-toolbar .x-btn-ml{
+ background-position: 0 -24px;
+}
+.htmlarea-window .x-toolbar .x-btn-mr{
+ background-position: -3px -24px;
+}
+.htmlarea-window .x-toolbar .x-btn-mc{
+ background-position: 0 -1096px;
+}
+.htmlarea-window .x-toolbar .x-btn-bl{
+ background-position: 0 -3px;
+}
+.htmlarea-window .x-toolbar .x-btn-br{
+ background-position: -3px -3px;
+}
+.htmlarea-window .x-toolbar .x-btn-bc{
+ background-position: 0 -15px;
+}
/* Action icon selectors for toolbar, context menu and window headers */
.htmlarea-action-abbreviation-edit{ background-position: 0 0 !important; }
.htmlarea-action-bidi-override{ background-position: 0 -58px !important; }
diff --git a/typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php b/typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php
index efe647b1f6a4a558c7619e78a983b11a2872ead0..df0c122175962461ea92c6c6dbe7925a436719ee 100644
--- a/typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php
+++ b/typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php
@@ -227,6 +227,8 @@ class tx_rtehtmlarea_pi2 extends tx_rtehtmlarea_base {
$pageRenderer->enableExtJsDebug();
}
}
+ $pageRenderer->addCssFile('t3lib/js/extjs/ux/resize.css');
+ $pageRenderer->addJsFile('t3lib/js/extjs/ux/ext.resizable.js');
$pageRenderer->addJsFile('t3lib/js/extjs/notifications.js');
if ($this->TCEform->RTEcounter == 1) {
$this->TCEform->additionalJS_pre['rtehtmlarea-loadJScode'] = $this->wrapCDATA($this->loadJScode($this->TCEform->RTEcounter));
diff --git a/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css b/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
index 73374c3f2d775320da2ea0f48b80084d3738807d..98c2e44765a1f05d11459454363df2ec43ce9da1 100644
--- a/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
+++ b/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
@@ -19,7 +19,9 @@
padding: 0;
}
.editorWrap textarea {
- border-style: none !important;
+ border-style:solid;
+ border-color:#C7C7C7;
+ border-width:0px 1px 1px 1px;
padding:0px 1px;
margin:0;
}
@@ -34,57 +36,75 @@
}
/* Selectors for the editor toolbar */
.htmlarea .toolbar {
+ background-color: #f3f3f3;
cursor: default;
- font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
+ border: 1px solid #c7c7c7;
+ border-bottom: 0;
margin: 0;
padding: 2px;
+ font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
}
.htmlarea .toolbar .tb-group {
- clear: none;
+ clear:none;
+ float:left;
+ margin:1px 2px 0px 0px;
+ padding:0;
+}
+.htmlarea .toolbar .x-form-item {
float: left;
- margin: 1px 2px 0px 0px;
- padding: 0;
+ margin:0;
+}
+.htmlarea .toolbar .x-form-item-label {
+ vertical-align:middle;
+ background-color:transparent;
+ border-style:none;
+ margin:0;padding:3px 3px 0px 3px;
+}
+/* Fix combo box left loat in IE6 */
+body.ext-ie6 .htmlarea .toolbar .x-form-item {
+ width: 1%;
}
.htmlarea .toolbar .button {
+ background-color: transparent;
+ color: ButtonText;
border-style: solid;
+ border-width: 1px;
border-color: transparent;
border-collapse: separate;
- border-width: 1px;
- float: left;
- height: 20px;
- margin: 0 1px 4px 1px;
-}
-.htmlarea .toolbar .x-btn-default-medium {
- padding: 1px 1px 0 1px;
-}
-.htmlarea .toolbar .x-btn-default-medium-icon button {
- height: 19px;
- padding: 0;
- width: 19px !important;
-}
-.htmlarea .toolbar .x-btn-default-medium-icon button,
-.htmlarea .toolbar .x-btn-default-medium-icon .x-btn-inner,
-.htmlarea .toolbar .x-btn-default-medium-noicon button,
-.htmlarea .toolbar .x-btn-default-medium-noicon .x-btn-inner {
- height: 19px;
- line-height: 19px;
-}
-.htmlarea .toolbar .x-btn-default-medium .x-btn-inner {
+ margin: 0 0 4px 0;
padding: 0;
-}
-.htmlarea .toolbar div.x-btn-icon {
- background-color: transparent;
- background-image: none;
+ float: left;
}
/* fixing button border-color in IE6 */
body.ext-ie6 .htmlarea .toolbar .button {
border-color: #f3f3f3;
}
-.htmlarea .toolbar span.x-btn-icon {
+.htmlarea .toolbar .x-btn-mc {
+ background-color: transparent;
+ background-image: none;
+ border-style: none;
+ margin: 0;
+ padding: 0;
+}
+.htmlarea .toolbar .x-btn-tl,
+.htmlarea .toolbar .x-btn-tc,
+.htmlarea .toolbar .x-btn-tr,
+.htmlarea .toolbar .x-btn-ml,
+.htmlarea .toolbar .x-btn-mr,
+.htmlarea .toolbar .x-btn-bl,
+.htmlarea .toolbar .x-btn-bc,
+.htmlarea .toolbar .x-btn-br {
+ display: none;
+}
+.htmlarea .toolbar .x-btn-text {
background-image: url("images/sprites/actions.png");
background-repeat: no-repeat;
+ width: 20px;
+ height: 18px;
+ padding: 0;
+ margin: 1px 0 1px 2px;
}
-body.ext-ie6 .htmlarea .toolbar span.x-btn-icon {
+body.ext-ie6 .htmlarea .toolbar .x-btn-text {
background-image: url("images/sprites/actions.gif");
}
/* fixing button background-color and border-color in IE6 */
@@ -99,12 +119,14 @@ body.ext-ie6 .htmlarea .toolbar .buttonHover,
/* fixing button background-color and border-color in IE6 */
body.ext-ie6 .htmlarea .toolbar .buttonActive,
body.ext-ie6 .htmlarea .toolbar .buttonPressed,
+body.ext-ie6 .htmlarea-context-menu .buttonActive,
.htmlarea .toolbar .buttonActive,
-.htmlarea .toolbar .buttonPressed {
+.htmlarea .toolbar .buttonPressed,
+.htmlarea-context-menu .buttonActive {
border-style: solid;
border-width: 1px;
border-color: #C5C5D5 #C5C5D5 #C5C5D5 #C5C5D5;
- background-color: ButtonHighlight !important;
+ background-color: ButtonHighlight;
text-decoration: none;
opacity: 1.00;
}
@@ -116,50 +138,56 @@ body.ext-ie6 .htmlarea .toolbar .buttonPressed,
overflow: hidden;
text-align: center;
border: 1px solid ButtonShadow;
- margin: 3px 2px 3px 2px;
+ margin: 3px 1px 5px 1px;
padding: 0 3px;
float: left;
}
-.htmlarea .toolbar .htmlarea-toolbar-separator {
- border-color: ButtonShadow;
- border-style: solid;
- border-width: 0 0 0 1px;
- float: left;
- height: 14px;
- margin: 5px 2px 5px 2px;
- width: 1px;
+.htmlarea .toolbar .buttonDisabled {
+ filter: gray() alpha(opacity=25);
+ opacity: 0.25;
+ -moz-opacity: 0.25;
}
-.htmlarea .toolbar .htmlarea-toolbar-spacer {
+.htmlarea .toolbar .separator {
+ background-color: transparent;
+ background-image: url("images/separator.gif");
+ background-repeat: no-repeat;
+ background-position: 0 -1px;
+ width: 7px;
+ height: 23px;
+ border: 1px solid #EFEFF4;
+ margin-bottom: 1px;
float: left;
- height: 24px;
}
-.htmlarea .toolbar .htmlarea-clear-left {
- clear: left;
- height: 1px;
+.htmlarea .toolbar .space {
+ background-color:transparent;
+ height:22px;
+ border-style:none;
+ margin:0;padding:0 1px;
+ float:left;
}
-.htmlarea .toolbar .x-form-item {
- float: left;
- margin: 0 1px 2px 1px !important;
+.htmlarea .toolbar .select {
+ color: WindowText;
+ margin: 0 0 4px 0;
}
-/* Fix combo box left loat in IE6 */
-body.ext-ie6 .htmlarea .toolbar .x-form-item {
- width: 1%;
+.htmlarea .toolbar .x-form-item label.x-form-item-label{
+ padding-right: 0;
}
-.htmlarea .toolbar .x-form-item-label {
- background-color: transparent;
- border-style: none;
- color: ButtonText;
- font-size: .9em;
- margin: 0;
- padding: 3px 0 0 3px;
- vertical-align: middle;
+.htmlarea .toolbar .x-form-field-wrap .x-form-trigger {
+ right: 0;
+}
+.htmlarea .toolbar .select, .htmlarea .toolbar .select:hover, .htmlarea .toolbar .select:active {
+ background-color:Window;
+}
+.htmlarea .toolbar .select .buttonDisabled {
+ color:GrayText;
+ background-color:#EFEFF4;
}
.htmlarea .editorIframe {
- border-style: none;
- clear: both;
- margin: 0;
- padding: 0;
- width: 100%;
+ clear:both;
+ width:100%;
+ border:1px solid #c7c7c7;
+ border-bottom: none;
+ margin:0;padding:0;
}
.htmlarea .noStatusBar {
border-bottom:1px solid #A2AAB8;
@@ -172,7 +200,7 @@ body.ext-ie6 .htmlarea .toolbar .x-form-item {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #7f7f7f), color-stop(1, #5b5b5b));
background-repeat: repeat-x;
color: #FFFFFF;
- font-size: .9em;
+ font-size: 10px;
border: 1px solid #c7c7c7;
margin: 0;
padding: 0 3px;
@@ -194,36 +222,24 @@ body.ext-ie6 .htmlarea .toolbar .x-form-item {
.htmlarea .statusBar .statusBarWordCount {
float: right;
}
-/* Selectors for combo list */
-.htmlarea-combo-list ul {
- margin-left: 0;
- padding-left: 5px;
-}
-.htmlarea-combo-list ul li {
- margin-left: 0;
- padding-left: 0;
-}
-.htmlarea-combo-list-item {
- font-size: .9em;
- text-align: left;
-}
/* Selectors for dialogue windows */
-.htmlarea-window .x-window-header-icon {
+.htmlarea-window .x-panel-icon {
background-image: url("images/sprites/actions.png");
background-repeat: no-repeat;
- height: 18px;
- width: 18px;
+ margin-top: 2px;
+ height: 22px;
}
-body.ext-ie6 .htmlarea-window .x-window-header-icon {
+body.ext-ie6 .htmlarea-window .x-panel-icon {
background-image: url("images/sprites/actions.gif");
}
.htmlarea-window .x-window-header .t3-help-link {
+ color: #fff;
}
.htmlarea-window ul.x-tab-strip {
list-style: none;
}
-.htmlarea-window .x-panel-body {
- background-color: #efeff4;
+.htmlarea-window .x-tab-panel-body {
+ background-color: #EFEFF4;
}
.htmlarea-window .x-fieldset {
margin: 3px;
@@ -239,7 +255,7 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
clear: left;
}
.htmlarea-window .x-form-item-label {
- font-size: .9em;
+ font-size: 10px;
text-align: right;
margin: 0;
padding: 3px 5px 0 5px;
@@ -253,15 +269,13 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
}
.htmlarea-window iframe {
background-color: #FFF;
- border: 1px solid #A2AAB8;
color: #000;
- padding-left: 7px;
+ border: 1px solid #A2AAB8;
}
.htmlarea-window iframe.content-iframe {
background-color: #EFEFF4;
}
-.htmlarea-window .show-color .x-form-item-body {
- margin-bottom: 5px;
+.htmlarea-window .show-color {
margin-top: 10px;
border-style: solid;
border-width: 1px;
@@ -273,13 +287,13 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
}
.htmlarea-window .htmlarea-custom-colors {
height: auto;
- margin-left: 10px;
overflow: inherit;
}
.htmlarea-custom-colors a {
border-color: transparent;
+ float: none;
display: block;
- width: 100%;
+ width: 90%;
}
.htmlarea-window .htmlarea-custom-colors a {
width: 100%;
@@ -294,99 +308,101 @@ body.ext-ie6 .htmlarea-window .x-window-header-icon {
width: 100%;
}
/* Selectors for the About dialogue */
-.htmlarea-window .htmlarea-about {
- padding: 5px;
-}
-.htmlarea-window .htmlarea-about-plugins .x-grid-cell-inner,
-.htmlarea-window .htmlarea-about-plugins .x-grid-hd-inner {
- white-space: normal;
+.htmlarea-window .about-plugins .x-list-body dt {
+ overflow: auto;
+ white-space: normal;
}
/* Selectors for the default image dialogue */
.htmlarea-window .image-preview {
- float: right;
- height: 300px;
- width: 99%;
+ height: 300px;
+ width: 99%;
+ float: right;
}
/* Selectors for the InsertSmiley plugin */
-.htmlarea-window .htmlarea-emoticon-array {
- padding: 5px;
+.htmlarea-window .emoticon-array {
+ padding: 10px;
}
-.htmlarea-window .htmlarea-emoticon {
+.htmlarea-window .emoticon {
display: block;
float: left;
- height: 32px;
- text-align: center;
- text-decoration: none;
+ padding: 5px;
+ width: 20px;
+ height: 20px;
vertical-align: middle;
- width: 32px;
-}
-.htmlarea-window .htmlarea-emoticon img {
- margin: 6px 0 0 0 ;
-}
-.htmlarea-window .htmlarea-emoticon:hover {
- background-color: #ffffff;
- border: 1px solid #a2aab8;
}
/* Selectors for the CharacterMap dialogue */
-.htmlarea-window .htmlarea-character-map .htmlarea-character-map-character {
- border: 1px solid transparent;
+.htmlarea-window .character-map .character {
display: block;
float: left;
+ height: 20px;
+ width: 20px;
font-size: 14px;
font-weight: bold;
- height: 26px;
- line-height: 20px;
text-align: center;
- text-decoration: none;
- vertical-align: middle !important;
- width: 26px;
+ padding: 3px;
+ border: 1px solid transparent;
}
-.htmlarea-window .htmlarea-character-map .htmlarea-character-map-character:hover {
- background-color: #ffffff;
- border: 1px solid #a2aab8;
+.htmlarea-window .character-map .character:hover {
+ background-color: #FFFFFF;
+ border: 1px solid #A2AAB8;
}
/* Selectors for the SpellChecker dialogue */
-.htmlarea-window .spell-check {
- margin-right: 3px;
+.htmlarea-window .spell-check .controls {
+ text-align: center;
+ width: 175px;
+ margin: 3px;
}
.htmlarea-window .spell-check .controls .x-btn {
margin-top: 3px;
+ margin-left: 8px;
+}
+.htmlarea-window .spell-check .contentframe {
+ float: right;
+ height: 450px;
+ margin: 9px 0px;
}
/* Selectors for the ContextMenu plugin */
.htmlarea-context-menu {
- background-color: #EFEFF4;
- color: #212424;
+ background-color:#EFEFF4;
+ color:#212424;
font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
- font-size: .9em;
+ font-size:10px;
+}
+.htmlarea-context-menu ul {
+ list-style: none;
+ margin: 0;
+}
+.htmlarea-context-menu li {
+ margin: 0;
+ padding: 0;
+ border-width: 0;
}
.htmlarea-context-menu a {
font-weight: normal;
}
-.htmlarea-context-menu .htmlarea-context-menu-item {
- height: 22px;
- margin-bottom: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-top: 0;
+.htmlarea-context-menu .button {
+ background-color: transparent;
+ margin: 0 2px 0 0;
+ padding-top: 1px;
}
-.htmlarea-context-menu .htmlarea-context-menu-separator {
+.htmlarea-context-menu .separator {
border-top: 1px solid #A2AAB8;
}
-.htmlarea-context-menu .htmlarea-context-menu-hover {
+.htmlarea-context-menu .hover {
background-image: url("images/alt_menu_mainitem_bg.gif");
background-repeat: repeat-x;
- border-color: #A2AAB8;
color: #FFF;
+ margin: 0 2px 0 0;
+ padding-top: 1px;
+ border-color: #A2AAB8;
}
.htmlarea-context-menu .x-menu-item-icon {
background-image: url("images/sprites/actions.png");
background-repeat: no-repeat;
- height: 18px;
- margin-bottom: 0;
- margin-top: 1px;
- padding-bottom: 0;
- padding-top: 0;
+ margin-top: -2px;
+ margin-left: -2px;
width: 18px;
+ height: 18px;
}
body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
background-image: url("images/sprites/actions.gif");
@@ -397,21 +413,18 @@ body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
background-repeat: no-repeat;
background-image: url("images/status/dialog-ok.png");
background-position: 0px 2px;
- height: 20px;
}
.htmlarea-window .status-info {
padding-left: 21px !important;
background-repeat: no-repeat;
background-image: url("images/status/dialog-information.png");
background-position: 0px 2px;
- height: 20px;
}
.htmlarea-window .status-wait {
padding-left: 45px !important;
background-repeat: no-repeat;
background-image: url("images/status/loading-balls.gif");
background-position: 0px 6px;
- height: 20px;
}
.htmlarea-window .x-toolbar .x-btn {
margin-left: 5px;
@@ -419,6 +432,34 @@ body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
.htmlarea-window .x-toolbar .xtb-text {
cursor: default;
}
+/* Button background positioning in window status bar*/
+.htmlarea-window .x-toolbar .x-btn-tl{
+ background-position: 0 0;
+}
+.htmlarea-window .x-toolbar .x-btn-tr{
+ background-position: -3px 0;
+}
+.htmlarea-window .x-toolbar .x-btn-tc{
+ background-position: 0 -6px;
+}
+.htmlarea-window .x-toolbar .x-btn-ml{
+ background-position: 0 -24px;
+}
+.htmlarea-window .x-toolbar .x-btn-mr{
+ background-position: -3px -24px;
+}
+.htmlarea-window .x-toolbar .x-btn-mc{
+ background-position: 0 -1096px;
+}
+.htmlarea-window .x-toolbar .x-btn-bl{
+ background-position: 0 -3px;
+}
+.htmlarea-window .x-toolbar .x-btn-br{
+ background-position: -3px -3px;
+}
+.htmlarea-window .x-toolbar .x-btn-bc{
+ background-position: 0 -15px;
+}
/* Action icon selectors for toolbar, context menu and window headers */
.htmlarea-action-abbreviation-edit{ background-position: 0 0 !important; }
.htmlarea-action-bidi-override{ background-position: 0 -58px !important; }