[gelöst] window.getSelection() -> html-code

**AmicaNoctis** · 22.10.2009, 19:00

Hallo,

es gibt dafür 3 Modelle:

- Document Object Model Range
- https://developer.mozilla.org/en/DOM/range
- TextRange Object

Einen browserübergreifenden Ansatz müsstest du dir dann selbst schreiben (lassen).

Gruß,

Amica

**TriphunEM** · 23.10.2009, 09:25

Bevor ich mich damit beschäftige, bekomm ich damit den dahinterliegenden HTML-Code des markiertes Textes wirklich?

Ich mein mit Text markieren, den Text einer HTML Seite, und nicht den von Eingabefeldern!

**onemorenerd** · 23.10.2009, 09:53

Zitat von TriphunEM Beitrag anzeigen

Bevor ich mich damit beschäftige, bekomm ich damit den dahinterliegenden HTML-Code des markiertes Textes wirklich?

Ja.

**TriphunEM** · 23.10.2009, 11:01

Ich google die ganze Zeit, aber so richtig werde ich nicht schlau wie das gehen soll. Könnt ihr mir mit einem kleinen code-schnipsel anstoss geben?

**onemorenerd** · 23.10.2009, 11:05

Google mal nach "Javascript getSelection htmlText Firefox".

**AmicaNoctis** · 23.10.2009, 11:11

Was willst du denn mit dem HTML-Code machen, wenn du ihn ausgelesen hast? Davon hängt es nämlich ab, wie man am besten vorgehen sollte. Eigentlich sollten die genannten Links alle Fragen beantworten (sofern man Englisch versteht).

**TriphunEM** · 23.10.2009, 11:44

Danke. Die haben mich weitergebracht! (ich kann englisch )

Ich will den kopierten Text in eine DB einfügen, der sollte aber dennoch formatiert bleiben. Ich hab mir jetzt eine Funktion gemacht, die das soweit erstmal in den gängisten Browsern unterstützt.

Code:

	<script type="text/javascript">
        function getSelectedText() {
            if (document.selection && document.selection.createRange) {
                return (document.selection.createRange()).htmlText;
            }
            if (window.getSelection) {                
                var strSelection = window.getSelection();
                var strHtml = "";
                for(var a=0; a<strSelection.rangeCount; a++) {
                    var strSpan = document.createElement("span");
                    var intRange = strSelection.getRangeAt(a);
                    var objParent = intRange.commonAncestorContainer;
                    var strPrevHtml = objParent.innerHTML;
                    intRange.surroundContents(strSpan);
                    strHtml += strSpan.innerHTML;
                    objParent.innerHTML = strPrevHtml;
                }
                return strHtml;
            }
            return null;            
        }	
	</script>

Wer den Code vereinfachen will, nur zu ;O)

Ein Problem gibt es aber noch, wenn meine Markierung des Textes mitten im z.B. <strong>-Tag beginnt, wird der der HTML-Code von dem Text halt oder <strong> ausgegeben...Noch eine Idee um das zu ändern?

**TriphunEM** · 23.10.2009, 18:08

Wenn ich mehrere Zeilen im Firefox markiere in dem sich zum Beispiel div's oder span's befinden kommt dieser Fehler:

Code:

Fehler: uncaught exception: [Exception... "The boundary-points of a range does not meet specific requirements."
code: "1" nsresult: "0x805c0001 (NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR)"  location: "http://localhost/test.js Line: 251"]

Ist das ein Bug vom Firefox?

**AmicaNoctis** · 23.10.2009, 18:14

Erzähl doch bitte erstmal, was auf Zeile 251 genau passiert. Am besten markierst du sie in dem bereits geposteten Code, sofern der noch aktuell ist.

**TriphunEM** · 23.10.2009, 18:29

Das ist die Zeile "intRange.surroundContents(strSpan);"!

Hier mal der ganze Code - lässt sich einfach testen:
Markiert einfach den Text

Lorem dolor sit amet, consetetur

und klickt dann auf Ok! In der Fehler-Konsole seht ihr dann das Problem!

Danke!

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="" />
    <title>Test</title>
    <script type="text/javascript">
        function getSelectedText() {
            var strHtml = "";
            if (document.selection && document.selection.createRange) {
                strHtml = (document.selection.createRange()).htmlText;
            } else if (window.getSelection) {
                var strSelection = window.getSelection();
                for(var a=0; a<strSelection.rangeCount; a++) {
                    var strSpan = document.createElement("span");
                    var intRange = strSelection.getRangeAt(a);
                    var objParent = intRange.commonAncestorContainer;
                    var strPrevHtml = objParent.innerHTML;
                    intRange.surroundContents(strSpan);
                    strHtml += strSpan.innerHTML;
                    objParent.innerHTML = strPrevHtml;
                }
                strSelection.removeAllRanges();
            }
            strHtml = strHtml.replace(/\r\n|\n|<br>|<br\/>/g,"<br />");
            return strHtml;
        }
    </script>
</head>

<body>

Lorem dolor sit amet, <strong>consetetur sadipscing</strong>elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br />
At vero eos et accusam et justo duo dolores et ea rebum.<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua.<br />
<b>At vero eos et <u>accusam</u> et justo duo dolores et ea rebum.</b>sd<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
no sea takimata sanctus est Lorem ipsum dolor sit amet.
<hr />
<input type="button" name="" value="Ok" onclick="alert(getSelectedText());" />

</body>
</html>

**AmicaNoctis** · 23.10.2009, 18:41

Ich würde es mal mit cloneContents versuchen.

**TriphunEM** · 23.10.2009, 19:05

wie sollte ich es darauf anwenden? kannst du es vielleicht im code mal zeigen? danke!

**wahsaga** · 23.10.2009, 19:17

Zitat von TriphunEM Beitrag anzeigen

Markiert einfach den Text "Lorem dolor sit amet, consetetur" und klickt dann auf Ok! In der Fehler-Konsole seht ihr dann das Problem!

Nein, sehe ich nicht.
Ich bekomme per alert den HTML-Code zur Auswahl angezeigt. (FF 3.0.4/Vista)

Ggf. mal AddOns deaktivieren, und noch mal testen.

**AmicaNoctis** · 23.10.2009, 19:28

Wenn es mit surroundContents(wrapperNode) nicht funktioniert, holst du dir mit cloneContents() ein DocumentFragment. Dann erzeugst du ein div (nicht span) und fügst das DocumentFragment ein. Das innerHTML von dem div ist dann dein HTML-Code, wobei du aber immer noch nicht erzählt hast, was du mit dem anstellen willst. Denn evtl. gehst du mit dem ganzen innerHTML-Quatsch einen Umweg.

Code:

var docfrag = intRange.cloneContents();
intRange.detach();
var wrapper = document.createElement("div");
wrapper.appendChild(docfrag);
return wrapper.innerHTML;

[gelöst] window.getSelection() -> html-code