Alternate titles: What You See Is What You Get.
The user wants to create content that contains rich media and formatted text but does not the knowledge or time to write HTML.
There are many javascript libraries available online that will convert a <textarea/>
HTML element into a fully functioning WYSIWYG editor. The editor displays a work area that is both input and the final formatted output. The content is stored as HTML in a database.
Editors can be customized to your user’s needs. You can disable unnecessary functions. You might choose to not allow image inserts, tampering with font color or size – or even force the user to only use a predefined list of CSS classes.
WYSIWYG (What You See Is What You Get) was initially introduced in word processors such as WordPerfect and Microsoft Word. It was then a revolutionary way to write documents, where the editor on the screen mimicked the result in print.
Recently, WYSIWYG editors were introduced to forms on the web. Previously, long text was inserted into <textarea/>
fields, with no formatting options what-so-ever. WYSIWYG editors now allow the input to mimic what will be seen on screen.
6 comments
Shahar on Feb 07, 2008
Remove
Edit
I’d have hoped that the site would do more to promote good usability practice, not just document common techniques.
Dropdowns for navigation is #1 poor usability design. Getting rid of the ‘Go!’ button is #2.
A reference for Good techniques and practices would be very useful. A library that doesn’t discriminate between good and bad practice will just compound the interface problems that already exist.
(apart from that that, this is a very nicely put together site and if the content is chosen carefully would be a great resource)
Janko on Mar 26, 2008
Remove
Edit
I agree with Sharar. This technique shouldn’t be used. It is in contrast with good UI design best practices.
Gustav on Mar 28, 2008
Remove
Edit
Great, but some links to JS libraries would be useful.
Anders Toxboe on Mar 30, 2008
Remove
Edit
Gustav: The links are already here. Check the links under “See it in action” in the sidebar.
Job Search Guy on Mar 02, 2009
Remove
Edit
does anyone know how i can remove the text styling when content is pasted into an editor?
Jon Scalet on Mar 02, 2011
Remove
Edit
For functionality and overall ease of use the other good options out there are tiny and ckEditor. We actually made the switch to ck because of the poor usability of tiny. Just my $.02 for anyone looking into WYSIWYG editors.
Comments have been closed