ersetzen innerHTML in contenteditable div
muss ich implementieren highlight für zahlen( in Zukunft im komplexer Regeln ) in der contenteditable div. Das problem ist, Wenn ich neue Inhalte einfügen mit javascript ersetzen, DOM-änderungen und contenteditable div-Element den Fokus verloren. Was ich brauche, ist Fokus auf den div mit der Einfügemarke auf der aktuellen position, also können Benutzer geben Sie einfach, ohne Probleme und meine Funktion einfache Hervorhebung zahlen. Googeln um mich zu entscheiden, dass Feingliedrig Bibliothek ist die beste Lösung. Ich habe folgenden code:
function formatText() {
var savedSel = rangy.saveSelection();
el = document.getElementById('pad');
el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>");
rangy.restoreSelection(savedSel);
}
<div contenteditable="true" id="pad" onkeyup="formatText();"></div>
Das problem ist, nach der Funktion Ende die Arbeit konzentrieren sich wieder auf das div, aber Cursor immer am div beginnen, und ich kann geben überall, execept div beginnen. Auch die Konsole.log-Typen werden folgende Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection.
Bitte helft mir, dies umzusetzen funktionsfähig. Im offen für andere solutiona, nicht nur feingliedrige Bibliothek. Danke!
http://jsfiddle.net/2rTA5/ Dies ist jsfiddle, aber Sie funktionieren nicht richtig(es passiert nichts, wenn ich tippte die zahlen in mein div), keine Ahnung, vielleicht ist es mir (zum ersten mal post-code per jsfiddle) oder Ressource nicht unterstützen contenteditable.
UPD* Im Lesen ähnliche Probleme auf stackoverflow, aber die Lösungen nicht passen zu meinem Fall 🙁
beziehen Sie sich auf die caret-position durch eine chance?
ich poste meinen code in der js-fiddle, siehe mein Beitrag. Als ich es bekommen, das ist, was restoreSelection tun. Bibliothek merken Cursor-position und restauriert.
InformationsquelleAutor Petya petrov | 2011-04-08
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, dass Feingliedrig ist, speichern/wiederherstellen-Auswahl-Modul funktioniert durch einfügen von unsichtbaren Markierung von Elementen in den DOM, wo die Auswahlgrenzen sind und dann code-Streifen aus alle HTML-tags, einschließlich Feingliedrige markers Elemente (wie die Fehlermeldung schon sagt). Sie haben zwei Optionen:
innerHTML
. Dies wird zuverlässiger, aber aufwändiger.UPDATE
Habe ich geschlagen, bis ein Charakter index-basierte Auswahl speichern/wiederherstellen für Migrierende (Möglichkeit 2 oben). Es ist ein wenig rau, aber es macht den job für diesen Fall. Es funktioniert durch das Durchlaufen von text-Knoten. Ich kann fügen Sie diese in die Feingliedrige, in irgendeiner form. (UPDATE 5. Juni 2012: Habe ich jetzt umgesetzt, in zuverlässiger Weise für Migrierende.)
jsFiddle: http://jsfiddle.net/2rTA5/2/
Code:
Ich werde sehen, was sich morgen.
Das problem mit dem drücken der EINGABETASTE ist, dass der code entfernt alle
<br>
oder<div>
element der browser-Einsätze für den Zeilenumbruch. Wenn der Umgang mit diesem für Sie wichtig ist, würden Sie wahrscheinlich besser dran mit einem DOM-traversal-Ansatz zu färben zahlen.sorry für meine Unbedarftheit, aber können Sie beschreiben mehr das traversal Weg, oder gib mir einen link, danke an alle, die Arbeit und die Bibliothek.
Ich würde eine rekursive Funktion prüfen jeden text-Knoten innerhalb des container-element für zahlen. Es ist zwar ein bisschen beteiligt, aber hat den Vorteil der Erhaltung bestehender Elemente. Hier einige Beispiele, die Sie möglicherweise in der Lage, sich anzupassen: stackoverflow.com/questions/4040495/... und stackoverflow.com/questions/2798142/...
InformationsquelleAutor Tim Down
Ich danke Tim für die Funktion teilte er hier mit uns, es war sehr wichtig für ein Projekt an dem ich arbeite. Ich embeded seine Funktion ein kleines jQuery-plugin, welches Sie hier einsehen können: https://jsfiddle.net/sh5tboL8/
plugin macht nur das, was ich brauchte, es zu tun, erhalten Sie den ausgewählten text, und das festlegen von benutzerdefinierten text-Auswahl. Es funktioniert auch auf Textfelder und contentEditable divs.
InformationsquelleAutor domaci_a_nas