innerHTML | Leerzeichen, Umbrüche

versuch13

versuch13

Erfahrenes Mitglied
Hi, ich versuche mich gerade an einem einfachen Edit In Place Script. Das ersetzen der Absätze durch Textareas funktioniert so weit ganz gut. Allerdings wird mir der Text in den Textareas mit einigen Leerzeichen und Umbrüchen dargestellt welche nicht vorhanden sein sollten, also welche vorher im Absatz auch nicht vorhanden sind. An den Anfang jeder Zeile des Absatzes werden in der Textarea einige Leerzeichen vorran gesetzt.

Ich hole mir den Inhalt aus dem Absatz per innerHTML und setze ihn dann in die Textarea auch wieder per innerHTML ein.

Der IE6 stellt es merkwürdiger Weise genauso da wie ich es gerne hätte, allerdings Firefox und Opera eben nicht, was ja nicht das optimalste ist.

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>EditInPlace</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
div#wrapper {
    margin:60px auto;
    width:600px;
}
-->
</style>
<script type="text/javascript">
<!--

    function $() {
        var elements = new Array();
        for (var i = 0; i < arguments.length; i++) {
            var element = arguments[i];
            if (typeof element == 'string')
                element = document.getElementById(element);
            if (arguments.length == 1)
                return element;
            elements.push(element);
        }
        return elements;
    }
    
    function getElementsByClassName(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
        for (var i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }
    
    function initEditInPlace() {
        var paragraphs = getElementsByClassName('editInPlace');
        for(var i = 0; i < paragraphs.length; i++) {
            var e = paragraphs[i];
            e.onclick = makeEditable;
        }
    }
    
    function makeEditable() {
        this.paragraph = this;
        this.paragraph.height = this.paragraph.scrollHeight;
        this.paragraph.width = this.paragraph.scrollWidth;
        this.text = this.paragraph.innerHTML;
        var wrapper = $('wrapper');
        var myTextarea = document.createElement("textarea");
        myTextarea.innerHTML = this.text;
        myTextarea.style.height = this.paragraph.height + 'px';
        myTextarea.style.width = this.paragraph.width + 'px';
        wrapper.replaceChild(myTextarea, $(this));
    }
    
    window.onload = function() {
        initEditInPlace();
    }
    
//-->
</script>
</head>
<body>
    <div id="wrapper">
        <p class="editInPlace">
            First Paragraph. First Paragraph. First Paragraph. First Paragraph. 
            First Paragraph. First Paragraph. First Paragraph. First Paragraph. 
            First Paragraph. First Paragraph. First Paragraph. First Paragraph. 
            First Paragraph. First Paragraph. First Paragraph. First Paragraph. 
            First Paragraph. First Paragraph. First Paragraph. First Paragraph. 
            First Paragraph. First Paragraph. First Paragraph. First Paragraph. 
        </p>
        <p class="editInPlace">
            Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. 
            Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. 
            Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. 
            Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. 
            Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. 
            Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. 
        </p>
    </div>
</body>
</html>

Die $() ersetzt document.getElementById. Im Prinzip geht es aber nur um "makeEditable()". Wenn allerdings sonst noch etwas besser zu machen wäre, bin ich für Vorschläge natürlich dankbar.

Grüße
 
Zuletzt bearbeitet:
Hi,

vielleicht hilft es ja, wenn Du Zeilenvorschübe (\n) und mehrfache Leerzeichen in makeEditable ersetzt,
bevor sie in die Textareas geschrieben werden.
Code: 
this.text = this.paragraph.innerHTML.replace(/\n/g, "");
this.text = this.text.replace(/  /g, " ");
Ciao
Quaese
 
Hi,

Code: 
    function makeEditable() {
        this.paragraph = this;
        this.paragraph.height = this.paragraph.scrollHeight;
        this.paragraph.width = this.paragraph.scrollWidth;
        this.text = this.paragraph.innerHTML.replace(/\n/g, "");
        this.text = this.text.replace(/  /g, " ");
        this.text = this.text.replace(/^\s+/, "");
        var wrapper = $('wrapper');
        var myTextarea = document.createElement("textarea");
        myTextarea.innerHTML = this.text;
        myTextarea.style.height = this.paragraph.height + 'px';
        myTextarea.style.width = this.paragraph.width + 'px';
        wrapper.replaceChild(myTextarea, $(this));
    }
Obige Funktion liefert bei mir zumindest im FF (Ver. 1.5 und 2) die gleiche Darstellung wie im IE.

Ciao
Quaese
 
Ja, das tut sie. Vielen Dank! Könntest du mir gerade bitte noch die zwei Ausdrücker erläutern?

Code: 
       replace(/  /g, " ");
       replace(/^\s+/, "");
 
versuch13 hat gesagt.:
Allerdings wird mir der Text in den Textareas mit einigen Leerzeichen und Umbrüchen dargestellt welche nicht vorhanden sein sollten, also welche vorher im Absatz auch nicht vorhanden sind. An den Anfang jeder Zeile des Absatzes werden in der Textarea einige Leerzeichen vorran gesetzt.
Zum Vergrößern anklicken....
Das Problem ist, dass das textarea-Element anders als das p-Element den Inhalt als präformatiert darstellt. Denn bei einem nicht-präformatierten Element werden Lerraumzeichen (Leer-, Tabulator- und Zeilenumbruchzeichen) ignoriert, während sie bei präformatierten Elementen dargestellt werden.
 
Gumbo hat gesagt.:
Das Problem ist, dass das textarea-Element anders als das p-Element den Inhalt als präformatiert darstellt. Denn bei einem nicht-präformatierten Element werden Lerraumzeichen (Leer-, Tabulator- und Zeilenumbruchzeichen) ignoriert, während sie bei präformatierten Elementen dargestellt werden.
Zum Vergrößern anklicken....

Ja, mir ist auch aufgefallen dass wenn ich innerhalb des P-Elementes alles in eine Zeile schreibe das Problem nicht mehr auftaucht. Wußte nur nicht woran es liegt, daher danke für die Erklärung.

Du kennst dich ja auch mit Regulären Ausdrücker gut aus, kannst du mir die beiden von mir im vorherigen Post zitierten vielleicht erklären?

Danke.
 
Hi,
Code: 
replace(/  /g, " ") // ersetzt im gesamten String doppelte Leerzeichen durch einfache,
replace(/^\s+/, "") //ersetzt alle Whitespace-Zeichen (\f, \n, \t, \v und Leerzeichen) am Anfang des Strings

Ciao
Quaese
 
Ok, bestens, vielen Dank.


Edit: Mh, so richtig funktioniert es jetzt doch nicht. Die Leerzeichen der ersten Zeile
werden entfernt, die der folgenden allerdings nicht.

Auf http://www.quirksmode.org/dom/cms.html funktioniert es aber vom Prinzip her
genauso und funktioniert. Sonst noch vielleicht irgendeine Idee?

Außerdem funktioniert das ganze überhaupt nicht mehr, wenn man einmal alle
Absätze angeklickt hatte und bestätigt hat. Dann werden die Paragraphen nicht
mehr in Textareas umgewandelt, ich bekomme allerdings auch keine Fehlermeldung.
 
Zuletzt bearbeitet:
Wieso entfernst du nicht einfach die Leerraumzeichen schon im HTML-Quellcode? Also:
HTML: 
<div id="wrapper">
    <p class="editInPlace">First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph. First Paragraph.</p>
    <p class="editInPlace">Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph. Second Paragraph.</p>
</div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück