Tiny MCE Wahnsinn - 200 Puls hab ich!

Shopware 5 Administration
1

Wie die meisten von Euch wahrscheinlich wissen, löschte der Tiny MCE hin und wieder einfach so Code, den er nicht mag! Da ist es auch vollkommen egal, ob der Tiny MCE in Shopware, Joomla oder Wordpress sitzt.

Warum das so ist, ist mir bis heute nicht wirklich klar geworden. Nur, in Joomla kann ich z.B. ganz easy den Tiny MCE abschalten! Ein Klick und vorbei ist es mit dem leidigen Löschen! In Shopware scheint dies leider nicht möglich zu sein - also das Abschalten des Tiny MCE - und somit hat man keine Möglichkeiten in Shopseiten solche simple Dinge zu machen, wie z.B.das hier:

Das div lässt er gerade noch stehen, den Rest killt er gnadenlos raus!

Ahhhhhhhhhhhhh! WTF!?

Nun gut, ruhig Blut, Brauner.

Ein kluger Mann hat ja mal was dagegen unternommen und vor Jahren ein Plugin geschrieben, welches diese Probleme wohl in den Griff bekommen soll. Das Plugin nennt sich wohl SwagAdvancedTinyMce nennt. Aha, sieh an…

Also flux das Ding heruntergeladen und installiert.

Passt.

Eine Dokumentation sucht man jedoch vergebens. Egal…, also alles schnell ausprobiert und ständig gescheitert. Dachte das Plugin will einfach nicht, bis ich dann dies hier - unter “extended_valid_elements” notiert hab:

div[*],
span[*],
...

Super, was ein Segen!

Nun frag ich mich ganz ehrlich:

Warum ist dieses Plugin nicht schon lange fester Bestandteil von Shopware bzw. warum gibt es keinen Knopf zum Abschalten des leidigen Tiny MCE???

Und der Hammer ist ja auch noch: Diese Plugin-Version des Tiny MCE sieht nicht nur viel schicker aus…, nein, sie hat auch noch geile Funktionen, die jedem das Leben enorm erleichtern.

Warum also will man sowas nicht im System haben!??!?!

Ich versteh es nicht…, sorry. Thumb-down

2

Die Erweiterung des Editors gibt es im Standard seit Shopware 3 :slight_smile:

Bei der Konfiguration scheiden sich sicherlich die Geister. Damit kann man auch viel kaputt machen. Insofern ist das m.M.n. im Plugin ganz gut aufgehoben. Das was das Plugin bietet, müsste erstmal aufwendig aufbereitet werden, damit es auch nicht Technik-Affine Leute bedienen können. Insofern ist das nicht einfach “in den Core packen”. Das Plugin richtet sich an Leute, die wissen was sie machen - daher ist das als Plugin auch gut so.

1 „Gefällt mir“
3

@Moritz Naczenski schrieb:

https://community.shopware.com/Editor-TinyMCE-Editor_detail_788.html#Werkzeugleisten_im_erweiterten_Editor_.28TinyMCE.29

Die Erweiterung des Editors gibt es im Standard seit Shopware 3 :)

Na das es diese erweiteret Ansicht gibt ist mir bestens bekannt. Nur damit kann ich auch kein span Element in den Editor hacken!

Es geht mir um das Plugin  SwagAdvancedTinyMce und dessen Funktionserweiterung, also das der Tiny dann solche Dinge einfach drin lässt bzw. nicht mehr löscht.

Joomla hat das eigentlich ganz gut gelöst und das ist sicherlich keine Raktenwissenschaft:

1061×197 4.58 KB

Und…, einen Knopf zum Abschalten des Tiny MCE sollte auch für den Nicht-Technik-Affinen Menschen o.k. sein.

Da muss ich echt sagen: OXID hat es damals eigentlich richtig gemacht. Das gab’s überhaupt kein Editor! Wenn Du einen haben wolltest, dann musstest Du Dir den selber rein basteln, was auch echt recht einfach ging.

Ganz ehrlich…, mir wäre der CodeMirror hundert mal lieber, als so ein vergewaltigter Tiny MCE! Wink

4

Ganz ehrlich…, mir wäre der CodeMirror hundert mal lieber, als so ein vergewaltigter Tiny MCE!  Wink

Kannste dir in 5 Minuten schreiben.

Ext.define('Shopware.form.field.TinyMCE',{
extend: 'Shopware.form.field.CodeMirror',
mode: 'htmlembedded'
});

 

5

Shyim…, wo mach ich das genau!? Grin

6

[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“)‍ : Welche Version des Tiny MCE ist den momentan an Board von Shopware!?

7 
//{block name="backend/base/attribute/form" append}
Ext.define('Shopware.form.field.TinyMCE',{
extend: 'Shopware.form.field.CodeMirror',
constructor(config) {
	var me = this;

	if (!Ext.isDefined(config.mode)) {
		config.mode = 'htmlmixed';
    }

	me.callParent(arguments);
}
});
//{/block}

 

Das Template einfach im PostDispatch vom Backend Base Controller laden :slight_smile:

 

@Murmeltier‍ 3.5.8

8

Danke für den Codefetzen, aber jetzt steh ich tatsächlich voll auf dem Schlauch. Du bist einfach zu schlau für mich und ich kann damit gar nichts anfangen.

Und sorry, für mich hört sich das in ungefähr so an:

Mach mal ein Frontside Pop Shove-It über das Gap mit anschließendem Backside 50-50 Grind am Handrail

Hä!??!?!

Ich glaube es wird Zeit das Shopsystem endlich zu wechseln… Sticking-out-tongue

9

So meinte ich das als Plugin GitHub - shyim/ShyimCodemirror: Simple plugin which replaces in backend all tinymce fields with a html codemirror :slight_smile:

5 „Gefällt mir“
10

Kam heute endlich mal dazu es auszuprobieren. Super Shyim, funzt einwandfrei:

910×238 9.3 KB

Bin total begeistert! Nochmal vielen Dank für Deine Mühe!!! Thumb-Up

11

Ich kann dir übrigens auch den erweiteren Tiny MCE Editor hier empfehlen. Ein altes Shopware Schätzchen, wie ich finde:

 

Hier kannst du eben bestimmte html Tags der Whitelist hinzufügen. Das war für uns auch u.A. für die Font Awesome mit Elementen wichtig.

12

@impuls schrieb:

Ich kann dir übrigens auch den erweiteren Tiny MCE Editor hier empfehlen. Ein altes Shopware Schätzchen, wie ich finde:

Sorry, aber das Plugin hat bei mir leider nur unzureichend funktioniert. Mal gings, dann wieder nicht. Warum auch immer. Ziemlich schnell also wieder deinstalliert und Shyim’s Plugin benutzt. Was soll ich sagen? Simpel und einfach… oder weniger ist oft mehr! Ein Traum! Punkt.

Das Teil ist mir zudem hundertmal lieber wie so ein frisierter Tiny MCE mit ein paar Einstellungen. Ich persönlich kann nämlich gut und gerne auf diese Klickibunti Welt aus X-tausend Schaltflächen verzichten. Was nützt mir letzlich der ganze Scheiss und das geklicke duch die Icons und Dropdowns, wenn ich mit EMMET - im Texteditor meiner Wahl - alles viel schneller machen kann. Zen Coding lässt grüßen!  Wink

Zudem finde ich die Tatsache schon abartig, das mir der Tiny MCE eine Schaltfläche für den Quellcode anbietet, den er mir später dann aber wieder rauschlöscht. Somit wird die Schaltfläche für die Quellcode Ansicht eigentlich ja nur ab absurdum geführt!

13

@Shyim schrieb:

So meinte ich das als Plugin https://github.com/shyim/ShyimCodemirror :)

 

Kleinen Tipp für uns, wie wir das installiert bekommen  Halo?

14

Einfach entpacken und via FTP in den richtigen Ordner schmeissen:

/custom/plugins

Dann Pluginmanager aufmachen und installieren. That’s it! Wink

 

15

Hat geklappt. Habt ihr auch diesen Darstellungsfehler was den Scrollbalken innerhalb des Felds angeht?

707×300 20.9 KB

16

Nein…

742×315 4.56 KB

Nur wenn ich viel Code aus meinem Editor einkopiere, dann gibts max. einen horizontalen Scrollbalken, was ja auch ok ist:

729×317 8.65 KB

 

17

@Murmeltier schrieb:

Nein…

image
image742×315 4.56 KB

Nur wenn ich viel Code aus meinem Editor einkopiere, dann gibts max. einen horizontalen Scrollbalken, was ja auch ok ist:

image
image729×317 8.65 KB

 

Ist die Ansicht aus der Artikelbeschreibung oder an welcher Stelle hast du den Screenshot gemacht? LG

18

Screenshot aus den Shopseiten…, aber ich seh gerade, in den Artikel habe ich das auch so wie Du:

@Shyim‍: Hilfeeeeeeeeeeeeeeeeeeeeeeee! Sticking-out-tongue

19

Ok, scheint nur ein CSS Problem zu sein und hiermit kann das fix behoben werden:

.CodeMirror-scroll {
	overflow: auto !important;
}

 

20

@Murmeltier schrieb:

Ok, scheint nur ein CSS Problem zu sein und hiermit kann das fix behoben werden:

.CodeMirror-scroll {
overflow: auto !important;
}

… wo genau hast du das wieder eingesetzt?  Sticking-out-tongue