I'm exploring the idea of using contenteditable on a website at visitor comments and at a message board.
As I only wish to accept a white-list of HTML tags and attributes the question of when and how should I validate the entered HTML content comes up.
How would you do it? What cross-browser solutions would you choose to use? What events could be useful?
HTML Purifier is getting momentum these days.
Related
When you select some elements on the webpage by mouse and then paste it in new email (for example in gmail) you still see html elements. But when I add html code to clipboard from js I still see html code after pasting. Is there any way to add some html code from js and see generated elements after pasting?
That is not possible because of the way gmail handles this (the right way). Just imagine if you were able to send javascript tags to anyone with codes that would send cookie info back to you. This is called escaping html and google (and everyone else who does it does it right). Cheers
I am rather curious.
When a member is asking a question in Stack Overflow, within a textbox, the member can enter tags which will change into a graphical form automatically. There is even an 'X' button to the side of each tag which will allow the tag to be deleted.
How is this implemented in HTML? I thought only pure text is allowed in a textbox.
The tag system is quite easy to do with a jquery library. Check these out:
http://xoxco.com/projects/code/tagsinput/
http://aehlke.github.io/tag-it/
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
and so on ...
Only text is allowed in a textfield, you're right.
The Tags field, when you're asking a question on this site, is actually a <div> which looks like a textfield. Then, it's a matter of CSS and JavaScript to manage inserting and removing the tags. You could use web-inspector to study the HTML structure and css/js codes.
Viewing source of the tags may give some idea:
am having one task in epub (i.e) quiz .so the problem what iam phasing is,once the user read the question means he enter his answer in text box. so the problem is text box does not show the key pad for typing the answer.is any some other solution for this problem using java script?.is it possible
you can add javascript or a javascript plugin like jquery but there are some changes you will have to make to your code. I added a flex slider with just a few changes. First take out the leading xml call in the html file then use a cdata wrap for your script. If you go to my youtube channel I did a couple of videos on it about a year ago. http://www.youtube.com/watch?v=geAnFKbW9wI
Hope this helps.
You can use like below, am using this for interactive FL books.
<div contenteditable="true">_</div>
and also you can refer this for contenteditable change events.
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
I came across the following http://ckeditor.com/demo , and was wondering if anyone had a basic tutorial how to implement this (or perhaps what key search terms I should use)?
Is this just a heavily modified TextField, or have they somehow managed to create a completely new TextField from scratch?
I tried googling this many times, and I always get pages relating to customizing the built-in TextField with CSS etc.
A good place to start if you want to learn how richtext web editors work is to look into the contenteditable attribute and the document.execCommand method (the best editors use a lot more than this, but these are at the foundation). Over-simplified, an editor consists of a contenteditable block and ways to invoke document.execCommand on the text selection.
But, speaking as a person who has actually developed an editor of this kind, you might be better off using an existing one (CKEditor being a great one, in my opinion).
Edit: Note that contenteditable is a proprietary (Microsoft) property, but most (all?) browsers have implemented it now, and it will be in HTML5.
Edit 2: I want to try to clear up a few misconceptions.
A div or iframe isn't in itself editable, it requires the contenteditable attribute. The use of an iframe is typically a workaround for the fact that older Gecko browsers only supported an alternative editable property (designMode) that could only be applied to a whole document.
While some operations of advanced editors probably do employ innerHtml, this isn't the key to making an editor on the web.
It is not a textbox. It is a DIV that has lots of HTML injected to it with javascript.
The basic idea is that JavaScript uses the innerHtml property of the div and writes HTML to it.
This is a javascript implementation that replaces a input. It basically hides the input and uses it for storing and passing the data via POST.
The advanced textfields I have seen have all been iframe or div. The code behind them is quiet messy and not very accessible.
Proceed with caution!
You may want to consider WYSIWYM instead of WYSIWYG.