If you’re a developer, designer, or work in UI/UX, you’ll probably hear the term “WYSIWYG” a lot. But, maybe some of you are still wondering, what exactly is it? why is it needed? and even how to pronounce it? Here we will give you a short review about WYSIWYG. 

What is WYSIWYG?

WYSIWYG (pronounced “wiz-ee-wig”) stands for “What You See Is What You Get”. It is a program that allows a developer to see what the end result will look like while the interface or document is being created. To put it simply, WYSIWYG editor refers to how your design and content appear on the editing platform is exactly what it will look like in the final version. You can find WYSIWYG in a web page, comment, website builders, blog post, or a word processor like Microsoft Word.

This term originated from a catchphrase in the 1960s by Flip Wilson’s drag persona “Geraldine Jones”. In 1971 the phrase became popular as the title of a single on The Drama and until 1974 the phrase What You See Is What You Get was always mentioned on The Flip Wilson Show.

The first true WYSIWYG editor was a word processing program called Bravo. Invented by Charles Simonyi at the Xerox Palo Alto Research Center in the 1970s, it became the basis for Simonyi’s work at Microsoft and evolved into two other WYSIWYG applications called Word and Excel.  

Why do you need WYSIWYG?

With WYSIWYG, you can type in plain text and format it with paragraph breaks, sizes, fonts, italic, bold, underline, and other elements directly in the text box. You don’t need code or tags to do that. Here are some advantages you get from using WYSIWYG editor:

• No-code editing

  You can click, drag, and type to make things happen directly without having any knowledge of web programming (coding or commands).

• Fast publishing

  It’s much faster to use a WYSIWYG text editor than coding the text from scratch. There’s no need to switch screens and wait for the preview to generate.

• Streamlined workflow

  As you can visualize the end product while you’re creating it, you can make adjustments in real-time without needing to publish, edit, republish.

• Flexible editing

  It enables you to make small changes on the fly. If an image is slightly out of position, you can fix this in a matter of a few simple clicks. Plus, you can easily keep your site more up-to-date this way.

• Proofreading

  Typos are so much easier to catch in a WYSIWYG editor than in a block of code. And also, these mistakes can easily be resolved with the WYSIWYG editor. 

WYSIWYG in WordPress

The WordPress post visual editor also uses the WYSIWG. WordPress comes with a modified version of TinyMCE, which is an open-source WYSIWYG HTML editor. It has toolbars with a bold, italic, bulleted list, alignment, text color & size, etc., similar to the Microsoft Word menu bar.

With this WYSIWYG editor, instead of writing HTML, you can write WordPress posts and format them using the buttons in the toolbar. Since it is a visual text editor when you add images then it will show right inside the editor. 

TinyMCE is extensible so WordPress plugin developers can also add their own buttons to the visual editor’s toolbar. Themes can also add their own styles to the editor to use the same style rules as the live site. 

What are the elements in the WordPress editor toolbar?

By default, WordPress TinyMCE editor provides two rows of buttons to create, edit and format post content:

The first row (the primary toolbar) 

Includes styling and formatting functionalities such as:

• Bold
• Italic
• Bullet points
• Ordered list
• Blockquote
• Alignment: Left, Center, Right
• Insert/ edit link
• Remove link
• Insert ‘Read more’ tag
• Toolbar Toggles/ Kitchen Sink: enables the second row
• Toggle distraction-free writing mode 

The second row (the advanced editor toolbar)

You need to click on the Toolbar Toggle button from the first row to activate the second-row toolbar. This toolbar provides a more advanced menu such as:

• Style: Heading 1-6, Preformatted
• Strikethrough
• Horizontal rule
• Text color
• Paste as Text
• Clear formatting
• Insert ‘custom character’
• Outdent
• Indent
• Undo
• Redo
• Help 

Examples of WordPress WYSIWYG editor

In this post, we will list the best 5 free WordPress WYSIWYG editors as reviewed by Siteefy.

Elementor 

• One of the best free WordPress page builders
• Easy to use with complete features
• Includes 30 basic widgets & drag-and-drop page builder
• Compatible with any WordPress themes and plugins
• Available in over 50 languages
• Main features: high speed, clean code (no lock-in), auto-save functionality, redo/ redo functionality, responsiveness, role manager, elementor finder.
• Additional features: 150+ elementor kits & templates, easy integration with major marketing tools & platforms, visual form builder, 100+ pre-built pop-up templates, WooCommerce page builder, content lock functionality, cool motion effects & animations, powerful custom positioning, shape dividers, lightbox overlay, social icons & share buttons, star rating review, sticky elements, evergreen countdown, developer-friendly, third-party add on.

Beaver Builder

• Intuitive and clean interface
• Compatible with any WordPress themes
• Main features: simple & user-friendly, intuitive drag-and-drop interface, no coding, responsiveness, helpful community, awesome pre-made templates.
• Additional features: WooCommerce support, save & reuse options, shortcode support, widget support, import & export functions, translation-friendly, social buttons.

Themify

• Includes Themify Theme and Themify Builder
• Has its own caching system ensuring high speed
• 40+ designed layouts with amazing effects.
• Main features: back-end & front-end page builder, mobile responsiveness, multi-site support, can be extended further with add-ons.
• Additional features: undo/ redo functions, import/ export functions, easy duplicating, flexivle rows & columns combinations, layout parts, 60+ animation effects, custom styling.

Visual Composer

• Design options include control over background, spaces, borders, parallax effects, and more right from the editor.
• Hundreds of content elements available
• Compatible with any WordPress Themes
• Main features: WordPress WYSIWYG Editor, WordPress widgets support, custom CSS, global templates, responsive design, compatible with Yoast SEO plugin.

WP Page Builder

• A beginner-friendly page builder with a clean interface and flexible customization options. 
• Compatible with all WordPress themes.
• Not include theme builder, popup builder, and marketing integrations.
• Main features: Front-end WordPress visual editor, 60 content blocks & 38 add-ons, 27 layout packs, unlimited redo and undo options, WordPress widget support, translation-ready builder.

Summary

WYSIWYG (What You See Is What You Get) is referring to how your design and content appear on the editing platform is exactly what it will look like in the final version. This program allows you to create content even without programming knowledge (coding, etc). 

The WYSIWYG editor is used as WordPress post visual editor, TinyMCE. It is the text window where you type in content for your post or docs on WordPress. The toolbar is similar to Microsoft Words. There are several options of WYSIWYG editors that you can choose to help with styling and formatting your WordPress post.

Reference :

• Wikipedia
• Tiny cloud
• WPBeginner
• WordPress.org