remplacer innerHTML dans div divisible

j'ai besoin pour mettre en œuvre mettre en évidence pour les nombres( dans le futur, im ajouter des règles plus complexes ) dans le contenteditable div. Le problème, c'est Quand im insérer le nouveau contenu javascript remplacer, DOM changements et contenteditable div perdu le focus. Ce dont j'ai besoin est de maintenir l'accent sur les div avec le curseur sur la position actuelle, de sorte que les utilisateurs puissent saisir sans aucun problème et ma fonction simple mettant en évidence les numéros. Googler autour de moi, je décide que Longiligne bibliothèque est la meilleure solution. J'ai code suivant:

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>

Le problème, c'est après la fonction de fin de travail, l'accent est de retour à la div, mais signe toujours le point à la div de commencer et je peux taper n'importe où, execept div commencer. Également de la console.les types de journaux suivants Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection.
Merci de m'aider à mettre en œuvre cette fonctionnelle. Im ouverte pour une solutiona, non seulement longiligne de la bibliothèque. Merci!

http://jsfiddle.net/2rTA5/ C'est jsfiddle, mais il ne fonctionnent pas correctement(il ne se passe rien quand j'ai tapé les chiffres dans mon div), je ne sais pas, peut-être qu'il m' (première fois code postal via jsfiddle) ou de ressources ne supporte pas contenteditable.
UPD* Im lire les mêmes problèmes sur stackoverflow, mais les solutions ne marche pas à l'adapter à mon cas 🙁

source d'informationauteur Petya petrov

  1. 22

    Le problème est que Longiligne de sauvegarder/restaurer le module de sélection des œuvres par l'insertion de marqueur invisible éléments dans le DOM où les limites de la sélection, puis votre code supprime toutes les balises HTML, y compris Longiligne du marqueur éléments (comme le message d'erreur indique). Vous avez deux options:

    1. Déplacer vers un DOM traversée de solution pour la coloration des chiffres plutôt que innerHTML. Ce sera plus fiable mais plus impliqués.
    2. De mettre en œuvre un caractère alternatif fondé sur l'indice de sélection d'enregistrer et de restaurer. Ce serait généralement fragile, mais à faire ce que vous voulez dans ce cas.

    Mise à JOUR

    J'ai frappé un caractère d'index de sélection basée sur sauvegarder/restaurer Longiligne (option 2 ci-dessus). C'est un peu rude, mais il fait le travail pour ce cas. Il fonctionne en parcourant les nœuds de texte. Je peux ajouter ceci dans Longiligne dans une certaine forme. (Mise à JOUR le 5 juin 2012: J'ai maintenant mis en œuvre ce, dans un moyen plus fiable, pour Longiligne.)

    jsFiddle: http://jsfiddle.net/2rTA5/2/

    Code:

    function saveSelection(containerEl) {
var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};
var sel = rangy.getSelection(), range;
function traverseTextNodes(node, range) {
if (node.nodeType == 3) {
if (!foundStart && node == range.startContainer) {
start = charIndex + range.startOffset;
foundStart = true;
}
if (foundStart && node == range.endContainer) {
end = charIndex + range.endOffset;
throw stop;
}
charIndex += node.length;
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
traverseTextNodes(node.childNodes[i], range);
}
}
}
if (sel.rangeCount) {
try {
traverseTextNodes(containerEl, sel.getRangeAt(0));
} catch (ex) {
if (ex != stop) {
throw ex;
}
}
}
return {
start: start,
end: end
};
}
function restoreSelection(containerEl, savedSel) {
var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {};
range.collapseToPoint(containerEl, 0);
function traverseTextNodes(node) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
range.setStart(node, savedSel.start - charIndex);
foundStart = true;
}
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
range.setEnd(node, savedSel.end - charIndex);
throw stop;
}
charIndex = nextCharIndex;
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
traverseTextNodes(node.childNodes[i]);
}
}
}
try {
traverseTextNodes(containerEl);
} catch (ex) {
if (ex == stop) {
rangy.getSelection().setSingleRange(range);
} else {
throw ex;
}
}
}
function formatText() {
var el = document.getElementById('pad');
var savedSel = saveSelection(el);
el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>");
//Restore the original selection
restoreSelection(el, savedSel);
}
  2. 0

    Je tiens à remercier Tim pour la fonction, il partage ici avec nous, il était très important pour un projet que je suis en train de travailler sur. Je embeded sa fonction un petit plugin jQuery qui peut être consulté ici: https://jsfiddle.net/sh5tboL8/

    $.fn.get_selection_start = function(){
var result = this.get(0).selectionStart;
if (typeof(result) == 'undefined') result = this.get_selection_range().selection_start;
return result;
}
$.fn.get_selection_end = function(){
var result = this.get(0).selectionEnd;
if (typeof(result) == 'undefined') result = this.get_selection_range().selection_end;
return result;
}
$.fn_get_selected_text = function(){
var value = this.get(0).value;
if (typeof(value) == 'undefined'){
var result = this.get_selection_range().selected_text;
}else{
var result = value.substring(this.selectionStart, this.selectionEnd);
}
return result;
}
$.fn.get_selection_range = function(){
var range = window.getSelection().getRangeAt(0);
var cloned_range = range.cloneRange();
cloned_range.selectNodeContents(this.get(0));
cloned_range.setEnd(range.startContainer, range.startOffset);
var selection_start = cloned_range.toString().length;
var selected_text = range.toString();
var selection_end = selection_start + selected_text.length;
var result = {
selection_start: selection_start,
selection_end: selection_end,
selected_text: selected_text
}
return result;
}
$.fn.set_selection = function(selection_start, selection_end){
var target_element = this.get(0);
selection_start = selection_start || 0;
if (typeof(target_element.selectionStart) == 'undefined'){
if (typeof(selection_end) == 'undefined') selection_end = target_element.innerHTML.length;
var character_index = 0;
var range = document.createRange();
range.setStart(target_element, 0);
range.collapse(true);
var node_stack = [target_element];
var node = null;
var start_found = false;
var stop = false;
while (!stop && (node = node_stack.pop())) {
if (node.nodeType == 3){
var next_character_index = character_index + node.length;
if (!start_found && selection_start >= character_index && selection_start <= next_character_index){
range.setStart(node, selection_start - character_index);
start_found = true;
}
if (start_found && selection_end >= character_index && selection_end <= next_character_index){
range.setEnd(node, selection_end - character_index);
stop = true;
}
character_index = next_character_index;
}else{
var child_counter = node.childNodes.length;
while (child_counter --){
node_stack.push(node.childNodes[child_counter]);
}
}
}
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}else{
if (typeof(selection_end) == 'undefined') selection_end = target_element.value.length;
target_element.focus();
target_element.selectionStart = selection_start;
target_element.selectionEnd = selection_end;
}
}

    plugin ne fait que ce que je devais faire, obtenir le texte sélectionné et le réglage personnalisé de la sélection de texte. Il travaille également sur des zones de texte et contentEditable divs.