Styling contentÄnderbare Listen (li) mit Schriftfamilie, Schriftgröße und Farbe

Ich suche nach einer Möglichkeit, Listen zu stylen, so dass sie die vom Benutzer während der Bearbeitung in einem contentEditable-Element festgelegte Formatierung verwenden. Insbesondere möchte ich in der Lage sein, die Zahl / das Aufzählungszeichen auf die gleiche Weise wie den Rest des <li> -Inhalts zu stylen.

Nach den Tests, die ich gemacht habe, formatiert der Browser niemals <li> -Tags direkt (was tatsächlich den Stil der Zahl / des Bullet steuert), sondern setzt immer ein <font> -Tag (oder <span> wenn StyleWithCSS ) Als erster Kindknoten verwenden Sie ihn für die Formatierung. Ich habe schon ein paar Ideen ausprobiert, um das zu umgehen, habe aber keinen Erfolg gefunden:

1. Wenden Sie Stile programmatisch auf die <li> an

Hier habe ich versucht, nach 'DOMNodeInserted' zu suchen und wenn ein <li> -Tag in das DOM eingefügt wurde, habe ich die aktuellen fontName , fontSize und foreColor Befehle abgefragt und sie als Inline Style auf die <li> .

Auch wenn Sie damit beginnen, den Listeneintrag einzugeben, versucht der Browser "intelligent" zu sein und entfernt die Stile von <li> und platziert sie in <font> (oder <span> ). Etikett. : (

2. Erstellen Sie eine Regel für die Stile, die in das StyleSheet

Ausgehend von dem obigen Versuch habe ich, anstatt die Styles inline zu schreiben, eine Regel für sie erstellt, dem Knoten <li> eine ID gegeben und die Regel in das Stylesheet eingefügt. Jetzt würde die Regel den Stil von <li> bestimmen, und ich könnte CSSOM verwenden, um die Styles bestimmter <li> ständig zu aktualisieren.

Dies scheint sehr gut zu funktionieren (mit ein paar Bugs, die es zu lösen gilt), jedoch bricht es den contentEditable Rückgängig-Stapel komplett durch. Da der Rückgängig-Befehl nur mit textContent und anderen Formatierungsbefehlen verknüpft ist, gibt es keine Möglichkeit, die Stile, die Sie im Stylesheet festlegen, rückgängig zu machen. (Zumindest nicht sehr intuitiv, ich habe darüber nachgedacht, wie das gemacht werden könnte ...)

3. Achten Sie auf Änderungen in den <li> -Attributen und behalten Sie sie bei

Für diesen Versuch habe ich den neu verfügbaren MutationObserver Ссылка in DOM Level 4 verwendet. Dieser Beobachter kann nach Änderungen in den Attributen eines Knotens Ausschau halten, die in einem MutationRecord zurückgegeben werden. Es kann sogar die vorherigen Attributwerte enthalten, einschließlich style -Werte, sodass ich herausfinden konnte, was entfernt wurde, und es erneut anwenden.

Dies leidet immer noch unter mangelnder Undo-Unterstützung. Sie werden andere Formatierungsänderungen rückgängig machen, aber die <li> s behält ihre Stile.

Irgendwelche neuen Ideen da draußen? Modern-Browser-Lösungen wurden ebenfalls begrüßt. Ich bin mir bewusst, dass ich meinen eigenen HTML-Code formatieren kann, um ihn für Listen zu verwenden, aber ich versuche herauszufinden, ob dies mit den Standardbefehlen insertOrderedList und insertUnorderedList möglich ist, die echte Listen-Tags verwenden.

** Update 7. November 2012 **

Sieht nicht so aus als hätte jemand das schon gelöst, hier ist ein Beispiel JSFiddle, um zu sehen, was ich beschreibe: Ссылка . Versuchen Sie einfach, die Stile von Aufzählungslisten oder nummerierten Listen zu ändern.

Für das Projekt, an dem ich arbeite, verwenden wir unser eigenes Build von WebKit, so dass wir dies mit einer nativen Änderung beheben konnten, aber ich hoffe, dass es einen Weg (oder einen Weg) gibt, dies direkt zu tun mit HTML / CSS / JS.