[JS] replace \n naar <br> maar 1 keer

[BierPul]

Ik ben met een CMS bezig en ben een alternatief aan het verzinnen voor mensen die niet Windows IE 5+ browsen .

Ik heb nu een textarea die bijna synced met een onderliggende <p> of <layer> (in geval van netscape oa).

Nu heb ik het probleem dat ik newlines en enters af wil vangen en wil weergeven als HTML ik dacht het makkelijk opgelost te hebben met een replace maar dat valt tegen Slechts 1 keer geeft ie een newline daarna niet meer

HTML:

<script>
    function previewHTML() {
        html = document.forms['test'].elements['editme'].value;
        html = html.replace('\n', '<br>');
        //alert(html);
        
        if(document.getElementById){
            document.getElementById('preview').innerHTML = html;
        } else if(document.layers){
            var layer = document.layers['preview'].document.layers[0];
            layer.document.open();
            layer.document.write(html);
            layer.document.close();
            layer.parentLayer.clip.width = layer.clip.width;
        }
    
    }
</script>

<form name="test">

<table>
<tr>
    <td>
        <textarea name="editme" rows="10" cols="50" onKeyPress="previewHTML();"></textarea>
    </td>
</tr>
<tr>
    <td>
        <script>
            if(document.getElementById){
                document.write('<p id="preview"></p>');
            } else if(document.layers){
                document.write('<ilayer id="preview" style="width:300px; height:80px; border:1px solid #000000;"></ilayer>');
            }
        </script>
    </td>
</tr>
</table>

</form>

ps: onKeypress geeft pas bij de volgende toetsaanslag weer wat de inhoud is van het textfield kan ik dat niet realtime oplossen (onchange deet niks ):?

[ Voor 28% gewijzigd door BierPul op 03-09-2003 22:08 . Reden: typo ]

[crisp]

replace accepteerd als 1e argument een reguliere expressie. In het geval van een string zal hij die met de default opties door de regexp constructor halen.
Wat je echter nodig hebt is de optie om de regexp global uit te voeren; dat doe je zo:

JavaScript:

html = html.replace(/\n/g, '<br />');

slordig trouwens dat je de variabele html niet initialiseert; nu maak je 'm global.
verder zou ik rekening houden met het feit dat een newline anders wordt weergegeven op verschillende platformen; deze code zou dat af moeten vangen:

JavaScript:

html = html.replace(/\r\n|\r|\n/g, '<br />');

edit: je 2e vraag; je hebt ook onkeydown en onkeyup, maar ik denk niet dat je daarmee verder komt.
Persoonlijk zou ik gewoon onkeypress de keyCode uitvragen, en als dat een enter is het event cancellen en op de cursorpositie <br /> invoegen; laatst nog een soortgelijk voorbeeld gemaakt voor entities (> < en "): voorbeeld

[ Voor 30% gewijzigd door crisp op 03-09-2003 22:17 ]

[BierPul]

JavaScript:

var html;

Toegevoegd was inderdaad niet helemaal netjes

Overbodige info

[ Voor 36% gewijzigd door BierPul op 03-09-2003 22:19 ]

[crisp]

Zie mijn edit en voorbeeld (waar ik nu ook de enter in afvang). Deze code is wel IE-only, maar is geschikt te maken voor Mozilla (NS4 vast ook wel).
onchange wordt in formelementen pas getriggerd als de focus verplaatst

wat ik niet snap is dat je wel NS4 ondersteuning inbouwd, maar geen rekening houd met IE4

[ Voor 45% gewijzigd door crisp op 03-09-2003 22:36 ]

[BierPul]

UUhhmmmm daar heb je gelijk in maar deze klant (is maatwerk) gebruikt IE op de mac en das mijn bottleneck in dit geval als ie al PC gebruikt kiest ie voor netscape (rare snuiter)

Vandaar ik wil er niet teveel in tijd in stoppen aangezien die ook niet teveel betaald

[crisp]

als hij NS6+ gebruikt dan hoef je die layer-stuff er niet in te bakken hoor.
Verder heb ik even gekeken en onkeyup in plaats van onkeypress werkt prima in jouw opzet

[Verwijderd]

edit:
offtopic: hey john, alles goed? long time no see ... zie dat je nog steeds actief bent : ) success met je cms

[Bosmonster]

Daar heb je email of instantmessaging voor Rahman.. daar hoef je een topic niet mee te vervuilen..

Persoonlijk zou ik gewoon onkeypress de keyCode uitvragen, en als dat een enter is het event cancellen en op de cursorpositie
invoegen; laatst nog een soortgelijk voorbeeld gemaakt voor entities (> < en "): voorbeeld

Persoonlijk zou ik dat nooit doen... want wat heeft een gebruiker aan dat er allemaal gekke tekens in zijn tekst komen? Die kent geen html en br's zegt hem helemaal niks.. Je wilt een vervaning voor een wysiwyg editor, doe dan voor submit gewoon een replace zoals die van plan was

[crisp]

Bosmonster schreef op 04 september 2003 @ 09:16:
Daar heb je email of instantmessaging voor Rahman.. daar hoef je een topic niet mee te vervuilen..


[...]


Persoonlijk zou ik dat nooit doen... want wat heeft een gebruiker aan dat er allemaal gekke tekens in zijn tekst komen? Die kent geen html en br's zegt hem helemaal niks.. Je wilt een vervaning voor een wysiwyg editor, doe dan voor submit gewoon een replace zoals die van plan was

Ik geloof dat TS het graag realtime heeft; mijn voorbeeld was welliswaar niet helemaal toepasbaar hier, maar biedt denk ik wel mogelijkheden in andere situaties

[BierPul]

Persoonlijk zou ik dat nooit doen... want wat heeft een gebruiker aan dat er allemaal gekke tekens in zijn tekst komen? Die kent geen html en br's zegt hem helemaal niks.. Je wilt een vervaning voor een wysiwyg editor, doe dan voor submit gewoon een replace zoals die van plan was

Dat is in zekere zin wel waar idd , maar in dit geval maakt het niet uit

Die persoon wil heel simpel tekst kunnen aanpassen en text bold maken enzo

Nu is het rottig dat ie op een MAC werkt , ik had een applet genomen maar daar kan ie niet naar pasten

Dus nu dacht ik maak een textbox waar ie gewoon HTML in kan typen (met een paar knopjes die voor en achter de geselecteerde text <b>text</b> zet en een preview krijgt in de onderliggende laag

Dus opzich moet dit zo ok zijn (wel moet ik nog ff kijken hoe ik die <b> en </b> erin krijg maar dat zie ik zo wel

[crisp]

voor een (crossbrowser) manier om dingen met buttons in je textarea op de cursorpositie in te voegen zie hier