Zusätzliche tags im WYSIWYG-Editor

[Concilla]

Lieber Helfer,

wie bekomme ich denn zusätzliche tags in den WYSIWYG-Editor? Z.B. td, tr, data-label. Ich habe es in der modules/ckeditor/ckeditor_config/wb_ckconfig.js und der ../settings_config.js versucht, was nicht funktionierte.

Vielen Dank im Voraus.

Concilla

[dbs]

modules/ckeditor/ckeditor_config/wb_ckconfig.js

Hi, du meinst modules/ckeditor/wb_config/wb_ckconfig.js.
Gibt es in deinem Template auch noch so einen Ordner /wb_config oder eine Datei wb_config.js?
Sowas kann auch direkt im Ordner /templaes stecken.
Falls ja, dann wird das verwendet statt deiner genannten.

Und welche Änderungen hast du vorgenommen?
Tabelle sollte ja standarmäßig funktionieren.

[ruebenwurzel]

Hallo,

warum nimmst du nicht einfach "Tabelle einfügen" im Editor? Da werden alle tages für Tabellen in den Quellcode geschrieben. Tabelleneinstellung en, die du nicht über die diversen Eingabemasken bei Tabellenigenschafte n machen kannst, kannst du dann auch direkt im Quellcode anpassen.

[sternchen8875]

wie bekomme ich denn zusätzliche tags in den WYSIWYG-Editor? Z.B. td, tr, data-label.

Ich denke, du solltest mit praktischen Beispielen kommen, sonst wird es eine endlos lange Diskussion.

Grundsätzlich muß man wissen, das der CKEditor auf der Basis von HTML4 arbeitet, darum sucht man die direkte Einbindung "moderner" Tags vergebens.
Weiterhin ist bis auf wenige Ausnahmen eigentlich alles erlaubt. Dies erfolgt über die Definition von allowedContent in der Konfiguration des Editors.
Diese Definition von allowedContent stand früher auf false und da war nur erlaubt, was auch im Filter stand. Schleift man also noch uralte wb_ckconfig.js in den Frontend-Templates mit, könnte dort das Problem sein, wenn diese Tags entfernt werden. Kontrollieren kann man das Ganze im Quelltext des Backends (nicht des Editors). Dort steht geschrieben, aus welcher Datei die Konfiguration gelesen wird. (siehe vorletzte Zeile (customConfig) im nachfolgendem Bild)



Um solchen Code einzufügen, bleiben aktuell zwei Möglichkeiten: entweder bearbeitet man den Quelltext des Editors oder man arbeitet mit Vorlagen. Diese eignen sich für Dinge, die man immer wieder verwenden möchte. Was tr und td betrifft, das wurde von den Vorrednern schon beantwortet, ist Teil des Tabellen-Plugins, war also nie ein Problem.
Das data-label oder allgemein label ist auch kein Problem, wie nachfolgender Code zeigt

Code: [Select]

<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="first-name">John</td>
<td data-label="last-name">Doe</td>
<td data-label="email">john@example.com</td>
</tr>
<tr>
<td data-label="first-name">Mary</td>
<td data-label="last-name">Moe</td>
<td data-label="email">mary@example.com</td>
</tr>
<tr>
<td data-label="first-name">July</td>
<td data-label="last-name">Dooley</td>
<td data-label="email">july@example.com</td>
</tr>
</tbody>
</table>
Wie gesagt, funktioniert alle und eigentlich schon seit einigen Jahren. Aber deine Frage käme nicht, wenn es genau so umgesetzt worden wäre. Darum ist vielleicht doch ein konkretes Beispiel von Nöten, was wo wie geht oder nicht geht. Eventuell ist es ja nur ein Mißverständnis und du hast etwas ganz Anderes vor.

[Concilla]

Ich danke Euch für die ausführlichen Antworten. Und somit möchte ich das Beispiel geben, denn es scheint doch wichtig zu sein. Es geht mir um ein Layout z.B. im Newmodul. Dort würde ich in den Optionen in die Kopfzeile eintragen (sehr vereinfacht):

Kopfzeile:

Code: [Select]

<table id="meine_tabelle">
          <tbody>
Beitrag Schleife:

Code: [Select]

[SHORT]
Fußzeile:

Code: [Select]

</tbody>
</table>
SHORT wird durch den Newstext ersetzt. Dieser sieht dann z.B. so aus:

Code: [Select]

<tr class="events-table__row members-event">
    <td class="events-table__cell events-table__cell--description" data-label="Description">
        <p class="events-event__heading">Mein Event</p>
        <p class="members-event__summary">Dieser Text hat keinen Inhalt.</p>
     </td>
      <td class="events-table__cell" data-label="Question">
         <p class="members-event__summary">Warum?</p>
     </td>
</tr>

Dies ergibt am Ende eine responsive Tabelle. Der Editior löscht mir hier jedoch nach dem Speichern alle td, tr, data-label und lässt nur p übrig.

Könnt Ihr mit dem Beispiel etwas anfangen?

[sternchen8875]

Wußt ich doch, das uns ein Beispiel weiterbringt...

Die Erklärung ist recht einfach, wird dich aber nicht erfreuen.

der CKEditor hat einen "eingebauten" HTML-Validator. Ein Konstrukt wie dein SHORT-Text ist kein valides HTML, weil eben der Table-Tag nicht Teil deines SHORT-Text-Codes ist.
Ich sag es mal so: das News-Modul ist für diese Art Code nicht geeignet. 

Ich habe mir für diese Zwecke ein eigenständiges Modul gebaut, wo dieser Code aus einem Template kommt und man dann nur die tatsächlichen Inhalte einfügt, bei deinem Beispiel dann  z.b. die Worte "Mein Event". Das Modul ist aber noch nicht reif für die Öffentlichkeit.
Es ist aber dem Modul "OneforAll" nachempfunden. Ich nutze OFA nicht, aber es gibt hier bestimmt Kollegen, die Auskunft geben können, ob das mit OFA umsetzbar ist.

[Concilla]

Vielen Dank für die Info. Also, bleibt mir nur, keine Tabelle sondern <div> zu verwenden. Kein Problem. Wird umgeändert.

[ruebenwurzel]

Kurze Verständnisfrage meinerseits. Wo versuchts du die Short-News einzubinden?

So wie ich dich verstanden habe, erstellst du einen WYSIWYG-Abschnitt und fügst dann in der Quellcodeansicht im CKEditor deine Tabelle mit den Short-News ein und der CKEditor haut dir dann die Tags raus. Hab ich das so richtig verstanden?

Zum einbinden der Short news nutze ich "cwsoft_anynews". Das Modul ist schon etwas älter, die von mir verwendete Version 2.15.3 läuft aber unter WB 2.13.3 und PHP 8.1. Ich binde die Funktion "DisplayNewsItems" immer direkt im Template (in der index.php des Templates) ein, damit die Short News Global auf allen Seiten vorhanden sind. Wenn man die Short News nur auf einer Seite wollen, sollte die Einbindung aber auch über einen Code Abschnitt in einer Seite möglich sein. Über die Gruppierung der News und den Aufruf der benötigten Gruppe kann man explicit steuern, welche Newsgruppe wo zu sehen sein soll.

[Concilla]

Ja, so hatte ich es angedacht, dass in die Quellcodeansicht im CKEditor die Tabellenabschnitte eingefügt werde, bzw. dass dies am Ende mit den Vorlagen passieren sollte. Ich habe nun aber alles auf <div> umgestellt.