Extrahieren von Text aus einem contentEditable div

Habe ich einen div gesetzt, um contentEditable und gestaltet mit "white-space:pre", also es hält Dinge wie Zeilenumbrüche. In Safari, FF und IE wird das div ziemlich viel sieht aus und funktioniert genauso. Alles ist gut. Was ich will zu tun ist, extrahieren Sie den text aus dem div, aber in einer Weise, die nicht verlieren die Formatierung -- insbesondere die Zeilenumbrüche.

Wir sind mit jQuery, deren text() Funktion grundsätzlich funktioniert ein pre-order DFS und klebt zusammen, alle Inhalte in diesem Zweig der DOM in einem einzigen Klumpen. Damit verliert die Formatierung.

Hatte ich einen Blick auf die html() Funktion, aber es scheint, dass alle drei Browsern verschiedene Dinge tun mit dem eigentlichen HTML-Code, der generiert wird hinter den kulissen in meinem contentEditable div. Vorausgesetzt, tippe ich das in mein div:

1
2
3

Dies sind die Ergebnisse:

Safari 4:

1
<div>2</div>
<div>3</div>

Firefox 3.6:

1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">

IE 8:

<P>1</P><P>2</P><P>3</P>

Pfui. Nichts sehr stimmig hier. Das überraschende ist, dass MSIE sieht die sane! (Groß P-tag und alle)

Div wird dynamisch festgelegt styling (schriftart, - Farbe, - Größe und-Ausrichtung) erfolgt über CSS, also ich bin mir nicht sicher, ob ich kann mit einer pre tag (das war angespielt auf einige Seiten, die ich gefunden mit Google).

Kennt jemand eine JavaScript-code und/oder jQuery-plugin, oder etwas, das extrahieren von text aus eine contentEditable div-so zu bewahren Zeilenumbrüche? Ich würde es vorziehen, nicht neu zu erfinden, ein parsing-Rad, wenn ich nicht muss.

Update: ich habe abgekupfert, die getText - Funktion von jQuery 1.4.2 und modifiziert Sie, um es zu entpacken mit Leerzeichen meist intakt (ich nur chnaged eine Zeile, wo ich noch eine newline);

function extractTextWithWhitespace( elems ) {
    var ret = "", elem;

    for ( var i = 0; elems[i]; i++ ) {
        elem = elems[i];

        //Get the text from text nodes and CDATA nodes
        if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
            ret += elem.nodeValue + "\n";

        //Traverse everything else, except comment nodes
        } else if ( elem.nodeType !== 8 ) {
            ret += extractTextWithWhitespace2( elem.childNodes );
        }
    }

    return ret;
}

Ich diese Funktion aufrufen und die Ausgabe verwenden, weisen Sie es zu einem XML-Knoten mit jQuery, so etwas wie:

var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);

Der resultierende XML-Code wird schließlich an einen server via AJAX-call.

Dies funktioniert auch in Safari und Firefox.

IE, nur die ersten '\n' wird wohl beibehalten, irgendwie. In Sie suchen mehr, wie es aussieht jQuery ist die Einstellung der text-wie so (line-4004 von jQuery-1.4.2.js):

return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

Lesen auf createTextNode scheint es, dass der IE-Implementierung kann ein mash up der Leerraum. Ist dies richtig oder mache ich etwas falsch?

InformationsquelleAutor der Frage Shaggy Frog | 2010-08-11

Leider tun Sie noch, um diese zu bewältigen, für die pre Fall einzeln pro browser (ich weiß nicht dulden browser Erkennung in vielen Fällen die Nutzung Funktion - Erkennung...aber in diesem Fall ist es notwendig), aber zum Glück können Sie kümmern sich um Sie, alle ziemlich kurz und prägnant, wie diese:

var ce = $("<pre />").html($("#edit").html());
if($.browser.webkit) 
  ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });    
if($.browser.msie) 
  ce.find("p").replaceWith(function() { return this.innerHTML  +  "<br>"; });
if($.browser.mozilla || $.browser.opera ||$.browser.msie )
  ce.find("br").replaceWith("\n");

var textWithWhiteSpaceIntact = ce.text();

Sie können testen Sie es hier. DH insbesondere ist ein Aufwand, denn der Weg ist nicht   und neue Zeilen in text-Konvertierung, deshalb bekommt es die <br> Behandlung oben in Einklang zu bringen, so muss es in 2 Durchgängen um korrekt behandelt zu werden.

In der oben #edit ist die ID des contentEditable Komponente, so ändern Sie einfach das aus, oder stellen Sie diese Funktion, zum Beispiel:

function getContentEditableText(id) {
    var ce = $("<pre />").html($("#" + id).html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
}

Sie können testen, ob hier. Oder, da dieser basiert auf jQuery-Methoden sowieso, machen Sie es ein plugin wie dieses:

$.fn.getPreText = function () {
    var ce = $("<pre />").html(this.html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
};

Dann kann man nur rufen Sie es mit $("#edit").getPreText()Sie können testen, die version hier.

InformationsquelleAutor der Antwort Nick Craver

Vergaß ich diese Frage bis jetzt, wenn Nico schlug ein Kopfgeld auf ihn.

Habe ich das problem gelöst, indem Sie die Funktion brauchte ich mich, abschreiben eine Funktion aus der vorhandenen jQuery-Codebasis und zu modifizieren, um zu arbeiten, wie ich brauchte.

Getestet hab ich diese Funktion mit Safari (WebKit), IE, Firefox und Opera. Ich wollte nicht stören Prüfung von jeder anderen Browsern ist, da die ganze contentEditable, was nicht dem standard entspricht. Es ist auch möglich, dass ein update für alle browser könnte brechen Sie diese Funktion, wenn Sie ändern, wie Sie umzusetzen contentEditable. Also Programmierer aufgepasst.

function extractTextWithWhitespace(elems)
{
    var lineBreakNodeName = "BR"; //Use <br> as a default
    if ($.browser.webkit)
    {
        lineBreakNodeName = "DIV";
    }
    else if ($.browser.msie)
    {
        lineBreakNodeName = "P";
    }
    else if ($.browser.mozilla)
    {
        lineBreakNodeName = "BR";
    }
    else if ($.browser.opera)
    {
        lineBreakNodeName = "P";
    }
    var extractedText = extractTextWithWhitespaceWorker(elems, lineBreakNodeName);

    return extractedText;
}

//Cribbed from jQuery 1.4.2 (getText) and modified to retain whitespace
function extractTextWithWhitespaceWorker(elems, lineBreakNodeName)
{
    var ret = "";
    var elem;

    for (var i = 0; elems[i]; i++)
    {
        elem = elems[i];

        if (elem.nodeType === 3     //text node
            || elem.nodeType === 4) //CDATA node
        {
            ret += elem.nodeValue;
        }

        if (elem.nodeName === lineBreakNodeName)
        {
            ret += "\n";
        }

        if (elem.nodeType !== 8) //comment node
        {
            ret += extractTextWithWhitespace(elem.childNodes, lineBreakNodeName);
        }
    }

    return ret;
}

InformationsquelleAutor der Antwort Shaggy Frog

1

sehen diese fiddle

Oder dieser Beitrag

Wie zu analysieren editierbaren DIV-text mit der browser-Kompatibilität

erstellt, nachdem mit viel Aufwand...........

InformationsquelleAutor der Antwort user10

Entdeckte ich heute im Firefox:

Gebe ich eine contenteditable div, die weißen Raum auf "pre", um diese Funktion, und es funktioniert scharf.

Ich fügte hinzu, eine Linie zu zeigen, wie viele Knoten es gibt, und eine Taste, setzt den Ausgang in einen anderen PRE, nur um zu beweisen, dass die Zeilenumbrüche sind intakt.

Es sagt im Grunde dies:

For each child node of the DIV,
   if it contains the 'data' property,
      add the data value to the output
   otherwise
      add an LF (or a CRLF for Windows)
}
and return the result.

Es ist ein Problem, tho. Wenn Sie drücken Sie die EINGABETASTE am Ende jeder Zeile der ursprünglichen text, anstatt ein LF in, es setzt ein "Â". Drücken Sie die EINGABETASTE erneut, und es stellt eine LF gibt, aber nicht das erste mal. Und löschen Sie die "Â" (es sieht aus wie ein Leerzeichen). Gehen Sie Abbildung - ich denke, das ist ein bug.

Dieser tritt nicht im IE8. (ändern textContent zu innerText) gibt Es einen anderen Fehler gibt, tho. Wenn Sie die EINGABETASTE drücken, wird der Knoten 2 Knoten, wie es funktioniert in Firefox, aber die "data" Eigenschaft, die jeder von diesen Knoten wird dann "undefined".

Ich bin sicher, es gibt viel mehr hier Los ist als das Auge, so dass alle Eingaben auf die Sache wird sehr aufschlussreich sein.

<!DOCTYPE html>
<html>
<HEAD>
<SCRIPT type="text/javascript">
    function htmlToText(elem) {
        var outText="";
        for(var x=0; x<elem.childNodes.length; x++){
            if(elem.childNodes[x].data){
                outText+=elem.childNodes[x].data;
            }else{
                outText+="\n";
            }
        }
        alert(elem.childNodes.length + " Nodes: \r\n\r\n" + outText);
        return(outText);
    }
</SCRIPT>
</HEAD>
<body>

<div style="white-space:pre;" contenteditable=true id=test>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</DIV>
<INPUT type=button value="submit" onclick="document.getElementById('test2').textContent=htmlToText(document.getElementById('test'))">
<PRE id=test2>
</PRE>
</body>
</html>

InformationsquelleAutor der Antwort alfadog67

0

hier ist eine Lösung (mit Unterstrich und jquery), die zu funktionieren scheint in iOS Safari (iOS 7 und 8), Safari 8, Chrom 43, und Firefox 36 in OS X und IE6-11 auf Windows:
```
_.reduce($editable.contents(), function(text, node) {
    return text + (node.nodeValue || '\n' +
        (_.isString(node.textContent) ? node.textContent : node.innerHTML));
}, '')
```
siehe test Seite hier: http://brokendisk.com/code/contenteditable.html

obwohl ich denke, die wirkliche Antwort ist, dass, wenn Sie nicht daran interessiert, das markup des Browsers sollten Sie nicht verwenden die contenteditable Attribut - ein textarea wäre das richtige Werkzeug für den job.

InformationsquelleAutor der Antwort Jon z

-1

this.editableVal = function(cont, opts) 
{
  if (!cont) return '';
  var el = cont.firstChild;
  var v = '';
  var contTag = new RegExp('^(DIV|P|LI|OL|TR|TD|BLOCKQUOTE)$');
  while (el) {
    switch (el.nodeType) {
      case 3:
        var str = el.data.replace(/^\n|\n$/g, ' ').replace(/[\n\xa0]/g, ' ').replace(/[ ]+/g, ' ');
        v += str;
        break;
      case 1:
        var str = this.editableVal(el);
        if (el.tagName && el.tagName.match(contTag) && str) {
          if (str.substr(-1) != '\n') {
            str += '\n';
          }

          var prev = el.previousSibling;
          while (prev && prev.nodeType == 3 && PHP.trim(prev.nodeValue) == '') {
            prev = prev.previousSibling;
          }
          if (prev && !(prev.tagName && (prev.tagName.match(contTag) || prev.tagName == 'BR'))) {
            str = '\n' + str;
          }

        }else if (el.tagName == 'BR') {
          str += '\n';
        }
        v += str;
        break;
    }
    el = el.nextSibling;
  }
  return v;
}

InformationsquelleAutor der Antwort Artur Vanesyan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.