# innerHTML | Leerzeichen, Umbrüche



## versuch13 (5. März 2007)

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.


```
<!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


----------



## Quaese (5. März 2007)

Hi,

vielleicht hilft es ja, wenn Du Zeilenvorschübe (\n) und mehrfache Leerzeichen in *makeEditable* ersetzt,
bevor sie in die Textareas geschrieben werden.

```
this.text = this.paragraph.innerHTML.replace(/\n/g, "");
this.text = this.text.replace(/  /g, " ");
```
Ciao
Quaese


----------



## versuch13 (5. März 2007)

Das hatte ich auch schon versucht, funktioniert leider nicht.Danke trotzdem. Sonst eine Idee?


----------



## Quaese (6. März 2007)

Hi,


```
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


----------



## versuch13 (6. März 2007)

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


```
replace(/  /g, " ");
       replace(/^\s+/, "");
```


----------



## Gumbo (6. März 2007)

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.


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.


----------



## versuch13 (6. März 2007)

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.


 
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.


----------



## Quaese (6. März 2007)

Hi,

```
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


----------



## versuch13 (6. März 2007)

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.


----------



## Gumbo (6. März 2007)

Wieso entfernst du nicht einfach die Leerraumzeichen schon im HTML-Quellcode? Also:
	
	
	



```
<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>
```


----------



## versuch13 (6. März 2007)

Ist natürlich möglich und wenn es nicht anders geht werde ich es wohl auch so machen müssen. Nur wenn es auch anders geht, fände ich es praktischer. 

Zu dem Problem aus meinem vorigen Post vielleicht noch eine Lösung parat?


----------

