window.getSelection();

chiwie · 21.12.2011, 21:43

Guten Abend,

Edit: das Problem ist ein anderes als ich gedacht habe: anchorOffset liefert den offset nach dem letzten vorkommenden html element nur weiß ich noch nicht wie ich dieses auslesen kann. Mir würde es auch schon ausreichen wie ich auf das innHTML des anchorNode zugreifen kann. (Im moment nutze ich das parent Element) bzw. wie ich den inhalt rechts von anchorNode verändern kann.

Oder gibt es eine ganz andere Lösung die Cursor position in einen Text zu ermitteln, und ich bin gerade völlig auf dem Holzweg?

Nachfolgendes hat sich dementsprechend erledigt:

Mein problem ist das der Cursor nicht an der richtigen Position gesetzt wird.
Im Moment verhält sich es so das wenn ich den Cursor zum ersten mal setze er korrekt angezeigt wird. Doch klicke ich auf nachfolgende Text dann hat selection.anchorOffset den Wert (aktuelle Selection - alte Selection).
Verwende ich den auskommentierten code ist das verhalten genau anders rum.

PHP-Code:

  Editor.prototype.locateCursorPosition = function()
{
    var selection = window.getSelection();
    document.getElementById("Debug").innerHTML = selection.focusOffset+"-"+selection.anchorOffset+"<br>";
    //if(this.writeOn.startPosition > 0 && this.writeOn.element == selection.anchorNode.parentNode){
    //    this.writeOn.startPosition = this.writeOn.startPosition > selection.focusOffset ? this.writeOn.startPosition+selection.anchorOffset: selection.anchorOffset;
    //}else
        this.writeOn.startPosition = selection.anchorOffset ;
     this.writeOn.element = selection.anchorNode.parentNode;
     document.getElementById("Debug").innerHTML += this.writeOn.startPosition +"<br>";
     this.setCursor();
     document.getElementById("Debug").innerHTML += this.writeOn.startPosition ;
};

Edit: as problem scheint an set Cursor zu liegen, denn wenn ich das deaktiviere fügt er den text wenigstens an der richtigen stelle ein.

PHP-Code:

  Editor.prototype.setCursor = function()
{
    if(this.cursor)
        this.removeCursor();
    var cursor = '<span id="'+this.ID+'Cursor" style="font-weight:bold;display:inline;">|</span>';
    var before = this.writeOn.element.innerHTML.substr(0,this.writeOn.startPosition);
    var after = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition);
    this.writeOn.element.innerHTML = before + cursor + after;
    this.cursor = document.getElementById(this.ID+"Cursor");
    this.cursor.style.position = "absolute";
    this.cursor.style.left = this.cursor.offsetLeft+"px";
    this.cursor.style.top = this.cursor.offsetTop+"px";
    this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500);
};

und ein weiteres Problem ist mir gerade aufgefallen: ist der offset nach einen html element fängt dieser neu an zu zählen. Also müsste ich irgentwie den textinhalt nach einem html element ermitteln und um welches html element es sich handelt.

ich hoffe es kann mir jemand helfen.

mfg
Christian

chiwie · 26.12.2011, 12:24

Ich habe das jetzt so gelöst:

PHP-Code:

  /**
 * 
 */
function Editor(id)
{
    this.ID = id;
    this.contentStyle = "wysiwyg";
    
    this.writeOn = function(){this.startPosition;this.element;return this;};
    this.writeOn.rootElement = document.getElementById(this.ID+"Input");
    this.writeOn.element = this.writeOn.rootElement;
    this.writeOn.element.onmouseup = this.locateCursorPosition.bind(this);
    this.writeOn.element.onblur = this.leave.bind(this);
    this.GUI();
    return this;
}
Editor.prototype.GUI = function(){
    contentStyleButton = true;
    this.test = function(){
        alert("test");
    };
    this.switchContentStyleButton = function(element)
    {
        if(contentStyleButton){
            element.innerHTML='WYSIWYG';
            this.convertInputContentToCode();
        }else{
            element.innerHTML='Quellcode';
            this.convertInputContentToWysiwyg();
        }
        contentStyleButton = !contentStyleButton;
    };
    return this;
};
Editor.prototype.writeContent = function(val){
    if(val){
        if(this.contentStyle == "code")
            return this.writeOn.element.textContent = val;
        else if(this.contentStyle == "wysiwyg")
            return this.writeOn.element.innerHTML = val;
    }else{
        if(this.contentStyle == "code")
            return this.writeOn.element.textContent;
        else if(this.contentStyle == "wysiwyg")
            return this.writeOn.element.innerHTML;
    }
};
Editor.prototype.write = function(Event){
    var nChar = (Event || /* IE */ window.event || { charCode: 0 }).charCode;
    wcontent = this.writeContent();
    switch(Event.keyCode){
        case 8:
            before = wcontent.substr(0,this.writeOn.startPosition-1);
            after = wcontent.substr(this.writeOn.startPosition);
            this.writeContent(before + after);
            this.cursor = document.getElementById(this.ID+"Cursor");
            this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500);
        break;
        case 37:
            chkSpecialChar = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition-5,5);
            this.writeOn.startPosition -= 1 + countSpecialCharLengthBySpecialChars(chkSpecialChar);
            this.setCursor();
            break;
        case 38:
            break;
        case 39:
            this.removeCursor();
            wcontent = this.writeContent();
            chkSpecialChar = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition,5);
            this.writeOn.startPosition += 1 + countSpecialCharLengthBySpecialChars(chkSpecialChar);
            this.setCursor();
            break;
        case 40:
            break;
        default:
            before = wcontent.substr(0,this.writeOn.startPosition);
            after = wcontent.substr(this.writeOn.startPosition);
            string = "";
            if(String.fromCharCode(nChar) == "<"){
                string = "&lt;";
                this.writeOn.startPosition += 4;
            }else if(String.fromCharCode(nChar) == ">"){
                string = "&gt;";
                this.writeOn.startPosition += 4;
            }else{
                string = String.fromCharCode(nChar);
                ++this.writeOn.startPosition;
            }
            this.writeContent(before + string + after);
            this.cursor = document.getElementById(this.ID+"Cursor");
            this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500);
            break;
    }
    return false;
};
Editor.prototype.convertInputContentToCode = function()
{
    if(this.cursor)
        this.removeCursor();
    this.writeOn.rootElement.textContent = this.writeOn.rootElement.innerHTML;
    this.contentStyle = "code";
};
Editor.prototype.convertInputContentToWysiwyg = function()
{
    if(this.cursor)
        this.removeCursor();
    this.writeOn.rootElement.innerHTML = this.writeOn.rootElement.textContent;
    this.contentStyle = "wysiwyg";
};
Editor.prototype.setCursor = function()
{
    
    if(this.cursor)
        this.removeCursor();
    var cursor = '<div id="'+this.ID+'Cursor" style="font-weight:bold;display:inline;margin-left:-3px;visibility:hidden;" class="EditorCursor">|</div>';
    var before = this.writeOn.element.innerHTML.substr(0,this.writeOn.startPosition);
    var after = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition);
    this.writeOn.element.innerHTML = before + cursor + after;
    this.cursor = document.getElementById(this.ID+"Cursor");
    this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500);
    document.onkeypress = this.write.bind(this);
};
Editor.prototype.removeCursor = function()
{
    if(this.cursor){
        clearInterval(this.cursor.interval);
        this.cursor.parentNode.removeChild(this.cursor);
        this.cursor = null;
    }
};
Editor.prototype.locateCursorPosition = function(Event)
{
    if (Event.button == 0) {
        var selection = window.getSelection();
        if(!selection.anchorNode)
            return 0;
        this.writeOn.startPosition = selection.anchorOffset + getPreviousSiblingsLength(selection.anchorNode) + countSpecialCharLength(selection.anchorNode.textContent.substr(0,selection.anchorOffset));
        
        this.writeOn.element = selection.anchorNode.parentNode;
        this.setCursor();
    }
};
Editor.prototype.leave = function()
{

};
function countSpecialCharLengthBySpecialChars(text){
    lt = text.split("&lt;");
    gt = text.split("&gt;");
    amp = text.split("&amp;");
    return (lt.length-1)*3 +  (gt.length-1)*3 + (amp.length-1)*4;
}
function countSpecialCharLength(text){
    lt = text.split("<");
    gt = text.split(">");
    amp = text.split("&");
    return (lt.length-1)*3 +  (gt.length-1)*3 + (amp.length-1)*4;
}
function getPreviousSiblingsLength(node){
    if(node.previousSibling){
        if(node.previousSibling.getAttribute && node.previousSibling.getAttribute("class") != "EditorCursor" || node.previousSibling.tagName == "BR" || node.previousSibling.tagName == "HR"){
            return getPreviousSiblingsLength(node.previousSibling) + outerHTML(node.previousSibling).length + countSpecialCharLength(node.previousSibling.innerHTML); 
        }else{
            if(node.previousSibling.length)
                return getPreviousSiblingsLength(node.previousSibling) + node.previousSibling.length + countSpecialCharLength(node.previousSibling.textContent);
        }
        return getPreviousSiblingsLength(node.previousSibling);
    }else
        return 0;
}

Wenn jemand eine bessere Lösung hat immer her damit.

chiwie · 27.12.2011, 01:09

PHP-Code:

  document.designMode = 'On';

hätte ruhig mal jmd erwähnen dürfen aber lag bestimmt an meiner fehlenden Zielformulierung.
Doch jetzt wo ich mir das alles selber zusammengeschrieben habe verzichte ich mal drauf...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

21.12.2011, 21:43
chiwie Neuer Benutzer Registriert seit: 14.12.2008 Beiträge: 29 PHP-Kenntnisse: Anfänger	window.getSelection(); Guten Abend, Edit: das Problem ist ein anderes als ich gedacht habe: anchorOffset liefert den offset nach dem letzten vorkommenden html element nur weiß ich noch nicht wie ich dieses auslesen kann. Mir würde es auch schon ausreichen wie ich auf das innHTML des anchorNode zugreifen kann. (Im moment nutze ich das parent Element) bzw. wie ich den inhalt rechts von anchorNode verändern kann. Oder gibt es eine ganz andere Lösung die Cursor position in einen Text zu ermitteln, und ich bin gerade völlig auf dem Holzweg? Nachfolgendes hat sich dementsprechend erledigt: Mein problem ist das der Cursor nicht an der richtigen Position gesetzt wird. Im Moment verhält sich es so das wenn ich den Cursor zum ersten mal setze er korrekt angezeigt wird. Doch klicke ich auf nachfolgende Text dann hat selection.anchorOffset den Wert (aktuelle Selection - alte Selection). Verwende ich den auskommentierten code ist das verhalten genau anders rum. PHP-Code: Editor.prototype.locateCursorPosition = function() { var selection = window.getSelection(); document.getElementById("Debug").innerHTML = selection.focusOffset+"-"+selection.anchorOffset+"<br>"; //if(this.writeOn.startPosition > 0 && this.writeOn.element == selection.anchorNode.parentNode){ // this.writeOn.startPosition = this.writeOn.startPosition > selection.focusOffset ? this.writeOn.startPosition+selection.anchorOffset: selection.anchorOffset; //}else this.writeOn.startPosition = selection.anchorOffset ; this.writeOn.element = selection.anchorNode.parentNode; document.getElementById("Debug").innerHTML += this.writeOn.startPosition +"<br>"; this.setCursor(); document.getElementById("Debug").innerHTML += this.writeOn.startPosition ; }; Edit: as problem scheint an set Cursor zu liegen, denn wenn ich das deaktiviere fügt er den text wenigstens an der richtigen stelle ein. PHP-Code: Editor.prototype.setCursor = function() { if(this.cursor) this.removeCursor(); var cursor = '<span id="'+this.ID+'Cursor" style="font-weight:bold;display:inline;">\|</span>'; var before = this.writeOn.element.innerHTML.substr(0,this.writeOn.startPosition); var after = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition); this.writeOn.element.innerHTML = before + cursor + after; this.cursor = document.getElementById(this.ID+"Cursor"); this.cursor.style.position = "absolute"; this.cursor.style.left = this.cursor.offsetLeft+"px"; this.cursor.style.top = this.cursor.offsetTop+"px"; this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500); }; und ein weiteres Problem ist mir gerade aufgefallen: ist der offset nach einen html element fängt dieser neu an zu zählen. Also müsste ich irgentwie den textinhalt nach einem html element ermitteln und um welches html element es sich handelt. ich hoffe es kann mir jemand helfen. mfg Christian Geändert von chiwie (21.12.2011 um 23:25 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.12.2011, 12:24
chiwie Neuer Benutzer Registriert seit: 14.12.2008 Beiträge: 29 PHP-Kenntnisse: Anfänger	Ich habe das jetzt so gelöst: PHP-Code: /** * / function Editor(id) { this.ID = id; this.contentStyle = "wysiwyg"; this.writeOn = function(){this.startPosition;this.element;return this;}; this.writeOn.rootElement = document.getElementById(this.ID+"Input"); this.writeOn.element = this.writeOn.rootElement; this.writeOn.element.onmouseup = this.locateCursorPosition.bind(this); this.writeOn.element.onblur = this.leave.bind(this); this.GUI(); return this; } Editor.prototype.GUI = function(){ contentStyleButton = true; this.test = function(){ alert("test"); }; this.switchContentStyleButton = function(element) { if(contentStyleButton){ element.innerHTML='WYSIWYG'; this.convertInputContentToCode(); }else{ element.innerHTML='Quellcode'; this.convertInputContentToWysiwyg(); } contentStyleButton = !contentStyleButton; }; return this; }; Editor.prototype.writeContent = function(val){ if(val){ if(this.contentStyle == "code") return this.writeOn.element.textContent = val; else if(this.contentStyle == "wysiwyg") return this.writeOn.element.innerHTML = val; }else{ if(this.contentStyle == "code") return this.writeOn.element.textContent; else if(this.contentStyle == "wysiwyg") return this.writeOn.element.innerHTML; } }; Editor.prototype.write = function(Event){ var nChar = (Event \|\| / IE / window.event \|\| { charCode: 0 }).charCode; wcontent = this.writeContent(); switch(Event.keyCode){ case 8: before = wcontent.substr(0,this.writeOn.startPosition-1); after = wcontent.substr(this.writeOn.startPosition); this.writeContent(before + after); this.cursor = document.getElementById(this.ID+"Cursor"); this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500); break; case 37: chkSpecialChar = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition-5,5); this.writeOn.startPosition -= 1 + countSpecialCharLengthBySpecialChars(chkSpecialChar); this.setCursor(); break; case 38: break; case 39: this.removeCursor(); wcontent = this.writeContent(); chkSpecialChar = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition,5); this.writeOn.startPosition += 1 + countSpecialCharLengthBySpecialChars(chkSpecialChar); this.setCursor(); break; case 40: break; default: before = wcontent.substr(0,this.writeOn.startPosition); after = wcontent.substr(this.writeOn.startPosition); string = ""; if(String.fromCharCode(nChar) == "<"){ string = "<"; this.writeOn.startPosition += 4; }else if(String.fromCharCode(nChar) == ">"){ string = ">"; this.writeOn.startPosition += 4; }else{ string = String.fromCharCode(nChar); ++this.writeOn.startPosition; } this.writeContent(before + string + after); this.cursor = document.getElementById(this.ID+"Cursor"); this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500); break; } return false; }; Editor.prototype.convertInputContentToCode = function() { if(this.cursor) this.removeCursor(); this.writeOn.rootElement.textContent = this.writeOn.rootElement.innerHTML; this.contentStyle = "code"; }; Editor.prototype.convertInputContentToWysiwyg = function() { if(this.cursor) this.removeCursor(); this.writeOn.rootElement.innerHTML = this.writeOn.rootElement.textContent; this.contentStyle = "wysiwyg"; }; Editor.prototype.setCursor = function() { if(this.cursor) this.removeCursor(); var cursor = '<div id="'+this.ID+'Cursor" style="font-weight:bold;display:inline;margin-left:-3px;visibility:hidden;" class="EditorCursor">\|</div>'; var before = this.writeOn.element.innerHTML.substr(0,this.writeOn.startPosition); var after = this.writeOn.element.innerHTML.substr(this.writeOn.startPosition); this.writeOn.element.innerHTML = before + cursor + after; this.cursor = document.getElementById(this.ID+"Cursor"); this.cursor.interval = setInterval(function(){blink(this);}.bind(this.cursor),500); document.onkeypress = this.write.bind(this); }; Editor.prototype.removeCursor = function() { if(this.cursor){ clearInterval(this.cursor.interval); this.cursor.parentNode.removeChild(this.cursor); this.cursor = null; } }; Editor.prototype.locateCursorPosition = function(Event) { if (Event.button == 0) { var selection = window.getSelection(); if(!selection.anchorNode) return 0; this.writeOn.startPosition = selection.anchorOffset + getPreviousSiblingsLength(selection.anchorNode) + countSpecialCharLength(selection.anchorNode.textContent.substr(0,selection.anchorOffset)); this.writeOn.element = selection.anchorNode.parentNode; this.setCursor(); } }; Editor.prototype.leave = function() { }; function countSpecialCharLengthBySpecialChars(text){ lt = text.split("<"); gt = text.split(">"); amp = text.split("&"); return (lt.length-1)3 + (gt.length-1)3 + (amp.length-1)4; } function countSpecialCharLength(text){ lt = text.split("<"); gt = text.split(">"); amp = text.split("&"); return (lt.length-1)3 + (gt.length-1)3 + (amp.length-1)4; } function getPreviousSiblingsLength(node){ if(node.previousSibling){ if(node.previousSibling.getAttribute && node.previousSibling.getAttribute("class") != "EditorCursor" \|\| node.previousSibling.tagName == "BR" \|\| node.previousSibling.tagName == "HR"){ return getPreviousSiblingsLength(node.previousSibling) + outerHTML(node.previousSibling).length + countSpecialCharLength(node.previousSibling.innerHTML); }else{ if(node.previousSibling.length) return getPreviousSiblingsLength(node.previousSibling) + node.previousSibling.length + countSpecialCharLength(node.previousSibling.textContent); } return getPreviousSiblingsLength(node.previousSibling); }else return 0; } Wenn jemand eine bessere Lösung hat immer her damit. Geändert von chiwie (26.12.2011 um 15:38 Uhr).*

27.12.2011, 01:09
chiwie Neuer Benutzer Registriert seit: 14.12.2008 Beiträge: 29 PHP-Kenntnisse: Anfänger	PHP-Code: `document.designMode = 'On';` hätte ruhig mal jmd erwähnen dürfen aber lag bestimmt an meiner fehlenden Zielformulierung. Doch jetzt wo ich mir das alles selber zusammengeschrieben habe verzichte ich mal drauf... __________________ Ein Problem das ein Fehler erzeugt ist bei weitem angenehmer als ein Problem das nicht tut was es soll.