Besseres WYSIWYG und Template / Snippets mit TinyMCE

Hallo zusammen, Ich setze fogendes bei mir seit einigen Tagen ein und es klappt problemlos -vielleicht ist das für den Einen oder Anderen hier ebenfalls hilfreich. Was im TinyMCE Editor zu sehen ist, entspricht nicht der späteren Seitenansicht im Shopsystem – WYSIWYG im eigentlichen Sinne findet also nicht statt. Bisher war mir nur bekannt, dass man z. B. Selektoren wie IDs und Klassen im HTML Editor des TinyMCE (oder externer Editor) vergibt und diese später dann im CSS-File des Templates hinterlegt und mit CSS Befehlen füllt. Bei neuen Projekten / Seiten musste man dann auf das HTML eines bestehenden Artikels zurückgreifen und Anpassungen durchführen. Auch das Arbeiten mit Inline-Styles im TinyMCE macht selten Freude und ein passgenauer Seitenaufbau ist damit ebenso wenig möglich. Offenbar lässt sich das deutlich verbessern, wenn folgende Änderungen vorgenommen werden. Vorteil: Neue Templates/Snippets müssen in Zukunft nur einmalig in der template_list.js aufgeführt sein. Das Template/Snippet .html-File an sich muss im Ordner custom hinterlegt werden. Das CSS wird zentral in der mycontent.css gespeichert. Änderungen am CSS (z. B. per Firebug) sind im TinyMCE Editor als auch in der Seitenansicht möglich. Beide Systeme (Shopware und TinyMCE) greifen auf eine .css Datei zu, die mycontent.css. Nun ist Folgendes möglich: - HTML/CSS-Templates, Layouts und Snippets als Vorlage zu erstellen und im TinyMCE per Button aufrufen - WYSIWYG: Ansicht im TinyMCE-Editor entspricht Seitenansicht* - Selbst erstellte Selektoren wie Klassen sind dem TinyMCE nun bekannt und lassen sich per Button aufrufen/austauschen *Es kann vorkommen, das sich die Ansicht vom Tiny MCE und Shopseite dennoch unterscheidet - mit dem Firebug kann man solche Abweichungen jedoch leicht ausfindig machen und Korrekturen in der mycontent.css einbringen. (z.B. unterschiedliches Margin: ist der Wert nicht definiert, kann es zu einer Vererbung kommen. In dem Fall dann einfach den gewünschten Wert definieren, so das eine ungewollte Vererbung verhindert wird) Weitere Möglichkeiten: Ich habe das zwar momentan nur an der Blog-Detailseite probiert, es sollte sich aber auch z. B. für folgende Vorhaben nutzen lassen (betreffs der Bereiche der Seite, die mit TinyMCE erstellt sind): - Layouts/Templates für Aktionen - Layouts/Templates für Shopseiten - Layouts/Templates für Blogseiten - Tabellen in der Artikeldetailseite - Erstellen von universellen Snippets, die man öfters braucht (siehe Beispiel unten) - …Weiterhin die Verwendung von Generatoren für CSS/HTML Layouts und Tabellen, sofern diese HTML und CSS getrennt zur Verfügung stellen. Es sollten sich auch vorgefertigte CSS/HTML Templates verwenden lassen, die es zu Abertausenden im Netz gibt – hierzu sind ggf. noch einige Anpassungen zu machen wie Breite anpassen, Header und Footer entfernen usw., aber prinzipiell sollte das möglich sein. Screenshots: Vorweg noch einige Infos und Tipps: - Der Inhalt (untergeordnete Selektoren, Texte, Bilder, Tabellen) sollte immer in einem übergeordneten DIV-Container liegen (einzelne Teile wie Snippets nicht zwingend), der die vorhandene Breite im Shop-Layout besitzt. Also wenn die Blog-Detailseite z. B. eine Breite von 970px hat, sollte der DIV-Container ebenfalls diese Breite haben; Soll eine Tabelle in der Artikeldetailseite in einem TAB-Reiter einbaut werden, dann ist die Breite die dort zur Verfügung steht zu vergeben usw. Das lässt sich per Firebug ja schnell herausfinden. - Wenn Texte aus anderen Anwendungen übernommen werden und Selektoren wie Klassen mit Texteigenschaften vergeben sind, am besten immer als Plaintext einfügen. Im TinyMCE gibt es dafür einen Button oder man macht eine Zwischenkopie z. B. in Notepad++. Sonst übernimmt TinyMCE die Eigenschaften des kopierten Textes und es kommt ggf. zu ungewollten Effekten. Man kann aber weiterhin Inline-Styles verwenden, wenn man will. Am besten aber nur solche, die nicht den Seitenaufbau beeinflussen, also z. B. h3, bold, usw. - Änderungen an den Shopware-Core-Dateien sind nicht update-sicher. Man sollte vorher Sicherheitskopien der Dateien anlegen. Wenn es Updates für geänderte Core-Dateien gibt, sind die Änderungen erneut einzufügen – mehr ist es aber auch nicht. - Updates des TinyMCE sind problemlos möglich, da hierbei die neu angelegten Files und die Core-Dateien nicht angerührt werden - Die Änderungen an Shopware sollten mit 3.5.x bis 3.5.6 funktionieren (3.5.6 getestet) - Es wird der aktuelle TinyMCE in der Version 3.5.6 verwendet. Einbau I Die folgenden Schritte müssen in jedem Shopware-File durchgeführt werden, in dem der TinyMCE eingebunden ist beziehungsweise bei der Funktion, bei der man die erweiterten Möglichkeiten verwenden möchte. Natürlich nur einmal, nicht für jedes spätere Snippet/Template. Das sind zum Beispiel folgende Files: Blog: \engine\backend\modules\blog\blogEdit.php Artikeldetailbeschreibung: \engine\backend\modules\articles\artikeln1.inc.php Kategorie Beschreibung: \engine\backend\modules\categories\categoryedit.php Shopseiten: \engine\backend\modules\cmsstatic\cms.php (Wo genau sich der Editor für Aktionen befindet, weiß ich momentan noch nicht – es ist aber immer dasselbe Vorgehen) Als Beispiel nehme ich hier die blogEdit.php tinyMCE.init({ // General options mode: "exact", elements : "txtlangbeschreibung,sTranslationsValue<?php echo $addWYSIWYG ?>", content\_css : "/engine/vendor/tinymce/custom/mycontent.css", plugins : "safari,pagebreak,style,layer,table,inlinepopups,preview,media,print,contextmenu,paste,directionality,fullscreen,visualchars,nonbreaking,xhtmlxtras,imagemanager,template", theme : "advanced", name : "testtiny", template\_external\_list\_url : "/engine/vendor/tinymce/custom/template\_list.js", <?php echo$sCore->sCONFIG['sTINYMCEOPTIONS'].","?\> //cleanup : false, skin : "o2k7", relative\_urls : false,theme\_advanced\_resizing : true, theme\_advanced\_toolbar\_location : "top", theme\_advanced\_toolbar\_align : "left", theme\_advanced\_path\_location : "bottom", // Theme options theme\_advanced\_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect", theme\_advanced\_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,template", theme\_advanced\_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,ltr,rtl,|,fullscreen", theme\_advanced\_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,|,insertdate,inserttime,preview,|,forecolor,backcolor|,insertimage" }); 1. Tiny Template-Plugin einbinden/aktivieren (blogEdit.php) Das Wort „template“ (ohne Anführungszeichen) muss in diesen zwei Zeilen eingefügt werden: - plugins : - theme_advanced_buttons2 : 2. Pfad für template_list.js hinterlegen (blogEdit.php) template_external_list_url : „/engine/vendor/tinymce/custom/template_list.js“, 3. Pfad für content_css hinterlegen (blogEdit.php) content_css : „/engine/vendor/tinymce/custom/mycontent.css“, 4. CSS File im Shopware-Template einbinden Folgende Zeile in der \templates\MEINTEMPLATE\frontend\index\header.tpl hinzufügen: <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='engine/vendor/tinymce/custom/mycontent.css'%7D">* Achtung, diesen Link Pfad konnte ich so nicht testen, da dies bei mir anders aufgebaut ist – also ggf. bitte Anpassen / korrigieren *Will man hier keinen „internen“ Pfad angeben, sollte es auch funktionieren wenn die mycontent.css im \templates\MEINTEMPLATE\frontend_resources\styles\mycontent.css gespeichert ist - allerdings muss der Pfad „content_css :“ im tinyMCE.init Abschnitt dann ebenfalls angepasst werden. Durch diesen wichtigen Schritt ist quasi dem Shopware-System bekannt, was dem TinyMCE bekannt ist und die Darstellung TinyMCE Ansicht = Shopseiten Ansicht im Frontend sieht nun gleich aus. Das Wesentliche ist hiermit schon getan – nun müssen noch das Verzeichniss „custom“ und die Files an sich erstellt werden: Einbau II mit Test (mit Beispiel eines Lightbox-Snippets als .html-File, um die template_list.js und die mycontent.css zu befüllen) Ein solches Snippet hat den Vorteil, dass man sich nicht jedes Mal alles zusammenbauen oder irgendwoher rauskramen muss. Ich habe dazu noch zwei dummy-bilder angelegt, die vom Snippet erst mal pauschal mitgeladen werden. Die legt man in den Ordner, wo man alle seine Bilder hochlädt – also je nachdem der Uploads-Ordner oder ein beliebiger Ordner frei nach Wahl. In Zukunft muss man nur noch den Dateinamen des Thumbnails und des Großbildes austauschen sowie ggf. den Title-Tag füllen. Die Lightbox selbst ist nichts Besonderes – zu den enthaltenen Links ist das Bild von einer Box umgeben mit formatiertem Untertext, die Box floatet im Text standardmäßig links. Durch eine zusätzliche Klasse, die man im Tiny später einfach mit dem Button "Attribute Einfügen"aufrufen kann, floatet die Box rechts mit angepassten Margin-Werten. Um z. B. ein Mini-Template oder besser ein Code-Snippet für eine Lightbox zu hinterlegen, geht man so vor: 1. Ein neues Verzeichnis anlegen mit Namen „custom“: \engine\vendor\tinymce\custom 2. File mit der Template-Liste anlegen Mit Notepad++ oder ähnlichem Editor ein.js File erzeugen und in „custom“ abspeichern: \engine\vendor\tinymce\custom\template_list.js Inhalt: var tinyMCETemplateList = new Array( // Name, Pfad, Beschreibung ["Lightbox\_simple\_200px", "/engine/vendor/tinymce/custom/lightbox\_simple.html", "Einfache Lightbox für Thumbnails mit 200px und Kurztext"] ); …Wenn nur ein Template/Snippet in der template_list.js enthalten ist, wird hinter dem ] kein Komma gesetzt. Bei mehreren Zeilen muss immer ein Komma gesetzt werden, nur bei dem letzten Template/Snippet darf keines gesetzt werden. 3. HTML Template / Snippet anlegen Mit Notepad++ oder ähnlichem Editor ein .html File erzeugen und abspeichern (der Pfad ist hier beispielsweise absolut gewählt - einfach anpassen: \engine\vendor\tinymce\custom\lightbox_simple.html [code]

Phasellus ullamcorper ipsum rutrum nunc.

[/code] 4. CSS zum HTML-Template / Snippet lightbox_simple.html anlegen Dieses File nimmt auch alle zukünftigen CSS-Selektoren weiterer Templates/Snippets auf. Mit Notepad++ oder ähnlichem Editor ein .css File erzeugen und abspeichern: \engine\vendor\tinymce\custom\mycontent.css .p\_image, .p\_image\_right { margin-bottom: 0px; margin-top: 0px; font-size: 10pt; width: 200px; text-align: justify; background-color: #F3F3F3; padding-right: 10px; padding-left: 10px; padding-top: 10px; font-family: Georgia; } .p\_image { float: left; margin-right: 10px; } .p\_image\_right { float: right; margin-left: 10px; } .p\_image\_thumb { display: block; } Im Tiny MCE sollte spätestens jetzt ein neuer Button links neben dem „HTML“-Button erscheinen, womit man nun bequem seine Vorlagen auswählen kann. Im Lightbox-Beispiel kann man einfach durch auswählen der anderen Klasse (.p_image_right) die Box rechts floaten lassen. Weitere Quellen hierzu: http://www.tinymce.com/wiki.php/Plugin:template http://www.tinymce.com/wiki.php/Configu … e_list_url Grüße rattatui

Hallo zusammen, ich habe noch weitere Erfahrungen gesammelt - konkret zu: Absolute Positionierungen als inline-styles im TinyMCE …das war früher eine Sache, die auch nie richtig funktioniert hat. Befolgt man aber die Schritte von oben, kann das sehr gut in Kombination benutzt werden. Ich habe oben auch geschrieben, dass man auf Inline-Styles weitestgehend verzichten sollte - das muss ich jetzt revidieren. Das Problem ist, auf „was“ bzw. auf welches Element bezieht sich die Absolute Positionierung - es kam also immer zu einem erheblichen Versatz zwischen Editor und Frontend-Ansicht im Shop. Dies kommt daher, dass sich die absolute Positionierung offenbar hierauf bezieht: [code]

Hi, auch wenn ich leider so gut wie nichts verstehe von dem was Du geschrieben hast, weil mir dafür der Background einfach fehlt, hinterlasse ich ein kurzes DANKE SCHÖN!!! Solche Tutorials sind gold wert, wenn man sie selber umsetzen kann. Ich verfluche diese Wysiwyg Editoren. Am liebsten würde ich per Mausklick das Ding deaktivieren und einfach den Wunsch-Code reinkopieren, ohne daß dieser gefiltert wird. Trotzdem, super geschriebener Artikel! Grüße Buttons

Hallo buttons, [quote]Am liebsten würde ich per Mausklick das Ding deaktivieren und einfach den Wunsch-Code reinkopieren, ohne daß dieser gefiltert wird.[/quote] …das wurde glaube ich irgendwo & irgendwann im Forum auch schon probiert, aber das funktioniert auch nicht richtig. Du kannst folgendes probieren: Wenn es so wie beschrieben eingerichtet ist, kannst du den HTML Teil ja auch mit einem x-beliebigen Editor wie Bluegriffon erstellen - der schreibt dann (mit addon glaube ich) sogar das css gleich in die content.css. Den HTML-Part kopierst Du in das HTML-Fenster vom TinyMCE. …es kann aber sein das tinyMCE den HTML-Quellcode dennoch verändert beim Speichern - musst du mal testen. Oder das automatische säubern des HTML-Codes vor dem Speichern in der Tiny Config in der Datenbank abschalten. Das ist laut :shopware: mit Vorsicht zu geniessen, aber ich konnte bisher keine Probleme feststellen. Ich bin momentan mit dem TinyMCE sehr zufrieden, weil jetzt alles passt. Nimm doch eine XAMPP-Testinstalltion und probier den Einbau aus -kann ja nichts schief gehen

[quote=„rattatui“] Oder das automatische säubern des HTML-Codes vor dem Speichern in der Tiny Config in der Datenbank abschalten.[quote] Hallo rattatui, danke für den Hinweis. Den Thread hatte ich auch schon gelesen und mich an den Datenbankeingriff nicht getraut, wobei das sicherlich kein Problem ist, sofern man die vorherige Einstellung wieder aktiviert. Sobald bei mir die Schmerzgrenze erreicht ist, arbeite ich Dein Tutorial an einer XAMPP-Installation durch. Die Empfehlung mit dem BlueGriffon Editor ist klasse. Da freut sich das Mac-Herz Gruß Buttons

Hallo zusammen, ich habe vielleicht noch eine Besonderheit gefunden, betrifft: HTMLCode wird nach kopieren in das HTML-Fenster im TinyMCE zerstört …das kam sporadisch zwar schon vor, aber ich wusste nie eine Lösung. Ich hatte das Problem jetzt wieder bei einer Menü-Struktur bestehend aus

,- ,

/

, und Elementen mit diversen Klassen und ID’s, die im Template wunderbar funktionierte, aber im TinyMCE wie gesagt eben nicht. Die momentane Lösung ist: Im Notepad++ gibt es die Funktion “TextFX”->“TextFX HTML Tidy”->“Tidy convert to XHTML” Den HTML Code damit bearbeiten lassen und automatisch eingefügte Doctype, tags usw. wieder entfernen und zurück in das HTML Fenster vom Tiny kopieren, dann funktioniert es. Ich habe noch diverse Online HTML-Beautyfier getestet, es geht aber nur so wie oben beschrieben. Da der Code ziemlich umgestellt wurde, musste ich noch das CSS anpassen. …Ob ich nun schlechten HTML-Code geschrieben habe oder ob das restriktive Vorgaben des TinyMCE sind, die sich noch irgendwo beieinflussen lassen, weiss ich momentan nicht. Vielleicht fällt ja Jemand hierzu noch was ein. Grüße rattaui

[quote=„rattatui“]Oder das automatische säubern des HTML-Codes vor dem Speichern in der Tiny Config in der Datenbank abschalten.[/quote] Hallo, würdest du bitte kurz beschreiben, wie das geht. Ich würde gerne ein FAQ-Klappmenü auf eine Content-Seite integrieren (Java Script), fliegt natürlich sofort wieder raus… Danke!

Hi, die Lösung für diesen Weg findest du hier und hier. Grüße rattaui

Gibt es das ganze auch für die Version 4 von Shopware? Leider finde ich da nichts von den Dateien und in engine/Libary/tinymce die configs werden nicht benutzt irgendwie…

Hier sind die Einstellungen seit SW4 hinterlegt: \templates_default\backend\base\component\Shopware.form.field.TinyMCE.js

Gibt es dafür eine Anpassung für Shopware 4.1? Leider bekomme ich es nicht hin, eigene Templates zu integrieren.