Clever Geek Handbook

How can you display the html as it is entered into the textbox?

I am trying to display HTML as it is typed. That is, the user enters HTML into a textbox and it is displayed (using javascript, I think) in a Literal or some other textbox, or perhaps a window. Otherwise, I have to force them to enter everything and then click the preview button.

+2


source to share


4 answers


Take your textarea input and assign it to the inner html div tag on the KeyPress textarea.



+6


source


Some reasons why I don't want to do this in real time, but instead with a preview as you point out (whether in JavaScript or server side)

  • Inadvertently, their code can break your page (an extra closed div in their code to break yours).
  • Intentionally, their code can break your page.
  • You will have to sanitize your tags and class names
  • You should not allow the script
  • You need to mask HTML encoded posts as well as tags or other input format
  • Security regarding who enters which code on which page and where
  • XSS issues (turning your tool into an attack vector on other sites)


So while this is a cool feature, there is probably only an initial list of things to consider before accepting it. This list has always been enough for me to avoid real time.

+8


source


I have a working example: http://www.galactic-warz.org/BBCodeTest.php

Enter your message in the text box (first field). The message is being converted. Large list of BBCodes is converted to SAFE HTML, bad HTML is removed, good HTML is maintained, JS event attributes are removed. The output message is printed in a div (second field) which allows all HTML to be displayed in real time. Then you can do what you want with the exit (except editing).

It is very safe. All HTML output is HTML safe, JS event attributes are stripped and it doesn't close the div on input (or BBCode [/ div]). The latter happened automatically, there was no coding for this.

In the second notice, this edit article we are writing replies has exactly the same basics ...

Youri

+1


source


One solution that is slightly safer is to send all the data in the form post to a server side script that renders the html page. Then load this asynchronously into the iframe when they click the preview button. If you choose to do this as you type, there will be a lot of useless round trips to the server, not to mention page loads that affect the history stack.

0


source






More articles:


All Articles