ivorysmoker: JS - getRangeAt: DIV:Zeilen (Absätze) verbinden möglich?

Beitrag lesen

Hallo zusammen

Ich bin momentan an ein Problem gestossen wo ich leider nicht weiter komme, daher frage ich einmal in die Runde für eine konfortable Lösung.

Erklärung:

Wichtig vorerst, wen beim DIV nur ein Zeile geschrieben wird funktioniert dieser Script tip top.
Macht man jetzt aber im Edierbaren Div ein Enter wird ja der Text auf eine neue Zeile getan, hier liegt das Problem.

Nehmen wir an im Div steht:

<div>
Hallo wie geht es?
Danke mir gehts super!
</div>

Wenn jetzt also [geht] makiert wird, würde die funktion getRangeAt(0) eine 10 Liefern.
Genau so sollte es auch sein!
Makiert man jetzt aber z.b [gehts] auf der 2ten Zeile gibt die funktion wieder 10 aus, da diese wieder von dem Anfang der Zeile anfängt zu zählen. Was natürlich falsch ist.

Nach meiner Vorstellung sollten die Zeilen im Script vereint werden, damit das Resultat bei [gehts] c.a 25 wäre. Bzw ist es möglich wen ein User mit Enter mehrer Zeilen macht diese als eine im Script anzusehen?

Ich bedanke mich schon einmal für eure Hilfe!

Gruss Ivorysmoker

  
//Als Bsp habe ich nicht alle replaces hier im Script aufgelistet, weil dies sonst eine unübersichtliche List wäre.  
  
//OriginalText = Liefert den Editerte Inhalt vom Div  
  
//Replaced alle Tags in wörter.  
var OriginalText = OriginalText.replace(/<br>/g, " replacerOnbr ");  
  
                var makiert = document.getSelection();  
  
 //Selektiert das makierte und liest die Position aus.  
                var range = document.getSelection().getRangeAt(0);  
 //Startet die Suche und gibt die Position in die Variable.  
                var ausgabe = range.startOffset;  
 //Teilt den String in 2 Teile  
                var spliterOriginal = OriginalText.substr(0, ausgabe);  
                var spliter = OriginalText.substr(ausgabe);  
 //Prüfen ob es makiert wurde (Dies sollte natürlich etwas weiter oben sein)  
                if(makiert == ""){  
 //Im Fehlerfall alert Box  
                    alert("Sie müssen zuerst einen Text Makieren");  
                    return;  
                }else{  
 //Ansonst.. schreibe die Tags um das Maskierte Wort.  
                var changer = regexfirst+makiert+regexnext;  
                var str = spliter;  
  
                var OriginalTextEnd = str.replace(makiert, changer);  
 //Replaced alle HTML Tags wieder in die entsprechenden Tags.  
                var spliterOriginal = spliterOriginal.replace(/replacerOnbr/g, "<br>");  
                var OriginalTextEnd = OriginalTextEnd.replace(/replacerOnbr/g, "<br>");  
//Schreibe in das DIV  
                document.getElementById("newest").innerHTML= spliterOriginal+OriginalTextEnd;  

  
<div id="newest" onClick="this.contentEditable='true'" style="float:left; display: block; border: 2px solid #333; white-space: pre-line; word-wrap: break-word; background-color: #F5F5F5;  min-height: 300px; width: 1000px;"><?php readfile("newtext.txt");?></div>