# TinyMce im Frontend anzeigen

**URL:** <https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636>\
**Category:** Programmierung\
**Created:** [22. Juni 2016 um 13:12 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636 "2016-06-22T13:12:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Beyer](https://avatars.discourse-cdn.com/v4/letter/b/ba9def/32.png) [@Beyer](https://forum.shopware.com/u/Beyer)\
**Post date:** [22. Juni 2016 um 13:12 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636/1 "2016-06-22T13:12:20Z")

</div>

Hallo,

ich möchte ein Plugin entwickeln, dass auf der Artikeldetail&nbsp;Seite einen TinyMce-Editor darstellt.

So haben Kunden die Möglichkeit ihren eigenen Text zum Produkt zu hinterlegen, der dann gedruckt wird.  
Leider kann das Plugin CustomProducts keinen Editor sondern nur Textareas.

Nun das Problem:  
TinyMce bindet css-Files ein (default skin.min.css und content.min.css).

Da ich alle TinyMce-JavaScript Dateien über den Theme Compiler eingebunden habe,  
befinden sich diese im falschen kontext&nbsp;/web/cache.

Sprich die JavaScript Dateien wollen nun die skin.min.css und content.min.css aus dem Context /web/cache/skin.min.css einbinden,  
was aber nicht korrekt ist, da sich der Editor in engine/Library/TinyMce befindet.

Die einfachste Lösung wäre natürlich die TinyMce Dateien wie sonst gewohnt über ein script-tag ein zu binden, jedoch habe ich&nbsp;keinen&nbsp;  
Weg und keine Lösung gefunden, wie das bei shopware gehen soll…

Danke für jede Hilfe!

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [22. Juni 2016 um 13:30 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636/2 "2016-06-22T13:30:40Z")

</div>

> [@Beyer schrieb:](https://forum.shopware.com/profile/23624/Beyer "Beyer")
> 
> Hallo,
> 
> ich möchte ein Plugin entwickeln, dass auf der Artikeldetail&nbsp;Seite einen TinyMce-Editor darstellt.
> 
> So haben Kunden die Möglichkeit ihren eigenen Text zum Produkt zu hinterlegen, der dann gedruckt wird.  
> Leider kann das Plugin CustomProducts keinen Editor sondern nur Textareas.
> 
> Nun das Problem:  
> TinyMce bindet css-Files ein (default skin.min.css und content.min.css).
> 
> Da ich alle TinyMce-JavaScript Dateien über den Theme Compiler eingebunden habe,  
> befinden sich diese im falschen kontext&nbsp;/web/cache.
> 
> Sprich die JavaScript Dateien wollen nun die skin.min.css und content.min.css aus dem Context /web/cache/skin.min.css einbinden,  
> was aber nicht korrekt ist, da sich der Editor in engine/Library/TinyMce befindet.
> 
> Die einfachste Lösung wäre natürlich die TinyMce Dateien wie sonst gewohnt über ein script-tag ein zu binden, jedoch habe ich&nbsp;keinen&nbsp;  
> Weg und keine Lösung gefunden, wie das bei shopware gehen soll…
> 
> Danke für jede Hilfe!

Hallo,

warum legst du nicht einfach alle JavaScript- und CSS-Dateien innerhalb deines Plugins ab? Weitere Informationen dazu gibt es unter anderem hier: [Example plugin - storefront extension](https://developers.shopware.com/developers-guide/example-plugin/) (ein Beispiel zur Einbindung gibt es in der Bootstrap.php und im Text darunter).

Beste Grüße

Sebastian

---

<div class="post-metadata">

**Author:** ![Beyer](https://avatars.discourse-cdn.com/v4/letter/b/ba9def/32.png) [@Beyer](https://forum.shopware.com/u/Beyer)\
**Post date:** [22. Juni 2016 um 13:42 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636/3 "2016-06-22T13:42:58Z")

</div>

Danke für die schnelle Antwort sschreier.

Den Ansatz habe ich bereits auch versucht.

- detail-controller hooken

- detail.tpl einen block erweitern.

Stecken geblieben bin ich hier die richtige url an die script-tags zu übergeben.

srcipt src="{link file="/frontend/\_public/src/js/tinymce/tinymce.min.js}" funktioniert nicht, da diese url für themes vorgesehen ist, wenn ich das richtig verstanden habe.

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [22. Juni 2016 um 13:45 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636/4 "2016-06-22T13:45:32Z")

</div>

> [@Beyer schrieb:](https://forum.shopware.com/profile/23624/Beyer "Beyer")
> 
> Danke für die schnelle Antwort sschreier.
> 
> Den Ansatz habe ich bereits auch versucht.
> 
> - detail-controller hooken
> 
> - detail.tpl einen block erweitern.
> 
> Stecken geblieben bin ich hier die richtige url an die script-tags zu übergeben.
> 
> srcipt src=„{link file=“/frontend/\_public/src/js/tinymce/tinymce.min.js}" funktioniert nicht, da diese url für themes vorgesehen ist, wenn ich das richtig verstanden habe.

Hallo,

wie erwähnt - man kann CSS- als auch JavaScript-Code automatisch im Plugin ablegen, ohne irgendwelche Links dazu nutzen oder es per \< script \> oder ähnliches einbinden zu müssen, siehe den Link ([Example plugin - storefront extension](https://developers.shopware.com/developers-guide/example-plugin/)), beispielsweise für eine CSS-Datei:

```
$this->subscribeEvent(
     'Theme_Compiler_Collect_Plugin_Less',
     'onCollectLessFiles'
);

```

Hast du dir einmal Gedanken gemacht, wie das ganze mit dem TinyMCE auch responsiv dargestellt werden soll, beziehungsweise wie der Wert dann im Warenkorb etc. weiter bearbeitbar sein soll?

Wie machst du das, wenn ein Kunde den Artikel doppelt in den Warenkorb legt? Lässt du dann den hinterlegten Text in deinem Feld im Warenkorb überschreiben (da im Standard von Shopware ja der Artikel „aufaddiert“ wird) oder „splittest“ du den gleichen Artikel in mehrere Warenkorb-Position auf?

Ich würde mir über diese Sachen erst einmal Gedanken machen ![Wink](http://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/wink.png "Wink").

Beste Grüße

Sebastian

---

<div class="post-metadata">

**Author:** ![Beyer](https://avatars.discourse-cdn.com/v4/letter/b/ba9def/32.png) [@Beyer](https://forum.shopware.com/u/Beyer)\
**Post date:** [22. Juni 2016 um 13:52 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636/5 "2016-06-22T13:52:56Z")

</div>

Ah, habe deinen Tipp falsch verstanden.

So habe ich es auch gemacht.&nbsp;

Nur das Problem, die tinymce.min.js möchte die css-Dateien einbinden.

Das gibt jedoch einen 404-Error, da sich die tinymce.min.js nicht mehr in&nbsp;  
engine/plugins/local/frontend/NAME/Views/frontend/src/js/tinymce/tinymce.min.js befindet, sondern in web/cache/.

Damit der tinymce-Editor wie „gewohnt“ funktionieren kann, sprich seine benötigten Skripte selbst einbinden kann, muss ich das&nbsp;  
Hauptscript einbinden, wie es für normale Webanwendungen gedacht ist. Nämlich ein script-tag

---

<div class="post-metadata">

**Author:** ![Beyer](https://avatars.discourse-cdn.com/v4/letter/b/ba9def/32.png) [@Beyer](https://forum.shopware.com/u/Beyer)\
**Post date:** [22. Juni 2016 um 14:47 UTC](https://forum.shopware.com/t/tinymce-im-frontend-anzeigen/37636/6 "2016-06-22T14:47:37Z")

</div>

Ok die Lösung ist das Benutzen des Smarty link plugins…

srcipt type=„text/javascript“ src="{link file=„frontend/…“}"
