Textarea in HTML editor

[quintengel]

Beste lezers,

Ik heb een probleempje met een html editor. Door middel van een textarea en een beetje javascript kan je de editor in een pagina plaatsen. Zodra er alleen een formulier met een textarea in de editor staat gaat het mis De editor ziet namelijk de sluittag van de textarea als sluittag van de editor. Alles wat na deze tag komt wordt dus buiten de editor geplaatst.

<textarea name="editor1">[/COLOR][/COLOR]
<form action="" method="post" onsubmit="return checkform(this)">
<table border="0" width="500">
<tbody>
<tr>
<td>
Bericht*:</td>
<td>
<textarea cols="50" name="BeRicht" rows="3" style=""></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input name="versturen" type="button" value="Versturen" /></td>
</tr>
</tbody>
</table>
</form>
</textarea>

In bovenstaand voorbeeld gaat het mis bij de rode textarea. Dit is de sluittag van de textarea "BeRicht", maar het wordt gezien als de sluittag van de editor, waardoor de verzendbutton buiten de editor staat.

Weet iemand hoe dit is op te lossen? Ik kom er niet uit!

Alvast bedankt allemaal!

 

[kenikavanbis]

je merkt vast dat er op dit forum <> wordt omgezet in [] die wordt bijna als standaard gebruikt mijn editor is een div met wat css

 

[That Guy]

Nou,


in principe is het onmogelijk om een <textarea> tag IN een andere <textarea> tag te zetten; immers, je kan ook geen <img> in een <img> zetten (okay, raar voorbeeld, maargoed).

Mischien kan je beter een andere editor gebruiken, of even op de site van je editor een vraag stellen.

 

[csshunter]

Ja, een <textarea> (aanklikbaar/invulbaar gebied) binnen een andere <textarea> ligt wat moeilijk.
Is het wel nodig om de buitenste <textarea> er omheen te hebben? Kan dat niet met een gewone <div>?

 

[quintengel]

Bedankt voor de reacties. Ik gebruik CKeditor 3.X. Deze editor wordt aangeroepen middels een textarea. Zonder de (buitenste) textarea kan ik de editor niet aanroepen,en een div werkt dus helaas niet. Toch bedankt voor jullie reacties!

Iemand nog andere suggesties?

 

[csshunter]

Hoi quintengel,
Aha, dus daar zit de knoop.
Maar kan je niet eerst de pagina binnenhalen met die <textarea> van de editor er in, en die dan later met behulp van javascript vervangen door een <div>je, waarna het er in zetten van de "echte" textarea geen probleem meer is?

• Testpagina: textarea-textarea.htm (zie broncode voor de input en het script)
• Nadeel: zonder javascript (o.a. textbrowsers) werkt het niet.

Nu weet ik niet of er door de editor nog meer code in diens <textarea> wordt gestopt dan het <form> van jouw code, en of voor die editor-code het bestaan van de buitenste <textarea> nodig is voor de bediening. - Als dat het geval is, zal de bovenstaande vlieger niet opgaan.

• Alternatief misschien: het <form> als <object> (of als <iframe) inbedden, dan kan de buitenste textarea er ook niet meer bij.
• Ander alternatief misschien: de tweede textarea buiten dat van de editor plaatsen. - Ik heb even de demo van de CKEditor bekeken, en het is geen enkel probleem om binnen de editor een <form> aan te maken, en ook niet om er een <textarea> in te maken.
• Daarmee wordt mijn vraag: wat is de diepere bedoeling achter jouw operatie? Een pre-fab formulier als een soort template binnen de editor of zoiets?

Met vriendelijke groet,
CSShunter

[edit]En heb je een complete "probleem-pagina" online? > Dan graag een linkje![/edit]

 

[quintengel]

Beste csshunter,

Bedankt voor je uitgebreide reactie, vindt ik echt super! Ik gebruik de editor voor een simpel cms systeempje, zodat iemand zelf zijn content kan aanpassen/updaten. Dit gaat allemaal prima, alleen de contact pagina geeft problemen, want hier zit dus die textarea (BeRicht) in.

Wat betreft de <textarea> vervangen voor <div>. Dit levert denk ik problemen op, zodra de CKEditor namelijk geen textarea meer is, werkt hij niet meer. Het plaatsen van de textarea binnen de editor is ook geen probleem, alleen zodra ik de pagina (met textarea) wil aanpassen mbv CKEditor, gooit hij alles wat NA de sluittag </textarea> van het tekstvlak binnen de editor staat erbuiten.

Even een citaat uit jouw reactie:
"Ik heb even de demo van de CKEditor bekeken, en het is geen enkel probleem om binnen de editor een <form> aan te maken, en ook niet om er een <textarea> in te maken."

Klopt helemaal! Als ik en CKEditor een contactpagina aanmaak, met dus een formulier met een aantal velden (waaronder textarea) gaat het allemaal prima. Ik sla me contactpagina op en de content wordt in de database opgeslagen. Alleen zodra ik de boel (content, in dit geval contactpagina met textarea) weer aan wil passen en de contactpagina dus ophaal binnen de editor (dmv php/mysql), dan ziet hij de sluittag van de BeRicht textarea als sluittag van de editor. Hierdoor staat de 'versturen' button buiten de editor. Ik heb hiervan even een afbeelding toegevoegd.

Mvg Quint

 

[csshunter]

Hoi Quint,
Een prachtige afbeelding!
Maar ik kan me er wel iets bij voorstellen. Ook de rest van je diagnose is me duidelijk.

... zodra ik de boel (content, in dit geval contactpagina met textarea) weer aan wil passen en de contactpagina dus ophaal binnen de editor (dmv php/mysql), dan ziet hij de sluittag van de BeRicht textarea als sluittag van de editor.

Een intrigerend verschijnsel! Het merkwaardige is, dat de CKEditor zelf wel zo'n textarea kan aanmaken ("binnen zijn eigen textarea"), maar de fout in gaat als je 'm echt als editor gaat gebruiken en er zelf een textarea in zet. Maar als het Droste-cacaobusjes-effect (nesten van textarea's) niet kan, waarom kan de editor het dan zelf wel? :shocked:

Tijd voor een proefje. Ik heb de volgende code aangemaakt:

<p><textarea cols="80" rows="2">Dit is een textarea, en er staat al iets in ook.</textarea></p>

• Ik open nu de online demo-CKEditor.
• We zien de Roodkapje-pagina.
• Ik klik op de "Code" button links boven, en krijg de content-code van Roodkapje te zien (die begint met de <h1> en eindigt met een </p>).
• Hele code wissen, en daar mijn <textarea> regeltje voor in de plaats plakken.
• Dit zou hetzelfde moeten zijn als wanneer jij via je database er een al bestaande pagina met <textarea> in zet.
• Kijken wat er gebeurt!
• De pagina blijft gewoon werken als je van code-view naar de normale weergave switcht.
• Maar dat zou helemaal niet moeten mogen, als het een textarea binnen een textarea is!
• Conclusie: er moet iets anders aan de hand zijn.
• Maar eens kijken met Firebug, en zien wat er nu echt gebeurt. Dit is een screenshot van de code-view: ckeditor-screenshot1.png
• De editor heeft inderdaad een <textarea> voor zichzelf aangemaakt. Maar die is helemaal leeg! Mijn ingegeven code is nergens te zien (ook niet als je met de FF Webdeveloper Toolbar de gegenereerde code opvraagt) - die zit kennelijk alleen bij mij lokaal in een tijdelijke variabele in het werkgeheugen.
  
  
• Nu in de demo omschakelen van de code-view naar de ontwerpweergave. En opnieuw kijken met Firebug. Hé, daar gebeurt dit: ckeditor-screenshot2.png!
• De CKEditor heeft mijn textarea helemaal niet binnen zijn eigen textarea geplaatst, maar in een tijdelijk <iframe>! :d
  
  
• Mijn eerdere idee van een <iframe> was dus nog niet zo gek: de editor gooit mijn code tijdelijk in een iframe (daarmee is het resultaat van mijn textarea-operatie zichtbaar "binnen het editor-scherm"). Maar feitelijk zit mijn textarea dus heel ergens anders. Met javascript zal alles in een variabele opgeborgen zijn, die verder pas in werking wordt gezet als de editor "mijn pagina" gaat opslaan. In die opgeslagen versie heeft niemand last van de textarea die er in zit.
• Oftewel: de code in de code-view is niet de echte code die de editor voor zichzelf gebruikt. Dat lijkt alleen maar zo, en is een aardig dwaalspoor als je iets van buitenaf in de editor wilt stoppen.

Al met al
Hoe het zou moeten, weet ik niet, maar ik denk dat je je op de een of andere manier zal moeten indringen in het <iframe>, waarin het <textarea> element onschadelijk is voor het functioneren van de editor zelf...

Misschien heeft nog iemand anders een helder idee?

Of eventueel een e-mailtje wagen naar de CKEditor-people? (voor $600 bieden ze een jaar lang CKEditor support aan met een retour-mailtje binnen een dag, maar misschien willen ze een losse vraag ook wel beantwoorden)

In ieder geval: succes!
Met vriendelijke groet,
CSShunter

PS:
Ik kwam ook nog deze documentatie van de CKEditor tegen: Integration, met uitleg hoe hun merkwaardige textarea in elkaar zit. Misschien staat daar nog iets bruikbaars bij. - Of op andere pagina's in hun docu, die heb ik niet bekeken.

[edit]O, daar is intussen de echte afbeelding ipv het Woelmuis-ik-mag-niet-deeplinken plaatje.
(mijn fantasie-afbeelding klopte)[/edit]

 

[quintengel]

Bedankt CSShunter!

Beste CSShunter,

Bedankt voor je uitgebreide reactie en diagnose.

Ik ga kijken of ik in het iframe gebeuren kan indringen en het probleem zo kan oplossen.

Zo niet, dan laat ik toch de verzendbutton maar lekker buiten de editor staan, de contactpagina is uiteindelijk toch geen pagina waarvan je de content wekelijks/maandelijks wilt updaten! Het staat alleen zo slordig en ik kon me niet voorstellen dat dit geen 'bekend' verschijnsel was, maar blijkbaar toch wel!

Nogmaals dank voor je hulp en reacties!

Met vriendelijke groet,
Quint