ColdFusion Tutorial

Format the users input in a textarea like WYSIWYG and accept HTML code

It is a problem when users write something in a textarea. The browser ignores the line breaks and the whitespace. (Line breaks characters are considered whitespace by the browser).

The example below lets the user enter text and HTML code in the textarea. The output will be almost WYSIWYG.

In the input form we use the WRAP attribute (WRAP="VIRTUAL") to wrap text entered into the textarea field automatically. This instructs the browser to wrap to the next line automatically. Just like most of the editors and word processors do.

The code for the input form:

<!--- form_input.cfm --->
<!--- Display the feedback input form --->

Please enter your comments and then click submit
<br>
<form action="form_output.cfm" method="post">
<textarea name="comments" cols="100" rows="10" wrap="virtual"></textarea>
<br>
<input name="submit" type="submit">
</form>


In the output code we first check for HTML and replace '<' and '>' with appropriate entity-references.

Then we format the output.
Finely we output the users input using ParagraphFormat.

The code for the output:

<!--- form_output.cfm >--->
<cfsetting enablecfoutputonly="Yes">
<cfset MessageComments = #Form.comments#>
<!--- Check for HTML and replace '<' and '>' --->
<cfset MessageComments = "#Replace(MessageComments, '<', '&lt;','ALL')#">
<cfset MessageComments = "#Replace(MessageComments, '>', '&gt;','ALL')#">
<!--- Format the users message. --->
<cfset MessageComments = "#Replace(MessageComments, chr(10), '<br>','ALL')#">
<cfset MessageComments = "#Replace(MessageComments, chr(9), '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', 'ALL')#">
<cfset MessageComments = "#Replace(MessageComments, '  ' , '&nbsp;&nbsp;', 'ALL')#">

<!--- Output the massage using 'ParagraphFormat'. --->
<cfoutput>#ParagraphFormat(MessageComments)#</cfoutput>
<cfsetting enablecfoutputonly="no">

Here's the output. We have copy and paste the HTML code for the input form into the textarea. As you can see, the output is formatted and shows HTML code.

<!--- form_input.cfm --->
<!--- Display the feedback input form --->
Please enter your comments and then click submit
<br>
<form action="form_output.cfm" method="post">
<textarea name="comments" cols="100" rows="10" wrap="virtual"></textarea>
<br>
<input name="submit" type="submit">
</form>

ColdFusion Tutorial test

Format the users input in a textarea like WYSIWYG and accept HTML code

No test is available or implemented for this ColdFusion Tutorial.

User Comments: 2

 Thank you!

This tutorial works perfectly for me. Thanks to the author.

 Links don't get passed

Unfortunately, this doesn't work when you text area includes links written in html.  The links disappear before you can even mopdify the text.

i don't have a solution, though i am looking for one.

Add your comments

Your Name*:
Your Email:
Site URL:
Site Name:
Comemt Title*:
Your Comment*:
Key Phrase*:
e5W
Your IP Address: 38.103.63.62
 

ScandicWeb is own by Scandic Systems LTD [UK] Company No. 5984000. All other trademarks and copyrights are the property of their respective holders.

[Home [Site Map [Privacy Statement [Site Feedback] [About ScandicWeb]


[ColdFusion [Flash [Search Engine Optimization [Graphics [Cascading Style Sheets (CSS) [JavaScript (JS) [Software]

Partner sites: ScandicSoft


Server time: 19. November 2008 Wednesday