gelöst data-gx-widget="ckeditor" funktioniert nicht

Thema wurde von Steffen (indiv-style.de), 22. November 2018 erstellt.

  1. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Ich bin dabei, im Admin ein Modul zu bauen, für gewisse Funktionen.
    Im Controller lege ich die html fest.
    in der html benötige ich 2 Textarea die ich gerne mit dem CKEditor haben möchte.
    So soll das laut Anleitung gemacht werden:

    https://developers.gambio.de/docs/3.11.1.0/gx-admin-css/widgets.html#ckeditor

    HTML:
    {extends file="get_usermod:layouts/main/layout.html"}
    {block name="content"}
    <form>
        <div class="control-group" data-gx-widget="ckeditor" data-ckeditor-height="100px">
            <textarea name="my-ckeditor" class="wysiwyg" rows="3"></textarea>
        </div>
    </form>
    {/block}
    das Ergebnis ist nicht wie gewünscht. Wieso?

    upload_2018-11-22_9-10-47.png
     
  2. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.660
    Danke erhalten:
    1.262
    Danke vergeben:
    300
    Hi,

    wenn du eigene Admin Einstellungen machen möchtest, ist das ganz einfach per GXModule.json Datei möglich.
    Da brauchst weder einen eigenen Controller schreiben noch JavaScripte für die Widget einbinden.
    Das Modul taucht auch automatisch nach dem Leeren des Caches im Modul-Center auf und kann dann installiert und konfiguriert werden.

    Die Admin Seite wird dann auch voll automatisch aus den Werten und Einträgen der GXModule.json Datei generiert.

    Ein Beispiel-Modul findest du unter:

    (Link nur für registrierte Nutzer sichtbar.)

    Hier das Tutorial dazu mit ausführlicher Erklärung welche Elemente alle bereits standardmäßig genutzt werden können:

    (Link nur für registrierte Nutzer sichtbar.)

    Falls du da Elemente und Widgets vermisst, sag bitte was dir fehlt, dann können wir diese in Zukunft hinzufügen.
     
  3. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Vielen Dank aber ich benötige den Controller, da hier eigene Verarbeitungsprozesse integriert sind. Verstehe aber nicht, weshalb er die data-gx-widget nicht nimmt. Sind die da nicht verfügbar?
     
  4. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.660
    Danke erhalten:
    1.262
    Danke vergeben:
    300
    Hi, das ist nicht ganz einfach den Editor als Widget zu laden. Du muss da viele Abhängigkeiten beachten, du musst dann die komplette Verabeitung des Editors und das Umschalten zwischen HTML und Text alles selbst implementieren, da sonst der Editor nicht funktioniert. Ich empfehle dir wirklich die vorgeschlagende Funktion der GXModule.json zu nutzen. Da sind die Elemente alle vollständig implementiert.

    Die Varbeitung deiner Daten kannst du auch auslagern. Es muss nicht im Controller sein, der die Seite im Admin darstellt.
    Du kannst Buttons einfügen, die deine Controller aufrufen und deine Verabeitung durchführen.

    Es reicht dafür in der GXModule.json einen Button zu definieren, wo steht welche Funktion im welchem Controller aufgerufen werden soll.

    Wenn du uns mitteilst was du anders verarbeiten willst, dann können wir dir eventuell einen Weg zeigen wie du das am besten umsetzen kannst ohne unnötige Umbiegungen zu machen.
     
  5. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Leider in 3.6 nicht möglich. :(

    Wieso ist das so kompliziert gemacht?
     
  6. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.660
    Danke erhalten:
    1.262
    Danke vergeben:
    300
    Bitte versuche einmal folgenden Code:

    HTML:
    <form
          data-gx-widget="tabs editor"
          data-editor-selector="textarea.wysiwyg"
          data-editor-event-type="submit"
          data-editor-event-target="form"
    >
    <textarea class="form-control wysiwyg"
                  data-editor-identifier="editor-my"
                  data-editor-type="ckeditor"
    </textarea>
    </form>
    Dann muss man noch die JavaScript-Datei für den Editor einbinden, indem man das über die Assets lädt:

    PHP:
    $assets MainFactory::create('AssetCollection');
    $assets->add(MainFactory::create('Asset''includes/ckeditor/ckeditor.js'));
     
  7. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Das Ergebnis:
    upload_2018-11-27_8-41-42.png
     
  8. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    So, es funktioniert!

    upload_2018-11-27_9-46-44.png

    wichtig ist noch:
    PHP:
    $assets->add(MainFactory::create('Asset''admin_buttons.lang.inc.php'));

    mein html:
    HTML:
    <div data-gx-widget="editor">
                        <textarea required
                            id="footer{$nlet.id}"
                            name="footer{$nlet.id}"
                            class="wysiwyg"
                            >{$nlet.footer}</textarea>
                        </div>
    Es funktionierte nicht, weil er als neme="decription" nicht wollte. Nimmt man name="description1", funktioniert es. :)
    Danke @Till (Gambio) für die Hilfe...