WYSIWYG

Problem summary

The user wants to create content that contains rich media and formatted text but does not the knowledge or time to write HTML.

Examples

No items found.

Solution

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.

Rationale

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.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE