Textarea: TinyMCE löscht leere Elemente!

[QJan]

Hallo,

ich nutze den Iconfont FontAwesome und möchte bei einem Link noch ein Icon dabei haben.

Code: Alles auswählen

<a class="btn btn-primary" href="XYZ">
  <i class="fa fa-map-marker"></i> Zur Website
</a>

Doch leider leider löscht TinyMCE immer den Code (<i class="fa fa-map-marker"></i>) raus, weil ich keinen Inhalt in <i> habe.
Gibt's dafür eine gute Lösung?

Gruß
Jan

[mokraemer]

warum genau brauchst du dafür ein leeres Element? Und dann auch noch eines zur Textauszeichnung.

Das ein Texteditor etwas aufräumen muß, ist logisch, sonst wäre der entstehende Quelltext der möglichst standardkonform sein soll auch chaotisch. Wenn man externe Text reinkopiert bzw. länger an etwas editiert passiert es ja, daß man kursive Leerzeichen etc. bekommt - das will man später aber nach draußen nicht zeigen.

Mittels ::before auf einem Auszeichnungselement solltest du dein Problem auch ohne leere Elemente (und eleganter) hinbekommen.

[ThomasGoebe]

Hallo Marc,

in Bootstrap wird aber nun einmal mit den leeren i Elementen gearbeitet. Das kann man kritisieren aber dennoch ist es eine Anforderung.
Gibt es dafür aus Deiner Sicht eine Lösung?

[mokraemer]

ich denke nein, das widerspricht eben den Anforderungen. Wenn wir zu viele Änderungen an den Quellen von tiny machen, dann können wir da auch irgendwann keine Updates mehr machen.

[ThomasGoebe]

Gäbe es denn einen tiny Parameter, mit dem das erreicht werden kann? Irgendwas, das leere Elemente nicht gelöscht werden sollen?

[WBTMagnum]

Hallo Jan,

Eventuell hilft dir das Attribut "tinyparams" in <we:textarea> weiter. Etwas in folgender Art könnte schon reichen um leere 'i' Elemente zu erlauben (ungetestet):

Code: Alles auswählen

<we:textarea ... tinyparams="extended_valid_elements:'i[*]'" ... />

Weitere Infos zum Attribut "tinyparams" finden sich in der Versionhistory: http://webedition.org/de/webedition-cms ... on-6.3.6.0 bzw. waren auch mal hier zu finden: http://webedition.org/de/webedition-cms ... iew-trunk/. Leider wurde die Preview Seite kürzlich überarbeitet. K.A. ob die darin enthaltenen Infos jetzt noch wo zu finden sind. Der Link in den Release Notes von 6.3.6.0 stimmt jetzt jedenfalls auch nicht mehr. Vielleicht kann das jmd. mit Editierrechten auf der Website wieder zugänglich machen.

Die Konfigurationsmöglichkeiten vom tinyMCE 3.x sind übrigens hier gelistet: http://www.tinymce.com/wiki.php/Configuration3x


HTH,
Sascha

[QJan]

Danke WBTMagnum,
werde ich mal testen.

[mausi]

@QJan: Hast Du das hin bekommen (ein Feedback wäre immer schön)? Für mein <span aria-hidden="true" class="glyphicon glyphicon-ok"></span> hat ein tinyparams="extended_valid_elements : 'span[*]'" nicht funktioniert.
Im Joomla! Forum ist das ebenso angegeben, aber die Doku von TinyMCE besagt eher, dass man damit nur alle Parameter zuläßt, aber nicht leere Tags. Dazu müsste man die HTML-Optimierung komplett deaktivieren. Aber selbst ein tinyparams="verify_html : false, extended_valid_elements : 'span*, span[*]'" funktioniert nicht. Ich denke es handelt sich um einen Bug: http://www.tinymce.com/develop/bugtrack ... hp?id=5269

[mausi]

... habe jetzt den Workaround mit einem >&nbsp;< genommen. Trotzdem nicht ideal.

[mokraemer]

die Ausgabe muß ja auch nicht im i-Tag erfolgen!
ein <span class="fa fa-car">bla</span>
geht genauso. Und bitte vergesst nicht - das ist ein Texteditor! Der ist hauptsächlich für Redakteure gedacht und er soll möglichst guten Quelltext liefern - dazu zählt eben auch leere Elemente zu entfernen - sonst würde der Quelltext ja auch wieder mit span's etc. zugemüllt, nur weil mal Fett oder Kursiv an war, jetzt aber deaktiviert ist.
Schließlich will man ja auch später die Seite noch sinnvoll per CSS Stylen (und tiny ist mit dem entfernen leider noch nicht rigoros genug, es bleibt immer noch zu viel "Müll" liegen).

Wenn ihr derart "hart" in die Ausgabe eingreifen wollt, ist eine normale textarea in die ihr html-Text schreibt sinnvoller.

[mausi]

Hallo Mark,

ob i oder span ist für die Sache völlig irrelevant. Leider sind diese "leeren Tags" anscheinend mit der Klassenangabe (bin kein CSS'ler) recht wichtig für die Umsetzung modernen HTML-Codes. Der TinyMCE bietet dazu auch eine passende Lösung, in dem man z.B. nur alle <xxx>-Tags die entweder einen Parameter enthalten oder nicht (z.B. span[!class] für alle span-Tags die keine Klassenangabe enthalten). Also man kann trotzdem sauberen Code erzeugen und die TinyMCE-Parameter sind ja normale Boardmittel.

Gruß,

Andreas

[Carrear]

Also ich finds auch mega unpraktisch. Mein Tiny macht außerdem aus dem i ein em Element. Aber ich habe eine Lösung für dich. Stelle Klassen im TinyMce für Verlinkungen bereit. Diese kannst du dann im CSS so aufbauen:

Code: Alles auswählen

.userXing:before {
	font-family: FontAwesome;
	content: "\f168";
	.margin-right(.6);
}

Und die Liste der content-codes findest du unter http://fortawesome.github.io/Font-Awesome/cheatsheet/

PS : Das .margin-right(); ist ein Mixin von mir bzgl. em und rem Auszeichnung. Also einfach durch deine normalen Margins ersetzen.

[mokraemer]

Was ich mit dem Span etc sagen wollte:
du kannst ein bel. Element nehmen um dem die Klassen von fa aufpropfen. Das ist ja auch z.T direkt gewollt, bspw. wenn man eine Liste hat etc.
Du kannst also statt:

Code: Alles auswählen

<span style="...."><i class="fa fa-..."></i>Mein Text</span>

einfach

Code: Alles auswählen

<span style="...." class="fa fa-...">Mein Text</span>

schreiben.

Und wenn du einfach einen Textteil in tiny markierst, kannst du dem ja dann auch die Klassen von Hand zuweisen. Es entsteht dann also sowas:
Mein Text mit einem <span class="fa fa-..">Icon</span>

Aber noch mal: tiny ist ein wyswyg Editor - kein HTML-Quelltext-Editor. Den Quelltext kann man anzeigen und im kleinen Rahmen bearbeiten - eigentlich auch eher nur um Fehler oder was ganz zerschossenes noch mal zu reparieren.

[mausi]

... also ich verstehe das Problem nicht. Typisches Verhalten in Foren. Jemand fragt warum rote Würstchen nicht funktionieren und der andere antwortet damit, dass rote Würstchen eh doof sind und er blaue nutzen soll. Dabei war das nicht die Frage.

Der TinyMCE kann alles was das Coder-Herz begehrt, die Version hier hat halt einfach einen Bug, welcher in der 3.5.11 (WE 6.4.1) anscheinend noch nicht gefixt ist (siehe Link). Offensichtlich sind diese Bootstrap Glyphicons ja keine allzu selten benutze Möglichkeit (http://www.w3schools.com/bootstrap/boot ... hicons.asp).

[mokraemer]

@mausi: nicht ganz. Es ist doch durchaus wünschenswert leere Elemente zu tilgen, weil sonst der resultierende Quelltext irgendwann komplett im Chaos untergeht. Das muß ja auch schon deshalb so sein, wenn du irgendeinen Button drückst (bspw. fett) und danach dich ohne was zu tippen das wieder zurücknimmst. Beim Druck ist ein span/b/em Tag entstanden, was beim wegdrücken wieder aufgeräumt wird. Und genau das passiert eben auch beim Speichern. Wenn das tiny nicht tut, wird es von WE erledigt werden - dazu gibt es auch schon weitreichendere FR's weil durch fehlendes Aufräumen teilweise das Editieren von Tabellen etc. fehlerhaft sein kann.
Und man muß nicht sagen, daß es doof ist, man kann einfach sagen - es ist so und geht eben nicht. Ich habe eben versucht zusätzlich aufzuzeigen, wie sich das durchaus realisieren läßt und dies eben auch sinnvoll im Quelltext da steht, statt einem einzelnen <i>-Tag - v.a. ohne daß man dafür den Quelltext editiert, denn sonst braucht man keinen wysiwyg Editor.