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
Gruß Buttons
Leider finde ich da nichts von den Dateien und in engine/Libary/tinymce die configs werden nicht benutzt irgendwie… 