[HTML / Javascript]  's kopieren naar textarea

[Reveller]

Op mijn website heeft de gebruiker de keuze tussen twee editors: een hardcode textarea en een WYSIWYG editor. Niet alleen de html, maar ook de opmaak (indent, etc) wordt opgeslagen, zodat de ingetikte html er bij oproep net zo uitzag als hij origineel was ingetikt (net zoals bij de GoT editor waarin ik dit bericht tik). Omdat de javascript code van de textarea editor (er zitten wat knoppen bij zoals bij GoT) in een aparte .js staat, moet ik de inhoud via een variabele oproepen:

Java:

// Staat in texteditor.js
<script>
function writeEditor(content) {
  var string = '<textarea cols="60" rows="10">' + content + '</textarea>';
  document.write(string);
}
</script>

// Staat op de pagina zelf
<script>
var html = "Lees meer over <a href=\"bedijf\/uitleg\">ons bedrijf<\/a> &nbsp;";
writeEditor(html)
</script>

De textarea die deze code voortbrengt, ziet er in de browser als volgt uit:

code:

+----------------------------------------------------------+
| Lees meer over <a href="bedijf/uitleg">ons bedrijf</a>   |
|                                                          |
|                                                          |
|                                                          |
|                                                          |
|                                                          |
+----------------------------------------------------------+

Met andere woordt - de  's worden vervangen door spaties. En dat wil ik niet. Hoe kan ik ervoor zorgen dat de textarea de nbsp;'s gewoon overneemt. zoals hieronder?

code:

+----------------------------------------------------------+
| Lees meer over <a href="bedijf/uitleg">ons bedrijf</a>   |
| &nbsp;                                                   |
|                                                          |
|                                                          |
|                                                          |
|                                                          |
+----------------------------------------------------------+

[chem]

een bsp is een no-breaking space die onder MacOS met alt-spatie en onder windows met alt+255 ingetiept kan worden. Hij ziet eruit als een vrijwel identieke spatie (soms ietsje breder).

Op het moment dat je submit krijg je dus weer die nbsp binnen als karakter.

[Peter]

door ipv.   ,   te gebruiken!

[Verwijderd]

.Peter schreef op zondag 12 maart 2006 @ 16:28:
door ipv.   ,   te gebruiken!

Tsja, sowieso hoor je alles wat tussen <textarea> en </textarea> staat op die manier te escapen. In PHP bijvoorbeeld met de functie htmlentities.

[Reveller]

Verwijderd schreef op zondag 12 maart 2006 @ 16:30:
[...]
Tsja, sowieso hoor je alles wat tussen <textarea> en </textarea> staat op die manier te escapen. In PHP bijvoorbeeld met de functie htmlentities.

Dat weet ik. Maar zoals gezegd wil ik de gebruiker van mijn website laten kiezen tussen een WYSIWYG en een textarea editor. De WYSIWYG editor (3rd party) vraagt om een html string als input (want: iframe), zoals in de TS. Ik wilde proberen de textarea op diezelfde string te laten werken, maar blijkbaar lukt dit niet

[crisp]

JavaScript:

function htmlspecialchars(string)
{
    string = string.replace(/&/g, '&');
    string = string.replace(/</g, '<');
    string = string.replace(/>/g, '>');
    string = string.replace(/"/g, '"');
    
    return string;
}

[ Voor 4% gewijzigd door crisp op 12-03-2006 17:02 ]

[NMe]

Programming >> Webdesign, Markup & Clientside Scripting

[Reveller]

@crisp, dank je! Op deze manier kan ik idd htmlspecialchars gewoon client-side oplossen. Ik heb echter nog 1 probleem: als er in de string een ascii-code staat, wordt het "&" deel met jouw functieook omgezet:

code:

{ wordt {

Is het mogelijk om een array met ascii-codes te definieren, bij welke het omzetten van & in &amp genegeerd wordt?

[JHS]

Je kan dan denk ik beter met een regex kunnen controleren of het niet een &, gevolgd door een #, [cijfers|letters] en een ; is .

[crisp]

JavaScript:

string = string.replace(/&(?!(#\d{2,6}|#x[0-9a-f]{2,6}|[a-z]{2,8});)/gi, '&');

note overigens dat oudere versies IE geen lookahead-assertions ondersteunen...

Maar persoonlijk denk ik dat je hiermee je doel voorbij schiet; ik dacht dat het juist de bedoeling was dat &nbsp; ook als &nbsp; in je textarea zichtbaar moest zijn? Lijkt me dat dat dan ook voor &#123; zou moeten gelden?

[Reveller]

crisp schreef op zondag 12 maart 2006 @ 21:49:
Maar persoonlijk denk ik dat je hiermee je doel voorbij schiet; ik dacht dat het juist de bedoeling was dat &nbsp; ook als &nbsp; in je textarea zichtbaar moest zijn? Lijkt me dat dat dan ook voor &#123; zou moeten gelden?

Ik had daar ook duidelijker in kunnen zijn. Binnen mijn website worden {tokens} tussen accolades vervangen door een bepaald tekst gerenderde html (zoals een {menu} of een {last_modified} datum). Als het artikel in een tekstarea opgeroepen wordt, moeten deze niet gerendered worden. Daarom zet ik de server-side om naar &#123; en &#125;. Aan de client-side moeten ze in de tekstarea wel als {accolades} worden weergegeven. Ik heb het nu als volgt opgelost:

JavaScript:

function htmlspecialchars(string) {
    string = string.replace(/{/, '{');
    string = string.replace(/}/, '}');
    string = string.replace(/&/g, '&');
    string = string.replace(/</g, '&lt;');
    string = string.replace(/>/g, '&gt;');
    string = string.replace(/"/g, '&quot;');

    return string;
}

Nu werkt het zoals ik wil Nogmaals dank!