ICH HABS GEFUNDEN!!! 
Das settings Objekt ist eine statische Eigenschaft der Klasse Shopware.form.field.TinyMCE, das heißt man kann dementsprechen überall ganz einfach den Wert nach belieben bearbeiten. Was man dafür braucht, ist hier schön erklärt: https://extjsexamples.blogspot.de/2014/01/extjs-4-classes-statics-examples.html
Und so könnte es dann zum Beispiel in einem Custom Einkaufswelten-Element aussehen:
//{block name="emotion_components/backend/unsplash"}
//{namespace name=backend/emotion/view/components/banner_slider}
Ext.define('Shopware.apps.Emotion.view.components.Unsplash', {
requires: ['Shopware.form.field.TinyMCE'],
extend: 'Shopware.apps.Emotion.view.components.Base',
alias: 'widget.emotion-components-unsplash',
/**
* Snippets for the component.
* @object
*/
snippets: {
'select_banner': '{s name=select_banner}Select banner(s){/s}',
'banner_administration': '{s name=banner_administration}Banner administration{/s}',
'path': '{s name=path}Image path{/s}',
'actions': '{s name=actions}Action(s){/s}',
'link': '{s name=link}Link{/s}',
'altText': '{s name=altText}Alternative text{/s}',
'title': '{s name=title}Title{/s}',
banner_slider_title: '{s name=banner_slider_title}Title{/s}',
banner_slider_arrows: '{s name=banner_slider_arrows}Display arrows{/s}',
banner_slider_numbers: {
fieldLabel: '{s name=banner_slider_numbers/label}Display numbers{/s}',
supportText: '{s name=banner_slider_numbers/support}Please note that this setting only affects the "emotion" template.{/s}'
},
banner_slider_scrollspeed: '{s name=banner_slider_scrollspeed}Scroll speed{/s}',
banner_slider_rotation: '{s name=banner_slider_rotation}Rotate automatically{/s}',
banner_slider_rotatespeed: '{s name=banner_slider_rotatespeed}Rotation speed{/s}'
},
declareNsGlobals: function () {
Ext.ns("Unsplash.componentView");
Unsplash.componentView.imgPos = -1;
},
setupStaticSettings: function () {
var localSettings = Shopware.form.field.TinyMCE.settings;
var wholeStr = localSettings.theme_advanced_buttons1;
if (wholeStr.indexOf("save") < 0) {
var stringStart = wholeStr.substring(0, wholeStr.indexOf("undo"));
var stringEnd = wholeStr.substring(wholeStr.indexOf("undo"));
wholeStr = stringStart + "save," + stringEnd;
wholeStr = wholeStr.trim();
console.log("whole new string: ", wholeStr);
localSettings.theme_advanced_buttons1 = wholeStr;
Shopware.form.field.TinyMCE.setGlobalSettings(localSettings);
}
},
/**
* Initialize the component.
*
* @public
* @return void
*/
initComponent: function () {
var me = this;
me.callParent(arguments);
me.declareNsGlobals();
me.setupStaticSettings();
// me.setDefaultValues();
me.add(me.createBannerFieldset());
me.initGridData();
// me.refreshHiddenValue();
},
/**
* Creates the fieldset which holds the banner administration. The method
* also creates the banner store and registers the drag and drop plugin
* for the grid.
*
* @public
* @return [object] Ext.form.FieldSet
*/
createBannerFieldset: function () {
var me = this;
me.slideEditorItem = me.getSlideEditorItem();
me.mediaSelection = Ext.create('Shopware.form.field.MediaSelection', {
fieldLabel: me.snippets.select_banner,
labelWidth: 100,
albumId: -3,
listeners: {
scope: me,
selectMedia: me.onAddBannerToGrid
}
});
me.bannerStore = Ext.create('Ext.data.Store', {
fields: ['position', 'path', 'link', 'altText', 'title', 'mediaId', 'slideText']
});
me.ddGridPlugin = Ext.create('Ext.grid.plugin.DragDrop');
me.cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
});
me.bannerGrid = Ext.create('Ext.grid.Panel', {
columns: me.createColumns(),
autoScroll: true,
store: me.bannerStore,
height: 200,
plugins: [me.cellEditing],
viewConfig: {
plugins: [me.ddGridPlugin],
listeners: {
scope: me,
drop: me.onRepositionBanner
}
},
listeners: {
scope: me,
edit: function () {
me.refreshHiddenValue();
}
}
});
return me.bannerFieldset = Ext.create('Ext.form.FieldSet', {
title: me.snippets.banner_administration,
layout: 'anchor',
'defaults': { anchor: '100%' },
items: [me.slideEditorItem, me.mediaSelection, me.bannerGrid]
});
},
/**
* Factory method for the TinyMCE form element creation.
*
* @return [object] Shopware.form.field.TinyMCE
*/
getSlideEditorItem: function () {
var editor = Ext.create('Shopware.form.field.TinyMCE', {
name: 'slide_editor',
id: 'slide_editor',
translatable: false,
fieldLabel: 'Slide Text',
labelWidth: 100
});
var editorId = editor.getEditor().getInputId();
Ext.Object.merge(Shopware.form.field.TinyMCE.settings, editor);
// reinit completely the TinyMCE instance over an global watcher in order to get our new button displayed
tinymce.EditorManager.execCommand('mceRemoveEditor', true, editorId);
tinymce.EditorManager.execCommand('mceAddEditor', true, editorId);
return editor;
},
/**
* Helper method which creates the column model
* for the banner administration grid panel.
*
* @public
* @return [array] computed columns
*/
createColumns: function () {
var me = this, snippets = me.snippets;
return [ {
header: '⚌',
width: 24,
hideable: false,
renderer: me.renderSorthandleColumn
}, {
dataIndex: 'path',
header: snippets.path,
flex: 1
}, {
dataIndex: 'link',
header: snippets.link,
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: true
}
}, {
dataIndex: 'altText',
header: snippets.altText,
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: true
}
}, {
dataIndex: 'title',
header: snippets.title,
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: true
}
}, {
xtype: 'actioncolumn',
header: snippets.actions,
width: 60,
items: [ {
iconCls: 'sprite-minus-circle',
action: 'delete-banner',
scope: me,
handler: me.onDeleteBanner
}, {
iconCls: 'sprite-pencil',
action: 'editSlideTextWhatever',
tooltip: "Slide Text im Editor laden und ändern",
scope: me,
handler: me.onEditSlideText
} ]
} ];
}
});
//{/block}
Funktioniert soweit, ABER was noch nicht geht: Aus irgendwelchen Gründen wird der TinyMCE erst zu einem recht spätem Zeitpunkt im Programmablauf initialisiert, was dazu führt, dass ich ihn nicht in der Methode getSlideEditorItem reinitialisieren kann, damit der Speichern Button in der Toolbar angezeigt wird. Denn ich habe leider keine Möglichkeit gefunden, die Shopware.form.field.TinyMCE objektspezifischen settings direkt so anzupassen, dass der sofort mit dabei ist. Leider weiß ich auch nicht, was man den Konstruktor von Ext.create(“Shopware.form.field.TinyMCE”, { }) in dem Objekt noch mitgeben muss oder kann, damit der Speichern Button gleich direkt mit in die objektspezifischen settings aufgenommen wird. Ich meine wäre das dann sowas hier:
var editor = Ext.create('Shopware.form.field.TinyMCE', {
name: 'slide_editor',
id: 'slide_editor',
translatable: false,
fieldLabel: 'Slide Text',
labelWidth: 100,
// die fragliche Stelle: Wie mache ich das hier?
"settings": {
theme_advanced_buttons1: "save,"
}
});
???
Ich sehe also aktuell zwei mögliche Lösungsansätze:
-
Wie gerade beschrieben Übergabe mittels Konstruktor oder
-
Irgendwann später, also nach dem initComponent() meines Moduls in irgendeinem Event, damit sichergestellt ist, dass der TinyMCE bereits initialisiert worden ist. Aber welches Event?
Für Hilfe oder Tipps wäre ich sehr dankbar.
PS: Ich hatte als Grundlage für mein eigenes Widget das aus dem Shopware Buch her genommen. Deswegen bitte nicht wundern, warum dort noch unsplash Sachen stehen. Den Namen wollte ich kurz vor der Live Nahme ändern. Außerdem ist auch viel vom Banner Slider abgekupfert worden.