Editor: Bestimmte Tags schützen

[blabla333]

Hallo zusammen,

ich habe leider eine ziemlich spezielle Frage. Ich nutze den Redactor Editor (http://imperavi.com/redactor/). Dabei habe ich z.B. ein DIV-Element mit Inhalt (<div style="background-color: red; width: 300px; height: 100px;">Inhalt</div>)
Wenn ich nun im WYSIWYG-Editor den Inhalt dieses Elementes lösche und noch weiter die Backspace-Taste drücke, dannn verschwindet auch das ganze DIV-Element. Und genau das möchte ich verhindern. Wenn dieses Element leer ist, dann sollte die Backspace-Taste praktisch keinen Effekt mehr haben. Das Element bleibt bestehen und wird nicht verändert.
Hat jemand einen guten Tipp für mich?
Ich versuche mich schon seit Tagen daran und komme einfach nicht weiter.

Ich denke, dass ich irgendwie mit "changeCallback" arbeiten muss, aber dieser "Schutz" als solche bereitet mir schon Schwierigkeiten.

 

[Tronjer]

Verwende doch Firebug als WYSIWYG-Editor um temporäre Veränderungen vorzunehmen, ohne dabei den Quellcode zu löschen.

 

[blabla333]

Das geht leider nicht. Der Editor wird im Rahmen einer Webapp eingesetzt. Das alles zu erläutern ist sicher zu umfangreich. Aber letztlich darf der User eben bestimmte Elemente nicht verändern/löschen können. Deshalb eben meine Frage.

Ich dachte irgendwie an eine Art Abfrage, so dass beim Löschen eines Zeichens überprüft wird, ob gerade ein bestimmter HTML-Tag oder String verändert werden soll. Wenn dies der Fall ist, dann wird das unterbunden. Irgendwie so in der Art. Aber wie gesagt, ich bekomme den Ansatz einfach nicht hin.

 

[threadi]

Du willst eine sehr spezielle Einstellung im Editor haben. Dann wäre die erste Anlaufstelle der Hersteller des Editors. Mit HTML hat das gar nichts zu tun, zumal es wenn überhaupt durch eine JavaScript-Funktion unterbunden werden müsste, die aber abhängig von dem Editor ist. Wenn dieser Editor dir das nicht bieten kann was Du willst, such dir einen anderen. Mir ist jedoch kein Richtexteditor (so ist der eigentliche Name hiervon) bewusst bei dem das Löschen von Elementen auf bestimmte Elemente beschränkt ist.

 

[blabla333]

Und mein grober Gedanke, dass man bei jeder Änderung überprüft, ob ein bestimmter Tag noch komplett ist, kann man nicht umsetzen?

Mir ist klar, dass das eine spezielle Einstellung ist, aber ich dachte, dass man das mehr oder weniger unabhängig vom Editor machen kann. Denn erstens gibt es von dem Hersteller keinen Support in dieser Richtung. Und zweitens gibt es die Möglichkeit eine Art Plugin für den Editor zu entwickeln, d.h. ganz eigene Funktionen einzubringen. Ich dachte, dass man das dann eben auf diese Art einbauen kann, somit muss die Funktion ja im eigentlichen Editor (noch) nicht verfügbar sein.
Außerdem möchte ich irgendwann auch mal rangehen und einen ganz eigenen (speziell für meine Bedürfnisse angepassten) Editor schreiben. Aber da stehe ich ja vor dem gleichen Problem. Ich muss also das Ganze wirklich selbst schreiben. Insofern ist es doch eigentlich irrelevant welcher Editor zum Einsatz kommt.

Nochmal zu meinem Gedanken (aber vielleicht hat ja auch jemand eine effektivere Idee): Wenn es z.B. um den Tag <div class="klasse">Inhalt</div> geht, so wird nach jeder Änderung (oder bei jeder Betätigung der Backspace-Taste?) überprüft, ob z.B. die Klammer des Anfang-Tags entfernt wurde, also: <div class="klasse"Inhalt</div>. Das bedeutet, dass diese Änderung nicht übernommen wird, bzw. der Tag wieder vervollständigt wird.

Wie gesagt, nur so ein Ansatz meinerseits. Vielleicht gibt es bessere Ansätze.
Letztlich sind es nur bestimmte HTML-Vorlagen, die "geschützt" werden sollen, d.h. es gibt ca. fünf verschiedene Buttons, die ein HTML-Gerüst als Vorlage einbinden. Der User kann dann den Text-Inhalt schreiben und verändern, aber dieses Gerüst sollte unveränderbar sein, da sonst das Layout zerschossen wird.

 

[blabla333]

Also ich habe nochmals darüber nachgedacht.
Der einzig spezielle Teil wäre dieser hier:

$('#redactor').redactor({
    changeCallback: function(html)
    {
        console.log(html);
    }
});

In diese Funktion kommt nun etwas, mit dem ich einen String überwache/manipuliere/vergleiche. Und das ist ja eine sehr allgemeine Sache.
Was kann also passieren? Der User markiert einen bestimmten Teil des Textes und löscht diesen oder er benutzt die Backspace-Taste, um Text zu löschen.
Es muss also der String vor und nach der Änderung verglichen werden, oder?
Ist nun das HTML-Gerüst nicht mehr vollständig, so wird die Änderung verweigert, d.h. der User sieht keine Änderung.
Soweit meine Theorie.
Also muss in dem "Original-String" erst einmal ermittelt werden, wo denn entsprechende HTML-Bausteine überhaupt vorliegen. Danach wird mit dem neuen String verglichen. Ist der Baustein nicht mehr vollständig, so wird die Änderung nicht mehr übernommen (und es wird eine Fehlermeldung ausgegeben).

Hmm... Das muss doch irgendwie einfacher gehen, oder?