HTML contenteditable mit nicht editierbaren Inseln

Ich habe eine Art von browser-basierten WYSIWYG-editor, in dem Benutzer können Dokumente Bearbeiten-Vorlagen.

Dokument-Vorlage ist eine ganz normale html mit ein paar besonderen "merge code-Platzhalter". Eine solche Vorlage bekommt "instanziiert" durch ersetzen Sie diese Platzhalter durch die Daten aus der DB. Dieser gibt das endgültige Dokument eine Instanz der Vorlage.

Mein Aktueller Ansatz sieht so aus:

<div contenteditable>
  Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>

(Online Probe zu spielen: http://jsfiddle.net/tFBKN/ )

Wird die Eingabe nicht bearbeitet werden, in diesem Fall und verhält sich wie ein fester block, genau das, was ich brauche.
Benutzer können löschen merge-codes, indem Sie ENTF oder die RÜCKTASTE, wie alle anderen Zeichen, etc. Durch die richtige CSS für solche Eingaben.mergecode ich bin in der Lage zu erreichen, look-n-feel, die ich möchte.

Aber mit solchen Ansatz habe ich drei verschiedene Probleme, die in drei verschiedenen UAs:

  • IE - CSS { font:inherit } einfach nicht dort arbeiten, also wenn die Eingabe innerhalb <b> wie hier <b><input value="test"></b> erbt es nicht jede schriftart-styles.
  • FF - Kopie von fragment enthält <input> element entfernt, dass der input aus den Inhalt der Zwischenablage so weiter einfügen fügt alles, aber keine Eingänge.
  • GC - Klicken Sie auf {BACKSPACE} sofort nach der <input> produziert seltsame Ergebnisse (bug)

So, ich bin auf der Suche nach anderen Ideen, wie Sie repräsentieren nicht-editierbare inline-block gleich "Inseln" in HTML.

Anderen Ansatz, den ich bisher ausprobiert habe:

  • <span contenteditable="false">MergeCode1</span> - es funktioniert nicht, wie die meisten von der FH entfernt Knoten aus der Auswahl. So ist es nicht möglich, zu sagen, gelten <b> oder <i> auf top-of-Auswahl, die enthält solche span.

Irgendwelche anderen Ideen?

InformationsquelleAutor der Frage c-smile | 2013-01-30

Schreibe einen Kommentar