TinyMCE verhindert <i>

[kayyy]

Ich möchte gern in einigen Texten die Icons von Fontawesome einbinden.
Allerdings verhindert der TinyMCE das und schmeisst die <i> Elemente jedes mal raus.

Kann man das irgendwie umgehen ?

[planepix]

Mist falscher Button
Hast du mal versucht das als <i> in die erlaubten HTML-Tags einzutragen?

[xchs]

Man müsste schauen, ob dieses Element in der TinyMCE-Konfiguration in den "Valid Elements" oder "Extended Valid Elements" enthalten ist.

[kayyy]

<i> ist in den Erlaubte HTML-Tags eingetragen. Wo genau finde ich denn die TinyMCE-Konfiguration ?
Oder muss ich hier was in system/assets/tinymce ändern ?

[xchs]

Du könntest mal versuchen, in der TinyMCE-Konfiguration unter "system/config/tinyMCE.php" in der Zeile für "extended_valid_elements" das <i>-Element zu ergänzen.

[kayyy]

Funktioniert leider nicht, aber jetzt weiss ich schonmal wo ich suchen muss

Habs einfach auch mal in das TinyMCE Forum geschrieben, aber ich denke ich bin mit der Konfigurations Datei auf dem richtigen Weg

[xchs]

Wenn ich das recht sehe, dann sollte das <i>-Tag bereits im Default Rule Set der "Valid Elements" vorhanden sein (siehe z.B. hier). Dort wird das <i>-Element jedenfalls unmittelbar nach dem <em>-Tag angeführt. Daher würde ich meinen, sollte es eigentlich schon standardmäßig funktionieren. Der zusätzliche Eintrag in der Liste der "Extended Valid Elements" wäre demnach dann wohl auch nicht mehr erforderlich.

[xchs]

Ahh. Grad eben in der Demo getestet: Der TinyMCE wandelt sämtliche <i>-Elemente in <em>-Tags um.

[planepix]

Ein Schelm

[kayyy]

Sobald ich ein <i> Element einfüge ( im HTML-Quellcode bearbeiten ) , verschwindet es direkt wieder, nachdem abspeichern.

[planepix]

Ich habs neulich auch verbaut, aber eben geguckt, ich habe das in einem HTML-Modul drin... also ohne Tiny

[BugBuster]

Der TinyMCE hat da wohl seine eigene Meinung.
Aber warum gibst du das per Hand im HTML Quelltext ein? Markiere den Text, drücke den Button "I" , fertig. Im Quelltext findest du dann die <em> ... </em>.

[xchs]

Sobald ich ein <i> Element einfüge ( im HTML-Quellcode bearbeiten ) , verschwindet es direkt wieder, nachdem abspeichern.

Aber nicht in der Contao Online-Demo oder? Dort werden beim Speichern die <i>-Elemente in <em>'s umgewandelt (was ja grundsätzlich nicht ganz verkehrt ist ).

[planepix]

Der TinyMCE hat da wohl seine eigene Meinung.
Aber warum gibst du das per Hand im HTML Quelltext ein? Markiere den Text, drücke den Button "I" , fertig. Im Quelltext findest du dann die <em> ... </em>.

Kayyy will ja die IconFonts nutzen, die nehmen das <i>-Tag zum Ansteuern der Buchstaben / Icons.

[kayyy]

Aber nicht in der Contao Online-Demo oder? Dort werden beim Speichern die <i>-Elemente in <em>'s umgewandelt (was ja grundsätzlich nicht ganz verkehrt ist ).

In meiner lokalen Installation.
Ich mache es im Quelltext, da jedes <i> auch eine andere class hat.
<em> sollte ja weiterhin <em> bleiben, also kursiver Text.

Allerdings geht es bei Font Awesome ja über das <i> Element http://fortawesome.github.io/Font-Awesome/examples/

[planepix]

link = Lösung?
https://community.contao.org/de/showthread.php?37745-TinyMCE-schluckt-span-Angaben

https://github.com/contao/core/issues/5273

[kayyy]

Ich werde mir das ganze morgen noch einmal genauer anschauen, jetzt muss ich erst einmal nächtigen, habe schon vierecks Augen

Danke soweit schonmal für die super Hilfe, werde dann morgen nochmal schreiben ob wie was und wo geklappt/nicht hat.

[xchs]

Bei mir klappt es jetzt, wenn ich in der TinyMCE-Konfiguration "system/config/tinyMCE.php" die Liste der "Extended Valid Elements" um den Eintrag "i/em" ergänze, d.h.

extended_valid_elements : "q[cite|class|title],article,section,hgroup,figure,figcaption,i/em",

Versuch das mal!

[Mike1410]

Bei mir klappt es jetzt, wenn ich in der TinyMCE-Konfiguration "system/config/tinyMCE.php" die Liste der "Extended Valid Elements" um den Eintrag "i/em" ergänze, d.h.

extended_valid_elements : "q[cite|class|title],article,section,hgroup,figure,figcaption,i/em",

Versuch das mal!

Ich habe das gleiche Problem. Habe dies auch so umgesetzt wie du beschrieben hast. Leider passiert aber nun folgendes der i Tag ist vorhanden, aber nach dem Speichern geht die Klasse des Tags verloren, die essentiell ist.

Beispiel:

So eingefügt in der Tiny HTML Ansicht:
<i class="icon-test">test</i>

Nach dem Speichern:
<i>test</i>

Weisst du vlt. wo dran das liegen kann ?

[xchs]

Versuch mal, das Klassen-Attribut direkt mit anzugeben, also so:

extended_valid_elements : "q[cite|class|title],article,section,hgroup,figure,figcaption,i[class]/em",

Ungetestet und nur geraten.

[Mike1410]

Ich musste das leider sein lassen mit dem awesome icon font. Denn sobald ich diesen eingebunden, sprich die CSS, dann hat es mein Layout neagtiv beeinflusst

[elricco]

Versuch mal, das Klassen-Attribut direkt mit anzugeben, also so:

extended_valid_elements : "q[cite|class|title],article,section,hgroup,figure,figcaption,i[class]/em",

Ungetestet und nur geraten.

So funktioniert das

[Vamiris]

Hallo,

ich würde diesen Thread gerne noch einmal nach oben pushen.

Ich stehe vor dem gleichen Problem, Contao 3.4.5

Das Anpassen der tinyMCE.php verbunden mit mehreren Logout/Ins + Browser Cache Leerung hat nichts gebracht.

Sobald ich das Code Fenster des TinyMCEs schließe, sind die <i> Tags weg.

Hat dazu jemand einen Rat?

Vielen Dank.

[WilhelmTell]

sind die <i> Tags weg

Wenn es Dir nur um das i-Tag geht, schaffst Du das doch mit dem Zusatz i/em in der tinyMCE.php.
https://community.contao.org/de/show...l=1#post267714

[webstar]

Hallo,

ich würde diesen Thread gerne noch einmal nach oben pushen.

Ich stehe vor dem gleichen Problem, Contao 3.4.5

Das Anpassen der tinyMCE.php verbunden mit mehreren Logout/Ins + Browser Cache Leerung hat nichts gebracht.

Sobald ich das Code Fenster des TinyMCEs schließe, sind die <i> Tags weg.

Hat dazu jemand einen Rat?

Vielen Dank.

Wenn der Hintergrund die Verwendung einer Icon-Font ist, kann die Erweiterung font-awesome-inserttag verwendet werden. Statt den Tag an sich einzugeben, nutzt man einen InsertTag. Die Syntax ist hier erläutert. https://github.com/netzmacht/contao-...some-inserttag

Auch wenn das ganze für Font Awesome angelegt wurde, lässt sich durch Anpassung der Konfiguration die Syntax für eine andere Icon-Font angepasst werden.

Vielleicht hilft das weiter.

[Marchie]

HAllo zusammen,

ich würde den Thread auch gerne nochmals nach oben pushen. Habe ich das richtig verstanden, dass man im TinyMCE den HMTL Code nicht mehr insofern verändern kann, dass man die awesome fonts mittels span oder i einfügt??? Bei mir klappt das nämlich auch nicht. Das ist doch eigentlich unfassbar. Hat jemand eine FINALE BRAUCHBARE Lösung gefunden?

Bin ja mal gespannt .... Danke schon mal

[Bas]

Das Problem ist, das der Tiny leere <span> oder <i> entfernt.

Also fügt die Icons nicht leer ein, sondern schreibt den Text welchem das Icon vorgestellt werden soll in den Span.

z.B: <span class="icon-phone">000-000</span>

Evt müsst Ihr dem Pseudoelement noch ein margin für den Abstand von Icon zu Text mitgeben.

Ich nutze zwar Icomoon, aber das sollte auf Fontawesomne übertragbar sein.

[Spooky]

Habe ich das richtig verstanden, dass man im TinyMCE den HMTL Code nicht mehr insofern verändern kann, dass man die awesome fonts mittels span oder i einfügt???

Nein, das hast du falsch verstanden. Hier im Thread wurde ja schon die Lösung gepostet. Siehe http://fiddle.tinymce.com/hTeaab . Der Tag

<i class="fa fa-phone"></i> 

wird nicht entfernt.

[Marchie]

Hallo zusammen!!

Danke für eure Antworten!!

@Bas: diesen Ansatz mit dem leeren Tag hatte ich gestern auch und habe es dann mit einem &nbsp; versucht - was nicht klappte. Aber das lag daran, dass ich es mit <i> versuchte!! Den umschreibt der TinyMCE. Jetzt habe ich es nochmals mit <span> versucht und das geht. Den gesamten Text, wie du empfielhst, kann ich nicht ins Tag aufnehmen, da das Icon als Initial angezeigt werden soll. Ich verwende es nun so und das funzt:

<p><span class="fa fa-quote-left fa-3x pull-left">[nbsp]</span>Dies ist der Textabsatz .... lalala ...</p>

@Spooky:

Nein, das hast du falsch verstanden. Hier im Thread wurde ja schon die Lösung gepostet. Siehe http://fiddle.tinymce.com/hTeaab . Der Tag
PHP-Code:
<i class="fa fa-phone"></i>
wird nicht entfernt.

Doch es wird entfernt. Habe das grade nochmals geprüft. Keine Ahnung warum, früher war das nicht der Fall. Jetzt unter Contao 3.5 scheint es anders zu sein ....

[Spooky]

Doch es wird entfernt.

Ich glaube du hast mich falsch verstanden. Mit dem Link wollte ich zeigen, dass der <i> Tag nicht entfernt wird, wenn du die TinyMCE Konfiguration entsprechend änderst. Bei dem Link findest du eine TinyMCE Testseite, wo in der Konfiguration

valid_elements : "i[class]" 

eingetragen wurde, darüberhinaus befindet sich im HTML der <textarea> bereits ein

<i class="fa fa-phone"></i> 

als Test. Ohne der Änderung in der Konfiguration würde TinyMCE beim initialisieren den <i> Tag entfernen, mit der Änderung nicht.

Doch es wird entfernt. Habe das grade nochmals geprüft. Keine Ahnung warum, früher war das nicht der Fall. Jetzt unter Contao 3.5 scheint es anders zu sein ....

Nein, das war schon immer so. Siehst du ja auch hier in diesem Thread - dieser ist aus dem Jahr 2013, also lange vor Contao 3.5


Wie schon erwähnt musst du dir einfach die TinyMCE Konfiguration ändern, wie hier im Thread beschrieben. Da Contao 3.5 TinyMCE 4 verwendet könnten natürlich ein paar Dinge nun anders sein, aber die Vorgehensweise ist prinzipiell die selbe.


Bei FontAwesome Icons würde ich aber generell die Insert Tags der Contao Font Awesome Extension benutzen (neueste Version nur über Github/Composer verfügbar), ist etwas bequemer.

[Anke]

Für alle, die immer noch wieder an diesem Problem hängen: Der Editor akzeptiert das i-Tag mit folgenden Einträgen in der system/config/tinyMCE.php:

extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption,i[class]',
custom_elements: 'i[class]',

Wichtig ist, dass das i-Tag nicht nur unter den extended_valid_elements zugelassen, sondern auch als eigene HTML-Tag-Kreation (custom_elements) definiert wird.

VG Anke

EDIT: Ich muss mich korrigieren. Offenbar akzeptiert der Editor die i-Tags wie o.a. nur dann, wenn sie sich in einem Container befinden (div, p, h1 etc.) und gefüllt sind, z.B. mit einem [nbsp]

[Spooky]

Das solltest du aber in eine eigene TinyMCE Konfiguration geben. Sonst ist das nicht Update-sicher.

[Anke]

Richtig, danke

[Shania]

In der jeder Version scheint es anders zu funktionieren . Die hier zuletzt gepostete Lösung funktioniert bei mir in 3.5.24 auch wieder nicht.

Ist denn die Extension noch immer aktuell oder was ist derzeit der empfehlenswerte Weg?

[Shania]

Gibt es hier noch Anwender, die die Erweiterung [font-awesome-inserttag] mit aktueller 3.5 Contao-Version nutzen oder jemanden der mir sagen kann, ob es noch immer empfehlenswert ist das einzubauen? Soweit ich das erkennen kann, wurde seit über 2 Jahren nichts mehr daran gemacht.

Und ist die Funktion in Contao 4 im Standard enthalten oder muss man sich dafür wieder etwas anderes überlegen?

[Shania]

Hab es nun ausprobiert und die Erweiterung funktioniert. Ich werde sie nun nutzen, da ich schon alles darauf umgestellt habe.

Die Frage zu Contao 4 bleibt.

[PaddySD]

Was sollte auch an einer Erweiterung geändert werden, die ein Inserttag erstellt? Das ist ja nix, was man mit Updates anpassen müsste.

Will heissen, ja, die Erweiterung funktioniert unter 3.5.x ganz wunderbar, man hat keinen Aufwand mit den Icons, ausserdem ist es sehr einfach zu merken, kurzum: Für FontAwesome nutzt man am Besten die Erweiterung, die oben verlinkt ist.

[Shania]

Ich hab schon genug Pferde kotzen sehen , aber dennoch danke für deine Belehrung.

[PaddySD]

Sorry wenn das so rüber kam, dass war keinesfalls als Belehrung gedacht.

[derRenner]

thread-update für 4.12.3 und tinyMCE 5

Ich hebe dieses Thema nochmals hoch, da ich heute hierzu Recherche anstellen musste.
Für eine 4.12.3 hatte ich folgendes Problem (die Lösung dazu findet ihr unterhalb):

• <i class="fa fa-icon-soundso"></i> für Fontawesome Icons wird vom tinyMCE nach dem Speichern entfernt
• bzw. <i class="fa fa-icon-soundso"></i> wird zu beim Speichern zu <em class="fa fa-icon-soundso"></em>
• <span> wird beim Speichern entfernt

Abhilfe:
/templates/be_tinyMCE.html5 anlegen und folgenden Inhalt einfügen

## /templates/be_tinyMCE.html5
<?php $this->extend('be_tinyMCE'); ?>

<?php $this->block('custom'); ?>
    extended_valid_elements: 'i[*],span[*]',
<?php $this->endblock(); ?>

Nun wird <i class="fa fa-icon-soundso"></i> noch immer entfernt » vergib zwischen dem <i></i> ein Leerzeichen » <i class="fa fa-icon-soundso"> </i>

Damit das <span></span> beim Speichern nicht gelöscht wird, half bei mir die Vergabe einer Klasse » <span class="myclass">Lorem Ipsum</span>