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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin ein CKEditor-Entwickler. Wir haben einige Erfahrung mit verschachtelten readonly-Elemente (z.B.
Platzhalter
plugin und die Funktion wir arbeiten derzeit #9764) und ich habe keine gute Nachricht. Sie haben, um jedes Verhalten manuell, wenn Sie wollen, konsistente look&feel. Es gibt keine tricks, Update-Browser. Und viele Dinge (wie das mit seltsame Dinge geschehen rund um den Eingang auf GC) scheinen unlösbar.InformationsquelleAutor der Antwort Reinmar
Noch eine Idee, die vielversprechend aussieht:
Verwenden leeres span mit
::before { content:"caption"; }
sollte produzieren nicht bearbeitbaren block dargestellt, in der im DOM als Knoten ohne caret-Positionen im inneren.Können Sie versuchen, es hier http://jsfiddle.net/TwVzt/1/
Aber dieser Ansatz ist nicht frei von Problemen (in meinem Fall): Es gibt keine Möglichkeit zu erklären
::before
inline mit Stil DOM-Attribut und so den ganzen Satz erklärt werden sollte in der CSS im Voraus.Aber der merge-codes, die ich habe, ist ziemlich groß, sogar unbekannte im Voraus in voller Höhe in einigen Fällen verwenden. Seufz.
Doch die Umsetzung dieses Rezept hier, wenn jemand bessere Umstände (bekannte Satz von codes).
InformationsquelleAutor der Antwort c-smile
Ich weiß, das ist ein Alter thread, auf die ich stieß, mit ähnlichen problem. Brauchte nur wenige nicht-editierbare Bereiche im editierbaren div. Endete die Implementierung eines HACK-ETWA wie...
Komplette Turnschuh auf https://jsfiddle.net/fxmb3nL6/20/
InformationsquelleAutor der Antwort Pravin
Lösung unten-mit einer kleinen Einschränkung. Aber zuerst -- Sie Jungs sind genial!
Ich bin kein JS-oder HTML-Experte, aber ich habe auch nicht kennen jsfiddle.net.
So Lesen Sie Ihre Kommentare, plus andere online-Recherchen und einigen Tests auf jsfiddle erstellt habe ich den folgenden code, der funktioniert.
Wenn man diese in jsfiddle in chrome sehen Sie, es funktioniert in chrome (und IE und FF, aber ein wenig anders), aber es scheint eine kleine Einschränkung.
Nachteil ist, was deine Tastenkombination mit der Rücktaste! In meinem Fall, wenn ich wählen Sie eine nicht eine Wortgruppe ein, und drücken Sie die Rücktaste im chrome scheint es zu aktualisieren, oder "gehe zur letzten Seite"!
Ich habe die ersten zwei undeditbles rot (Links das Letzte schwarze), so dass Sie sehen können, was passiert. Ich Teste es auf jsfiddle in Chrome und im FF und im IE. Scheint alles zu haben richtig gehandelt, geben oder nehmen Sie die backspace-Problem.
Und ich denke, dass hier ist die Logik wie es funktioniert.
Das erste Div ist die top-level-Elternteil, und es ist contenteditable="false". Also Alles, was unter ihm ist, sollte un-editierbar. AUßER die Kinder, die haben span contenteditble="true", werden Sie bearbeitbar. So Erben Sie von Ihren Eltern, aber dann können Sie überschreiben, wie ein Kind.
Außerdem habe ich die tags readonly="true" nicht auswählbare="ON", da ich gelesen habe über Sie einige Ort. Und es dauerte mehr testen!!! BEACHTEN Sie BITTE, dass ich den nehmen musste Schriftart... außerhalb der span, oder es würde nicht funktionieren. Aber im IE funktionierte es perfekt. Die uneditables waren, welche Farbe ich Ihnen gesagt werden, und kein Betrag der einzelnen, dourble-oder dreifach-Klick wählen Sie die uneditbles in jsfiddle!!! 🙂 Für Chrom einzigen Klick nichts getan, Doppel-klicken Sie auf ausgewählte, die nicht bearbeitet werden, und mit backspace ging es ein bisschen verrückt! Es schien, dass Sie gehen würde, um die Vorherige Seite. Mit FF waren die Dinge ein bisschen verrückter! Doppel-klicken Sie auf ausgewählte, die nicht bearbeitbar und der Bearbeitbare vor! Keine Ahnung, warum.
Wenn jemand herausfinden können und schreiben über die Probleme mit Chrome und FF, das wäre toll. Es wäre schön zu haben, Doppel-klicken oder eine beliebige Anzahl von schnellen Klicks nicht zu funktionieren, in Chrome und FF auch. Wieder möchte ich betonen, die span... zu haben scheint, werden neben der uneditables und Schrift..., die außerhalb der Spanne.
Hoffe das macht alles Sinn.
InformationsquelleAutor der Antwort user96265
IE, versuchen Sie dies:
Hinweis: der umgekehrte Wert des contenteditable-Attribut! Es trotzt allen gesunden Menschenverstand, aber es funktioniert - zumindest im IE8 und IE9. Diese unveränderbare element Sie sich bewegen kann und kopieren/einfügen. Es ist jedoch bei weitem nicht perfekt. E. g. wenn Sie Fett eine region umfasst, die nicht element, diese infizieren den Inhalt der unveränderbare element als gut. So werden Sie wahrscheinlich haben, um einige scripting zu halten, die Vernunft des Elements. Auch die Einstellung contenteditable="true" schmücken wird, die nicht element mit Griffen. Sie können schalten Sie es erneut, indem nicht auswählbare="on", aber das wird verhindern, dass das Objekt gezogen wird, um. Wieder werden Sie wahrscheinlich haben, sich an einem Skript für die Wiederherstellung der Breite und Höhe.
InformationsquelleAutor der Antwort meringue