Contao-Camp 2024
Ergebnis 1 bis 28 von 28

Thema: tinymce.css in Contao4?

  1. #1
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard tinymce.css in Contao4?

    Mir ist klar, dass die allgemeine Konfig des tinyMCE in Contao4 nun über Backend-Templates gelöst ist. Aber was ist mit der bisherigen tinymce.css, die in C3 noch in der Dateiverwaltung lag?
    Ich habe sie mal testweise angelegt und den Cache geleert, aber das scheint nicht mehr zu funktionieren.

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.050
    Partner-ID
    10107

    Standard

    Du könntest versuchen ein eigenes be_tinyMCE.html5 Template im /templates Ordner anzulegen und dort die Option importcss_groups und content_css hinzuzufügen. Bspw.:
    Code:
        importcss_groups: [{title: '<?= \Config::get('uploadPath'); ?>/public/tinymce.css'}],
        content_css: '<?= TL_PATH . '/' . \Config::get('uploadPath'); ?>/public/tinymce.css',
    Dazu muss es in /files einen Ordner "public" geben, wo dann die tinymce.css drin ist. Der Ordner "public" muss natürlich für die Öffentlichkeit freigegeben sein.
    Geändert von Spooky (30.03.2017 um 07:53 Uhr)

  3. #3
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hm, es funktioniert nicht (der Editor wird gar nicht mehr geladen). Hab ich was falsch eingestellt?
    //Update: Jetzt funktioniert es. Einfach diese Anleitung nachbauen

    Ich habe folgendes gemacht:

    1. In der Dateiverwaltung die tinymce.css mit ein paar Basis-CSS-Anweisungen (Abstand Absatz, Fettdruck etc.) in den Ordner /theme/css/ gelegt. Die Ordner sind so eingestellt, dass sie öffentlich erreicht werden können.
    2. Unter Templates (im Templates-Root, nicht in einem Unterordner davon) das Template be_tinyMCE.html5 generiert und es so umgeschrieben:

    //Update: Apostroph eingefügt, siehe nachfolgender Beitrag von Spooky
    Code:
    <?php
    
    namespace Contao;
    
    if ($GLOBALS['TL_CONFIG']['useRTE']):
    
    ?>
    <script>window.tinymce || document.write('<script src="<?= TL_ASSETS_URL ?>assets/tinymce4/js/tinymce.gzip.js">\x3C/script>')</script>
    <script>
    setTimeout(function() {
      window.tinymce && tinymce.init({
        skin: 'contao',
        selector: '#<?= $this->selector ?>',
        language: '<?= Backend::getTinyMceLanguage() ?>',
        importcss_groups: [{title: '<?= \Config::get('uploadPath'); ?>/theme/css/tinymce.css'}],
        content_css: '<?= TL_PATH . '/' . \Config::get('uploadPath'); ?>/theme/css/tinymce.css',
        element_format: 'html',
        document_base_url: '<?= Environment::get('base') ?>',
        entities: '160,nbsp,60,lt,62,gt,173,shy',
        setup: function(editor) {
          editor.getElement().removeAttribute('required');
        },
        init_instance_callback: function(editor) {
          if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
            editor.editorManager.get(editor.id).focus();
          }
          editor.on('focus', function(){ Backend.getScrollOffset(); });
        },
        file_browser_callback: function(field_name, url, type, win) {
          Backend.openModalBrowser(field_name, url, type, win);
        },
        plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus table visualblocks',
        browser_spellcheck: true,
        tabfocus_elements: ':prev,:next',
        importcss_append: true,
        extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
        menubar: 'file edit insert view format table',
        toolbar: 'link unlink | image | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo | code'
      });
    }, 0);
    </script>
    <?php endif; ?>
    Danach habe ich die Systemwartung durchlaufen lassen und ein normales Textelement im Inhalt aufgerufen. Dort wird mir nun nur noch das HTML angezeigt, die Editor-Funktionen sind weg.

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.050
    Partner-ID
    10107

    Standard

    Du hast nichts falsch gemacht, aber ich Bei content_css fehlt ein Apostroph vor <?

  5. #5
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Super, jetzt klappt es! Ich habe den Code oben entsprechend korrigiert.

  6. #6
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    170

    Standard

    Hallo,

    @Nina, wo finde ich den Ordner /theme/css/ wo ich die tinymce.css reinlege?

  7. #7
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.755
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich habe das in dem Beispiel so gebaut, dass ich diese Ordner selbst in der Dateiverwaltung angelegt habe. Sie sind dann also unter files/theme/css/.

    Natürlich könntest du sie auch anders ablegen, dann müsstest du halt den Beispielpfad oben ändern.

  8. #8
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    170

    Standard

    ich hab es jetzt genau so gemacht wie du es beschrieben hast.
    Mein Problem ist dass mir der Texteditor nicht angezeigt wird.
    Unbenannt.JPG

  9. #9
    Contao-Nutzer
    Registriert seit
    11.05.2017.
    Beiträge
    10

    Standard

    Da ich mit Contao erst seit kurzem arbeite, kann ich die vorigen Posts noch nicht nachvollziehen. Mit dem Buch von Peter Müller habe ich einen guten Einstieg gefunden, möchte aber gleich Version 4.3.x nutzen und da ist ja manches anders.
    In den beigefügten Bildschirmfotos zeige ich die Funktionen, die derzeit fehlen.
    Ich suche ein Tutorial, mit dem ich die Funktionen, wie sie in der 3.5.x wohl standardmäßig vorhanden waren, in der 4er nachrüsten kann.
    Kann jemand helfen?
    Angehängte Grafiken Angehängte Grafiken

  10. #10
    Contao-Nutzer
    Registriert seit
    11.05.2017.
    Beiträge
    10

    Standard

    OK, mit etwas Mühe habe ich den oben angegebenen Weg finden können. Nun muss ja das tinymce.css auch im Frontend eingebunden sein. Das habe ich dann als externes Stylesheet files/theme/css/tinymce.css gemacht. Funktioniert soweit.

    Ich bin ein großer Freund von Konventionen. Daher wundere ich mich, dass die Konvention in Contao 3, tinymce.css über dass CSS-Framework einzubinden, in Version 4 anscheinend aufgegeben wurde.

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.050
    Partner-ID
    10107

  12. #12
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    490

    Standard

    Hallo, wenn ich es bei mir lokal am Rechner einrichte, wird die Datei leider nicht gefunden, weil die Sprachkürzel in den Pfad automatisch zusätzlich kommt. So habe ich auch Probleme mit anderen Sachen wie z.B. mit der Erweiterung Rocksolid Custom Elements, wenn ich über eine DCA-Konfiguration FontAwesome in Backend aufrufen möchte. Weiß jemand, woran das liegen kann? Alle Ordner unter files habe ich veröffentlicht.

  13. #13
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.050
    Partner-ID
    10107

    Standard

    Zitat Zitat von jenda Beitrag anzeigen
    Hallo, wenn ich es bei mir lokal am Rechner einrichte, wird die Datei leider nicht gefunden, weil die Sprachkürzel in den Pfad automatisch zusätzlich kommt.
    Das stimmt so nicht. Wenn du auf eine Datei zugreifen möchtest, zB über http://example.org/files/lorem/foo.jpg - die Datei foo.jpg aber an diesem Ort nicht existiert (weil dieser Ordner bspw. nicht freigeschalten wurde), dann kommt automatisch die _catch_all Route von Contao 4 zu tragen. Contao 4 versucht daher die Seite "files/lorem/foo.jpg" auszuliefern. Da in deiner Installation die Sprache in der URL aktiviert ist, leitet Contao vorher auf "/de/files/lorem/foo.jpg" um. Da diese Seite aber generell nicht existiert kommt es dann zu einem Seite nicht gefunden Fehler.

  14. #14
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    490

    Standard

    Das habe ich auch vermutet, aber in der 4. Version weiß ich gar nicht, wo man die Sprachkürzel deaktivieren kann. Könntest du mir da bitte helfen? Danke. Nur wollte ich ergänzen, dass die Sachen von files falsch in Backend geladen werden, in Frontend stimmt alles.
    Geändert von jenda (14.06.2017 um 20:37 Uhr)

  15. #15
    Contao-Fan
    Registriert seit
    29.07.2010.
    Beiträge
    516

    Standard

    Zitat Zitat von jenda Beitrag anzeigen
    ...wo man die Sprachkürzel deaktivieren kann...
    Hallo,

    CONTAO 4 => Sprachkürzel in der URL entfernen, dazu in die /app/config/parameters.yml einfügen

    prepend_locale: false

  16. #16
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    490

    Standard

    Danke. Das betrifft jetzt das Frontend. Allerdings habe ich Probleme mit dem Backend. Dort wird immer noch die Sprachkürzel im Dateipfad gezeigt. Ich habe Systemwartung durchgeführt (direkt im Backend) und mich ab- und angemeldet. Hängt es vielleicht noch mit einer anderen Einstellung zusammen?

    Snímek obrazovky 2017-06-14 v 22.24.09.jpg
    Geändert von jenda (14.06.2017 um 21:26 Uhr)

  17. #17
    Contao-Fan
    Registriert seit
    29.07.2010.
    Beiträge
    516

    Standard

    lösche den Ordner prod in /var/cache/prod

    und im Safari => Cache-Speicher leeren

  18. #18
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    490

    Standard

    Sehr gut. Vielen lieben Dank. Jetzt funktioniert es.

  19. #19
    Contao-Fan Avatar von k-webdesign
    Registriert seit
    07.06.2010.
    Ort
    Karlsruhe
    Beiträge
    648
    Partner-ID
    5911
    User beschenken
    Wunschliste

    Standard

    Danke, Nina.

    Weiß jemand, wie ich das Textlabel noch etwas attraktiver gestalten kann? So zeigt es ja nur den direkten Pfad.

    Screenshot 2017-07-01 22.17.33.png

  20. #20
    Contao-Fan Avatar von bibib
    Registriert seit
    19.06.2009.
    Ort
    Linz, Oberösterreich
    Beiträge
    644
    Partner-ID
    8517

    Standard

    Hallo zusammen,
    ich möchte auch die tinymce.css weiter nutzen und habe auf zwei Arten versucht, diese einzubinden:
    - wie in diesem Thread hier beschrieben (die tinymce.css liegt in einem öffentlichen Ordner, be_tinyMCE liegt im template-root, Pfade x-mal kontrolliert)
    - wie hier beschrieben
    leider beides ohne Erfolg, die Formatierungen aus der tinymce.css werden im Editor nicht angezeigt.
    Hat jemand eine Idee, woran das liegen könnte?


    Hat sich tatsächlich erledigt - nach gefühlt 1000x Systemwartung laufen lassen, wird die Formatierung angezeigt ...
    Geändert von bibib (16.11.2017 um 07:47 Uhr)

  21. #21
    Contao-Fan Avatar von k-webdesign
    Registriert seit
    07.06.2010.
    Ort
    Karlsruhe
    Beiträge
    648
    Partner-ID
    5911
    User beschenken
    Wunschliste

    Standard

    Browsercache löschen

  22. #22
    Contao-Fan Avatar von bibib
    Registriert seit
    19.06.2009.
    Ort
    Linz, Oberösterreich
    Beiträge
    644
    Partner-ID
    8517

    Standard

    Ja, danke, ClearCache hat alles weggeputzt.

  23. #23
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du kannst auch mal mein optimiertes be_tinyMCE ausprobieren, damit gibt es dieses Problem nicht. http://public.andreasburg.de/contao/tinyCustom.zip

    Es liegt an dieser Zeile:
    PHP-Code:
    content_css: ['/files/themeordner/tinymce.css']

    // Patch:
    content_css: 'files/themeordner/tinymce.css<?= '?' time() ?>'
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  24. #24
    Contao-Fan
    Registriert seit
    20.10.2012.
    Ort
    Berlin
    Beiträge
    257

    Standard

    Zitat Zitat von k-webdesign Beitrag anzeigen
    Danke, Nina.

    Weiß jemand, wie ich das Textlabel noch etwas attraktiver gestalten kann? So zeigt es ja nur den direkten Pfad.

    Screenshot 2017-07-01 22.17.33.png

    simpel:

    Code:
        
    importcss_groups: [{title: 'hervorheben'}],
    https://www.tinymce.com/docs/plugins...portcss_groups

  25. #25
    Contao-Fan
    Registriert seit
    02.09.2009.
    Beiträge
    307

    Standard

    Nur falls es noch jemanden interessiert:

    Das Anlegen der Unterordner ist wichtig, da die tinymce.css dort wo sie in der 3.5er Dateiverwaltung lag in der 4er Dv von außen nicht erreichbar ist (nicht öffentlich). Man muss also wenigstens einen Ordner anlegen, den man auf "öffentlich" stellt und in den man die Datei tinymce.css dann verschiebt.

    Hat mich ne Stunde gekostet, das heraus zu finden

    VG
    juju

  26. #26
    Contao-Nutzer Avatar von theMatrix
    Registriert seit
    19.09.2013.
    Ort
    Frankfurt
    Beiträge
    154

    Standard

    Hallo Leute,

    eine Frage habe ich.

    Kann ich in Contao 4.7.x das be_tinyMCE.html5 Template aus dem Theme-Ordner laden, gibt es dafür eine Lösung?

    Wenn es in Templates-Root liegt (templates > be_tinyMCE.html5) wird es geladen, sobald ich es in Unterverzeichnis verschiebe (templates > myTheme > be_tinyMCE.html5) wird es nicht geladen.

    Vielen Dank.

  27. #27
    Contao-Fan
    Registriert seit
    20.10.2012.
    Ort
    Berlin
    Beiträge
    257

    Standard

    Zitat Zitat von theMatrix Beitrag anzeigen
    Kann ich in Contao 4.7.x das be_tinyMCE.html5 Template aus dem Theme-Ordner laden, gibt es dafür eine Lösung?
    Das ist ein Backend-template und das BE nutzt nicht dein Theme - von daher nicht so einfach.
    Was wäre der use-case? Hast du verschieden Domains in der Installation?
    Du könntest folgendes probieren:
    • be_tinyMCE.html5 in templates anlegen
    • den Inhalt löschen und mit Unterscheidungslogik (DomainA/DomainB - ...könnte aber genau so gut BenutzerA/B sein) ersetzen
    • dann dein angepasstes/anderes Template "inserten"


    in etwas so
    PHP-Code:
    <?php 
    /* templates/be_tinyMCE.html5 */
    if (/*  */) {
      
    $this->insert('myTheme/be_tinyMCE'$this->getData());
    }
    elseif (
    /*  */) {
      
    $this->insert('myOtherTheme/be_tinyMCE'$this->getData());
    }
    else {
      
    $this->parent(); // oder crash
    }
    ?>
    Alles theoretisch und ungetestet...
    Vielleicht hilft dir das hier weiter: https://docs.contao.org/books/manual...plates-mischen

  28. #28
    Contao-Nutzer Avatar von theMatrix
    Registriert seit
    19.09.2013.
    Ort
    Frankfurt
    Beiträge
    154

    Standard

    Zitat Zitat von andre.saage Beitrag anzeigen
    Das ist ein Backend-template und das BE nutzt nicht dein Theme - von daher nicht so einfach.
    Was wäre der use-case? Hast du verschieden Domains in der Installation?
    Du könntest folgendes probieren:
    • be_tinyMCE.html5 in templates anlegen
    • den Inhalt löschen und mit Unterscheidungslogik (DomainA/DomainB - ...könnte aber genau so gut BenutzerA/B sein) ersetzen
    • dann dein angepasstes/anderes Template "inserten"

    Habe versucht das Template direkt mit ohne Logik einzubinden.
    In etwa so
    PHP-Code:
    <?php $this->insert('myTheme/be_tinyMCE'); ?>
    oder so
    PHP-Code:
    <?php $this->insert('myTheme/be_tinyMCE'$this->getData()); ?>
    beides führt zu Fehler im Backend.

    Das funktioniert leider nicht.

    Wenn ich das Theme Exportiere, wird mein TinyMCE-Datei nicht mit exportiert, weil es außerhalb der Theme-Verzeichnis ist.
    Es sind feste Formatierungen in TinyMCE, die eigentlich für das Theme gebraucht wird.

    Das ist nicht durchdacht worden.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •