Contao 5 tinyMCE anpassen

[Bennie]

Hallo zusammen,


dieser Teil in der Doku bzgl. der Editor Konfiguration funktioniert so wohl nicht mehr, kann mir jemand sagen wie ich das ändern muss?
Mein jetziger Code im be_tinyMCE.html5 sieht so aus

Mein jetziger Code im be_tinyMCE.html5 sieht so aus

<?php $this->extend('be_tinyMCE'); ?>

    <?php     
     $this->block('content_css'); ?>
    importcss_selector_filter: ".myDummyPrefix-",
    content_css: [
    'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css',
    'files/theme/css/myCustomTiny.css'
],

style_formats_merge: true,
    style_formats: [
      {title: 'Eigene Formate', items: [
          {title: 'Text Rot', inline: 'span', attributes: {'class':'text--red'}},
          {title: 'Text Orange', inline: 'span', attributes: {'class':'text--orange'}},
          {title: 'Text Gruen', inline: 'span', attributes: {'class':'text--green'}},
          {title: 'Hintergrund Rot', inline: 'span', attributes: {'class':'bg--red'}},
          {title: 'Schrift 1.25', block: 'p', attributes: {'class':'font_norm'}},
          {title: 'Schrift 1.5', block: 'p', attributes: {'class':'font_bigger'}},
          {title: 'Schrift 2', block: 'p', attributes: {'class':'font_biggest'}},
          
      ]}
  ],
  
    <?php $this->endblock(); ?>
  
   <?php $this->block('custom'); ?>
   toolbar: 'link unlink | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
   removed_menuitems:'image,fullscreen,blocks,fontfamily,fontsize,fontsize_class,fontname,backcolor,forecolor,lineheight',
   paste_as_text: true,
  <?php $this->endblock(); ?>

Die Fehlermeldung lautet

Attempted to load class "Backend" from the global namespace.
Did you forget a "use" statement?

was genau muss da nun anders bitte ?

[Spooky]

Wie die Fehlermeldung schon sagt hast du das use Statement für die \Contao\Backend Klasse vergessen und nur Backend benutzt. Das ist auch schon in Contao 4 falsch (führt dort aber noch zu keinem Fehler).

Du musst entweder das entsprechende use Statement für den FQCN der \Contao\Backend Klasse hinzufügen - oder direkt den FQCN in deinem Code verwenden.

[Bennie]

Danke das hat funktioniert, dennoch ist die Doku für Contao 5 nicht mehr korrekt oder ?

Diesen Teil z.B.

 'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css'

habe ich geändert in

'<?= $this->asset('tinymce.css', 'system/themes/'.Backend::getTheme()) ?>'

[Spooky]

In Contao 5 würde man das so schreiben, ja. Die andere Variante wird aber glaube ich auch in Contao 5 noch funktionieren.

[Bennie]

Die andere Variante wird aber glaube ich auch in Contao 5 noch funktionieren.

Hm, also bei mir nicht in COntao 5
Auch nicht wenn ich tinymce.min.css zu tinymce.css ändere - zumindest greifen die Angaben im Backend dann nicht.
Das fiel mir auf weil der Text im Editor dann viel größer war als vom tinymce.css vorgesehen.

[Dean]

Mit Contao 5 ginge auch Twig:

// templates/be_tinyMCE.html.twig

{% extends "@Contao/be_tinyMCE" %}

{% block content_css %}
    {% set tinymce = asset('tinymce.css', 'system/themes/' ~ app.user.backendTheme) %}
    {% set tinymce_dark = asset('tinymce-dark.css', 'system/themes/' ~ app.user.backendTheme) %}

    content_css: [
        document.documentElement.dataset.colorScheme === 'dark' ? '{{ tinymce_dark }}' : '{{ tinymce }}',
        'files/theme/css/myCustomTiny.css'
    ],

...

{% endblock %}

[Balduin]

Ich kann die Beobachtung von Bennie bestätigen, so wie es in der Anleitung beschrieben ist, habe ich die Einbindung leider nicht zum laufen bekommen und erhielt im Debug-Modus nur Fehlermeldungen bezüglich der Zeile

'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css',

Ich habe mich jetzt also auch in dieses Rabbithole begeben und zumindest folgendes herausgefunden.

Der ursprünglich von Bennie gepostete Code funktioniert nicht, weil vor der Verwendung von Backend::getTheme() der vollständige Namespace eingefügt werden muß und der lautet Contao\Backend.

Das bedeutet, daß direkt nach dem ersten <?php folgendes ergänzt werden muß:

  use Contao\Backend;

Damit habe ich die Templates zumindest ohne Fehlermeldungen sowohl als php als auch als twig template zum laufen bekommen und das Einfügen der eigenen Formate funktioniert damit auch.
Allerdings greift die Einbindung des eigenen customtinymce.css damit leider weiterhin nicht, falls da also jemand weiterhelfen könnte wäre ich sehr dankbar.
Die Geschichte mit importcss_selector_filter und Die Ergänzungen für die toolbar habe ich in meinem Beispiel erstmal weggelassen um den Focus auf die Einbindung des Stylesheets zu legen.


Hier ist der Code:

be_tinyMCE.html5 (Klassisches php-template)

<?php 

  use Contao\Backend;
  
  $this->extend('be_tinyMCE');

  $this->block('content_css'); ?>

    content_css: [
      'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css',
      'files/customtinymce.css'
    ],

    style_formats: [
      {title: 'Eigene Formate', items: [
          {title: 'Text Rot', inline: 'span', attributes: {'class':'text--red'}},
          {title: 'Text Orange', inline: 'span', attributes: {'class':'text--orange'}},
          {title: 'Text Gruen', inline: 'span', attributes: {'class':'text--green'}},
          {title: 'Hintergrund Rot', inline: 'span', attributes: {'class':'bg--red'}},
          {title: 'Schrift 1.25', block: 'p', attributes: {'class':'font_norm'}},
          {title: 'Schrift 1.5', block: 'p', attributes: {'class':'font_bigger'}},
          {title: 'Schrift 2', block: 'p', attributes: {'class':'font_biggest'}},
          
      ]}
    ],

  <?php $this->endblock(); ?>

be_tinyMCE.html.twig (twig-template)

  {% extends "@Contao/be_tinyMCE" %}

{% block content_css %}

    content_css: [
      'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css',
      'files/customtinymce.css'
    ],

    style_formats: [
      {title: 'Eigene Formate', items: [
          {title: 'Text Rot', inline: 'span', attributes: {'class':'text--red'}},
          {title: 'Text Orange', inline: 'span', attributes: {'class':'text--orange'}},
          {title: 'Text Gruen', inline: 'span', attributes: {'class':'text--green'}},
          {title: 'Hintergrund Rot', inline: 'span', attributes: {'class':'bg--red'}},
          {title: 'Schrift 1.25', block: 'p', attributes: {'class':'font_norm'}},
          {title: 'Schrift 1.5', block: 'p', attributes: {'class':'font_bigger'}},
          {title: 'Schrift 2', block: 'p', attributes: {'class':'font_biggest'}},
          
      ]}
    ],

{% endblock %}

[Spooky]

Ich habe mich jetzt also auch in dieses Rabbithole begeben und zumindest folgendes herausgefunden.

Der ursprünglich von Bennie gepostete Code funktioniert nicht, weil vor der Verwendung von Backend::getTheme() der vollständige Namespace eingefügt werden muß und der lautet Contao\Backend.

Siehe auch https://community.contao.org/de/show...l=1#post590347

[Bennie]

@Balduin wie spooky schon gepostet hat, das mit dem use Statement hat geklappt bei mir , ok vielleicht hätte ich explizit nochmal den Code schreiben können.

Dein Bsp. ist bei mir aber genau so mit Link zum custom.css - das funktioniert einwandfrei - dein Pfad stimmt so?

[Balduin]

Vielen Dank für eure Rückmeldungen!
Der Teufel steckte wie so oft wieder im Detail: Ich hatte meine customtinymce.css zum testen direkt ins Verzeichnis /files gelegt. Da wird sie aber nicht gefunden, sondern erst im Ordner /files/theme
Hab sie also in mein theme-Verzeichnis gelegt, den Pfad angepasst und jetzt funktioniert es!

@Spooky: jetzt wo ich nachlese, hattest du weiter oben ja tatsächlich schon einen Hinweis auf die \Contao\Backend Klasse gegeben, aber da ich zu selten direkt mit template-Programmierung zu tun habe, konnte ich mit diesem Hinweis leider noch nichts anfangen.

Ein weiterer Gedanke: Ich könnte den tinyMCE nun ja nun auch direkt auf mein frontend-stylesheet verweisen, dann könnte ich die klassen und css-variablen die ich dort angelegt habe ja auch direkt zum stylen der eigenen Formate verwenden. Würde aus eurer Sicht etwas dagegen sprechen?