WebsiteBaker Support (2.13.x) > Hilfe & Support (deutsch)

Zusätzliche tags im WYSIWYG-Editor

(1/2) > >>

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:

--- Quote ---modules/ckeditor/ckeditor_config/wb_ckconfig.js
--- End quote ---
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:

--- Quote from: Concilla on January 27, 2023, 09:15:20 AM ---wie bekomme ich denn zusätzliche tags in den WYSIWYG-Editor? Z.B. td, tr, data-label.

--- End quote ---

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: ---<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>
--- End code ---

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: ---<table id="meine_tabelle">
          <tbody>
--- End code ---

Beitrag Schleife:

--- Code: ---[SHORT]
--- End code ---

Fußzeile:

--- Code: ---</tbody>
</table>
--- End code ---

SHORT wird durch den Newstext ersetzt. Dieser sieht dann z.B. so aus:


--- Code: ---<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>

--- End code ---

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?

Navigation

[0] Message Index

[#] Next page