ich möchte die tinymce settings erweitern/modifizieren.
wie machen wir das?
hier wird ein „userSettings“ genannt:
shopware/Shopware.form.field.TinyMCE.js at 5.1 · shopware/shopware · GitHub
wo können wir diese definieren?
oder müssen/können wir das Shopware.form.field.TinyMCE ding extenden*?
wenn ja, wie genau? (welche event ist es? welche block erweitert man?)
Reicht schon Einstellungen->Benutzer->Bei Spalte Optionen auf den Kopf klicken->Haken bei Erweiterter Editor?
was soll diese einstellung machen?
die shopware (5.1.3) vanilla einkaufselement HTML-Element editor sieht weiterhin aus wie vorher.
ps. hab aber es jetzt durch eigenen einkaufswelt element gelöst (hab die shopware tinymce editor kopiert, umbenannt, und meine settings addiert…)
ps. hab aber es jetzt durch eigenen einkaufswelt element gelöst (hab die shopware tinymce editor kopiert, umbenannt, und meine settings addiert…)
Dann hättest Du dich auch gleich von der Klasse ableiten können und mit Ext.override die Variable settings überschreiben können.
Ich stehe aktuell vor dem selben Problem wie Du. Ich brauche den Speichern Button im TinyMCE. Mit dem vanilla TinyMCE ohne ExtJS wäre das kein Problem, 5 Minuten Sache. Shopware hat soweit ich das bisher sagen kann, leider keine Möglichkeit geschaffen, das ganze auch so schnell im Shopware und ExtJS Kontext umzusetzen. Vorallem frage ich mich, was der Unterschied zwischen statics.settings, this.settings und setGlobalSettings in Deiner Eingangs erwähnten Datei ist. Ebenfalls wird bei der Methode setGlobalSettings auch nirgends erwähnt, ob das komplett Überschreiben ist, oder ob man da auch einfach einen beliebigen Wert anhängen (append) kann.
Schonmal das Plugin von Heinter angeschaut?
https://forum.shopware.com/discussion/comment/151702/#Comment_151702
Vielleicht findet man da einen Ansatz/Beispiel.
[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“) Nein, leider nicht. Das Plugin von dem ist auch recht schmal. Es ist ja nicht so, dass diese Funktionalität nicht vorhanden wäre, sie wird nur absichtlich von Shopware unterbunden, weil es z. B. im Artikel Dialog im Backend einen extra speichern Button unten gibt, was dem direkt im TinyMCE überflüssig macht. Ich brauche das konkret in meinem Fall, um den Wert vom TinyMCE wieder in die referenzierte ExtJS Grid Spalte zu übernehmen (Artikel Grid). Ich habe quasi ein Editor Feld gebaut, dass sich immer auf eine ausgwählte Grid Zeile referenziert. Der Inline-Editor beim Doppelklick, so wie in der Artikel Übersicht, ist für Rich Text etwas zu klein geraten…
Edit: Kennt sich da niemand vom Shopware Dev Team damit aus? Irgendwer muss das doch gemacht haben.
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.