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

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

    Hallo,

    mit
    Code:
    window.getSelection().toString();
    kann ich ja den markierten Text im FF ermitteln. Gibt es eine Möglichkeit auch den aktuell dahinterliegenden HTML-Code mit auszulesen?

    Wichtig ist für mich, dass ich die Zeilenumbrüche in dem markierten Text erkennen kann! Denn wenn ich den markierten Text kopiere, hat er überhaupt keine Formatierungen und am schlimmsten keine Zeilenumbrüche!

    Gibt es eine Möglichkeit, ABER für alle Browser, den HTML-Code des markierten Textes auszulesen???

    Danke

  • #2
    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
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      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!

      Kommentar


      • #4
        Zitat von TriphunEM Beitrag anzeigen
        Bevor ich mich damit beschäftige, bekomm ich damit den dahinterliegenden HTML-Code des markiertes Textes wirklich?
        Ja.

        Kommentar


        • #5
          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?

          Kommentar


          • #6
            Google mal nach "Javascript getSelection htmlText Firefox".

            Kommentar


            • #7
              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).
              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
              Super, danke!
              [/COLOR]

              Kommentar


              • #8
                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?

                Kommentar


                • #9
                  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?

                  Kommentar


                  • #10
                    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.
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      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=0a<strSelection.rangeCounta++) {
                                          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>elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptua.<br />
                      At vero eos et accusam et justo duo dolores et ea rebum.<br />
                      Stet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
                      Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
                      sed diam voluptua.<br />
                      <
                      b>At vero eos et <u>accusam</uet justo duo dolores et ea rebum.</b>sd<br />
                      Stet clita kasd gubergrenno sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
                      Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
                      sed diam voluptuaAt vero eos et accusam et justo duo dolores et ea rebumStet 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

                      Kommentar


                      • #12
                        Ich würde es mal mit cloneContents versuchen.
                        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                        Super, danke!
                        [/COLOR]

                        Kommentar


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

                          Kommentar


                          • #14
                            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.
                            I don't believe in rebirth. Actually, I never did in my whole lives.

                            Kommentar


                            • #15
                              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;
                              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                              Super, danke!
                              [/COLOR]

                              Kommentar

                              Lädt...
                              X