Span Tag via visuellem Editor im Hintergrund erstellen - page 2

Gelöst radarin
(@radarin)

vor 2 Jahren, 6 Monaten
Guten Morgen

Bevor Gutenberg kam, gab es für den TinyMCE die Erweiterung ‚TinyMCE Custom Styles‘. Damit konnte man Text markieren und mittels Kontexmenu im Quellcode einen SPAN-Style drum rum packen.

Beispiel:

Gibt es dafür mittlerweile auch eine Lösung für den Blockeditor? Oder muss ich das weiterhin umständlich von Hand in den Quellcode einbinden?
- Dieses Thema wurde geändert vor 2 Jahren, 6 Monaten von radarin.
- Dieses Thema wurde geändert vor 2 Jahren, 6 Monaten von radarin.
- Dieses Thema wurde geändert vor 2 Jahren, 6 Monaten von radarin.
- Dieses Thema wurde geändert vor 2 Jahren, 6 Monaten von radarin.

Ansicht von 9 Antworten - 16 bis 24 (von insgesamt 24)

← 1 2

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 5 Monaten
Es soll so aussehen wie es eben ausschaut, wenn man mit einem Textmaker was markiert.

Das solltest du über eine eigene CSS-Regel steuern.
Shortcodes passen irgendwie kaum noch in den Workflow, wenn du mit dem Block-Editor arbeitest.

Kleine Anekdote: Ich hab vor sechs Jahren ein Plugin entwickelt, um im alten TinyMCE-Editor in langen Texten Anker zu setzen und mit einer fließenden Animation anzusteuern. Inzwischen geht das im Block-Editor ganz einfach – jedem Inhaltsblock kann über die Sidebar bequem (und vor allem ohne Shortcode) ein Anker hinzugefügt werden und statt einer JavaScript-Funktion übernimmt eine CSS-Regel die Animation beim Klick auf den Link zu einem Anker …
Heute meldet sich ein Benutzer, der das Plugin seit sechs Jahren für eine umfangreiche Website verwendet und eigentlich auch (mit dem Classic Editor) weiter nutzen möchte. Er hat aber festgestellt, dass durch die JavaScript-Funktion der Zurück-Buttons statt innerhalb der Webseite direkt zur vorherigen Webseite springt. Deaktiviert er jetzt das Plugin, um den Zurück-Button normal zu nutzen, werden die Shortcodes nicht mehr gerendert, sondern im Frontend ausgegeben. Eine Ersetzung in der Datenbank wäre nur mit Regular Expressions möglich gewesen, weil die Shortcodes Angaben zu CSS-Klassen und Anker-IDs enthalten und mal Text umschließen und mal alleine stehen. Schlimmer noch: die interne Verlinkung funktioniert nach Deaktivierung des Plugins natürlich auch nicht mehr und im Backend können keine neuen Anker mehr gesetzt werden.
Um euch nicht weiter zu langweilen: ich habe vier Stunden an einem neuen Plugin gesessen, das die alte Funktionalität beibehält, aber auf die JavaScript-Funktion verzichtet.

Fazit: Shortcodes können irgendwann zu einem Problem werden. Auch deshalb finde ich die hier vorgeschlagene Lösung weiterhin recht fragwürdig. Nicht bös gemeint, jeder macht so wie er mag …

PS: @hage hat geschummelt: die Formatierung gibt es so nur in Verbindung mit dem Gutenberg-Plugin. 😀 (Damit aber verlässlich reproduzierbar.)
- Diese Antwort wurde geändert vor 2 Jahren, 5 Monaten von Bego Mario Garde.
Thread-Starter radarin
(@radarin)

vor 2 Jahren, 4 Monaten
Das solltest du über eine eigene CSS-Regel steuern.

Die Darstellung ist ja CSS, sie muss ja nur ins HTML rein. Wenn das WIYSISYG mässig im Backend funktionieren würde, ohne das von Hand in den Quellcode rein zu fummeln, und ohne Shortcode, wäre schon toll, wäre deutlich übersichtlicher.

Ich habe es nochmals mit dem Advanced Editor Tools versucht. Nachdem ich beim ersten Versuch von all den Buttons und Rollmenus im Eingabeblock fast erschlagen wurde, habe ich mir die Einstellungen näher angesehen. Es scheint, als kann man da alles was nicht benötigt wird WEG-Einstellen. Ich hab also mal alles was geht weg gehäckelt. Ist nun auch wieder schön übersichtlich, gar nicht mehr erkennbar, dass das Plugin aktiv ist, nur ein paar Wenige Sachen in der Seitenliste sind dazugekommen.

Ich hab dann versucht, nur die Stilauswahl dazu zu bekommen. Erfolglos. Also die Standardeinstellungen wieder hergestellt. Nix. Deaktiviert, aktiviert, nix. Plugin gelöscht (via Funktion im Backend) und wieder neu installiert. Nix. Weiterhin kein einziger Button zu sehen.

In der Datenbank ist mir nichts Auffälliges ins Auge gestochen.

Ich hab es auch noch damit versucht, das Plugin Verzeichnis zu löschen und dann nochmals neu zu installieren. Nix.
- Diese Antwort wurde geändert vor 2 Jahren, 4 Monaten von radarin.
- Diese Antwort wurde geändert vor 2 Jahren, 4 Monaten von radarin.
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 4 Monaten

PS: @hage hat geschummelt: die Formatierung gibt es so nur in Verbindung mit dem Gutenberg-Plugin. 😀 (Damit aber verlässlich reproduzierbar.)

oha, das kommt davon, wenn man auf verschiedensten WordPress-Instanzen zum Testen das Gutenberg-Plugin installiert hat und völlig vergisst, dass das Feature ja noch gar nicht drin ist. Aber dann sollte das ja nicht mehr lange dauern, bis das im Core landet.
Zum Bereinigen von ungenutzten oder nicht mehr funktionierenden Shortcodes kann man ggfs. das Plugin Shortcode Cleaner Lite nutzen.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 4 Monaten
Die Darstellung ist ja CSS, sie muss ja nur ins HTML rein. Wenn das WIYSISYG mässig im Backend funktionieren würde, ohne das von Hand in den Quellcode rein zu fummeln, und ohne Shortcode, wäre schon toll, wäre deutlich übersichtlicher.

Irgendwie sprechen wir aneinander vorbei.

Wenn du die von Hans-Gerd vorgeschlagene Formatierung von Gutenberg verwendest, brauchst du keine Shortcodes und keine <div>-Tags. Gutenberg rendert die markierten Textabschnitte mit dem HTML-Tag  und mit
```
mark {
 border-radius: 5px;
 padding: 5px;
 background-color: yellow !important;
 color: black !important;
}
```
gibts du der Textstelle einen „Textmarker-Look“.

Wenn’s denn unbedingt sein muss, kannst du auch Editor-Styles für Gutenberg erstellen, um diese Formatierung im Backend angezeigt zu bekommen.

Mit den Advanced Editor Tools (vormals TinyMCE Advanced) (wir sprechen doch vom gleichen Plugin?) ist es auch kein großes Ding, eine „Textmarker“-Formatierung hinzubekommen. Text markieren, Pulldown-Menü [1] anklicken, Menüpunkt Markiere [2] anklicken. Wichtig ist, die Farbeinstellung nicht über das Sidebar-Menü „Farben“ einzustellen (was den gesamten Absatz einfärbt), sondern über Textfarbe [3].

(zum Vergrößern anklicken)

Der markierte Text wird durch das Plugin als
```

 
 ipsum dolor sit amet
 

```
gerendert, was ebenfalls mit einer eigenen CSS-Regel wie z.B.
```
mark span.tadv-color {
 box-shadow: 3px 3px 5px #ddd;
 border-radius: 0 3px 3px 0;
 padding: 5px;
 background: pink;
 color: black !important;
}
```
noch aufgemotzt werden kann.

Das Ergebnis sieht dann im Frontend z.B. so aus:

(zum Vergrößern anklicken)
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 4 Monaten

@hage Danke für den Tipp mit Shortcode Cleaner. Ein ähnliches Plugin (Remove Orphan Shortcodes) hatte ich dann auch den Anwender vorgeschlagen, aber das war eine unbefriedigende Lösung, weil durch die komplette Deaktivierung des Plugins auch erwünschte Funktionalität entfernt worden wäre.

Heute bietet sich in vielen Fällen an, statt des Shortcodes eigene Blöcke zu programmieren (eine Zauberkunst, auf die ich mich zumindest ohne Hilfs-Plugins noch nicht so recht verstehe), weil die gleich im Backend gerendert werden. Das Problem bleibt aber das Gleiche: deaktivierst du das Plugin, mit dem der Block eingebunden wird (oder Blog-Plugins wie Ultimate Addons for Gutenberg, Kadence Blocks usw.) meldet der Editor auch einen Fehler, weil er den Block nicht rendern kann. Es bleibt dabei, dass gut überlegt sein will, welche Plugins installiert werden.

Thread-Starter radarin
(@radarin)

vor 2 Jahren, 4 Monaten

Ich danke Euch für Eure Bemühungen, aber das bringt alles nichts.

Ich habe das getestet, greift bei mir überhaupt nicht. Und wären da auch unterschiedliche Farben möglich? Und ich will jetzt auch nicht auf dem Textmarker rum reiten, ich brauch das auch noch für andere Hervorhebungen. Es muss einfach ein in den Quellcode. Punkt.

Ja, wir reden vom gleichen Plugin. Macht das Chaos nur noch grösser. Auch zusammen mit dem TinyMCE Custom Styles Plugin krieg ich es nicht integriert. Das Advanced Editor Tools hat zu viele Einstellungsmöglichkeiten die man offenbar falsch setzen kann, das ist mir viel zu unsicher.

Ich muss mich jetzt auf das effiziente Schreiben von Beiträgen konzentrieren, da ich diesbezüglich eine in Stein gemeisselte Deadline habe. Und ich möchte auch Eure Zeit nicht unnötig beanspruchen.

Der Beitrag ist als gelöst markiert, lassen wir es dabei.

Danke.

Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 4 Monaten

@pixolin danke für den Tipp mit Remove Orphan Shortcodes. Kannte ich noch nicht.
Ich suche in der Regel erst mal Plugins, die mir die Funktionalität als Block anbieten. Erst danach suche ich Plugins, die möglicherweise Shortcodes verwenden.
Und bezogen auf die Programmierung von Blöcken: Dazu bräuchte ich mehr Zeit, um mich darin einzuarbeiten. Die habe ich gerade leider nicht – sehr schade 😢

adigo2
(@adigo2)

vor 2 Jahren, 4 Monaten

Bin neu hier!
Ich möchte in meinen (langen) Texten links setzen, die ich als Sprungmarken von außen nutzen kann. Etwa so: https://de.wikipedia.org/wiki/Ampelkoalition#Landesebene

Geht das?

Herzlichen Dank schon mal. Adalbert

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 4 Monaten

@adigo2 Was hat das mit der Frage hier zu tun, die auch noch als „gelöst“ markiert ist (damit die Helfenden wissen, dass sie hier nicht mehr schauen müssen)?

Bitte starte einen neuen Thread.

Ansicht von 9 Antworten - 16 bis 24 (von insgesamt 24)

← 1 2

Das Thema „Span Tag via visuellem Editor im Hintergrund erstellen“ ist für neue Antworten geschlossen.

Ansichten