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>

Advertisement

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.