WYSIWYG Editor
A WYSIWYG (What You See Is What You Get) editor is a content editing interface that displays the final formatted output as the user edits, allowing them to see how bold, images, links, and layouts will look without writing code.
§ 1 Definition
WYSIWYG stands for "What You See Is What You Get." It refers to software that allows users to edit content in a visual interface that closely resembles the final output. In web development, WYSIWYG editors let non-technical users create and format web content without writing HTML, CSS, or Markdown. Common WYSIWYG editors include TinyMCE, CKEditor, and the block editors found in WordPress (Gutenberg) and Squarespace. The core promise is that formatting buttons (bold, italic, headings, lists, image insertion) produce visible results immediately, showing exactly what readers will see. This removes the abstraction layer between authoring and publishing.
§ 2 How WYSIWYG Editors Work
Most WYSIWYG editors use the contenteditable HTML attribute combined with JavaScript to allow inline editing. When a user clicks a toolbar button (e.g., Bold), the editor wraps the selected text in the appropriate HTML tag (<strong> or <b>) and the browser renders it immediately. Behind the scenes, the editor generates HTML that can be stored in a database and rendered on the front end. Modern editors like WordPress Gutenberg use block-based architectures where each content element (paragraph, image, heading) is a discrete block with its own editing controls, offering more predictable output than traditional inline WYSIWYG editors.
§ 3 WYSIWYG vs Markdown vs Code Editors
Each approach has trade-offs. WYSIWYG editors are the most accessible for non-technical users but can produce messy, inconsistent HTML (especially with copy-paste from Word documents). Markdown editors offer clean, portable formatting without requiring full HTML knowledge, though they lack visual preview by default (most modern Markdown editors provide split-pane preview). Code editors give developers full control but require technical expertise. The best choice depends on who is editing and what the output quality requirements are.
§ 4 Common Pitfalls and Best Practices
WYSIWYG editors can produce bloated, invalid HTML if not properly configured. Paste filtering is essential: strip unwanted formatting from pasted content, especially from Microsoft Word. Limit the available formatting options to only what content authors actually need. Configure the editor to produce semantic HTML (use <strong> instead of <b>, <em> instead of <i>). Consider server-side HTML sanitization to prevent XSS attacks. For complex content with structured data, consider a block editor or structured content approach instead of a traditional WYSIWYG.
§ 5 Common questions
- Q. Is WYSIWYG the same as rich text editing?
- A. Yes, the terms are often used interchangeably. WYSIWYG emphasizes the visual fidelity aspect, while rich text editing refers to the ability to format text with bold, italics, lists, etc.
- Q. Do WYSIWYG editors produce bad HTML?
- A. They can, if not properly configured. Paste filtering, toolbar limitations, and output sanitization are essential to maintain clean HTML.
- Q. What is the best WYSIWYG editor for WordPress?
- A. WordPress's built-in Gutenberg editor is now the standard. For classic editing, plugins like TinyMCE-Advanced provide enhanced controls.
- WYSIWYG editors let users create formatted content visually without writing code.
- They work via the contenteditable HTML attribute and JavaScript.
- Configure paste filtering and limit formatting options to maintain clean HTML.
- Block editors (Gutenberg) offer more structured output than traditional inline WYSIWYG.
We configure WYSIWYG editors in WordPress and other CMS platforms to produce clean, semantic HTML. No cruft, no bloat. Explore our WordPress Maintenance or get in touch.
Get in touchA WYSIWYG (What You See Is What You Get) editor is a content editing interface that displays the final formatted output as the user edits, allowing them to see how bold, images, links, and layouts will look without writing code.
Category: General (also: Front End, Software Engineering)
Author: Atomic Glue Technical Team
## Definition
WYSIWYG stands for "What You See Is What You Get." It refers to software that allows users to edit content in a visual interface that closely resembles the final output. In web development, WYSIWYG editors let non-technical users create and format web content without writing HTML, CSS, or Markdown. Common WYSIWYG editors include TinyMCE, CKEditor, and the block editors found in WordPress (Gutenberg) and Squarespace. The core promise is that formatting buttons (bold, italic, headings, lists, image insertion) produce visible results immediately, showing exactly what readers will see. This removes the abstraction layer between authoring and publishing.
## How WYSIWYG Editors Work
Most WYSIWYG editors use the contenteditable HTML attribute combined with JavaScript to allow inline editing. When a user clicks a toolbar button (e.g., Bold), the editor wraps the selected text in the appropriate HTML tag (<strong> or <b>) and the browser renders it immediately. Behind the scenes, the editor generates HTML that can be stored in a database and rendered on the front end. Modern editors like WordPress Gutenberg use block-based architectures where each content element (paragraph, image, heading) is a discrete block with its own editing controls, offering more predictable output than traditional inline WYSIWYG editors.
## WYSIWYG vs Markdown vs Code Editors
Each approach has trade-offs. WYSIWYG editors are the most accessible for non-technical users but can produce messy, inconsistent HTML (especially with copy-paste from Word documents). Markdown editors offer clean, portable formatting without requiring full HTML knowledge, though they lack visual preview by default (most modern Markdown editors provide split-pane preview). Code editors give developers full control but require technical expertise. The best choice depends on who is editing and what the output quality requirements are.
## Common Pitfalls and Best Practices
WYSIWYG editors can produce bloated, invalid HTML if not properly configured. Paste filtering is essential: strip unwanted formatting from pasted content, especially from Microsoft Word. Limit the available formatting options to only what content authors actually need. Configure the editor to produce semantic HTML (use <strong> instead of <b>, <em> instead of <i>). Consider server-side HTML sanitization to prevent XSS attacks. For complex content with structured data, consider a block editor or structured content approach instead of a traditional WYSIWYG.
## Common questions
Q: Is WYSIWYG the same as rich text editing?
A: Yes, the terms are often used interchangeably. WYSIWYG emphasizes the visual fidelity aspect, while rich text editing refers to the ability to format text with bold, italics, lists, etc.
Q: Do WYSIWYG editors produce bad HTML?
A: They can, if not properly configured. Paste filtering, toolbar limitations, and output sanitization are essential to maintain clean HTML.
Q: What is the best WYSIWYG editor for WordPress?
A: WordPress's built-in Gutenberg editor is now the standard. For classic editing, plugins like TinyMCE-Advanced provide enhanced controls.
## Key takeaways
- WYSIWYG editors let users create formatted content visually without writing code.
- They work via the contenteditable HTML attribute and JavaScript.
- Configure paste filtering and limit formatting options to maintain clean HTML.
- Block editors (Gutenberg) offer more structured output than traditional inline WYSIWYG.
## Related entries
- [Markdown](atomicglue.co/glossary/markdown)
- [Agile Development](atomicglue.co/glossary/agile-development)
Last updated July 2025. Permalink: atomicglue.co/glossary/wysiwyg-editor