

Bravo, developed in 1974, 10 whole years before the release of MacWrite, was probably the world's first WYSIWYG editor.
#Html rich text editor software
MacWrite is often called the world's first WYSIWYG editor, although - as with many of Apple's greatest successes - it was based on someone else's idea in this case a prototype piece of software developed at Xerox PARC (A research centre in Palo Alto, California). Although the feature set was rudimentary by today's standards, MacWrite had an intuitive mouse-based graphical user interface and boasted the ability to display different fonts and formatting during editing. The year after the release of Microsoft Word, the Apple Macintosh was launched, which came bundled with Apple's new word processor, MacWrite. The user no longer needed to type text commands to apply formatting but could instead use their mouse to navigate the Graphical User Interface (GUI), clicking on buttons and menus to apply specific formatting rules. In 1983 Microsoft announced both the The Microsoft mouse ($195) and Multi-Tool Word ($395), a word processor designed to take advantage of the new peripheral (Microsoft would quickly simplify the name to just ‘Word’) 4. The next major step in the world of WYSIWYG editing was enabled by the humble mouse although first devised in the 1960s, it wasn't until the 1980s that mice started to gain popularity. In a not-so-subtle dig at WordStar, this ad for Microsoft Word explains how it improves on existing WYSIWYG editors by showing formatting like bold, italic and underline on-screen 3

Later versions added preview functionality so you could get a better idea of the layout of the printed page, but this would take you out of the editing mode.Īrriving soon after WordStar, WordPerfect introduced some improvements to differentiate formatting on screen: displaying bold text brighter than regular text and rendering a line below underlined text. Bold and underline was still represented by inline commands like ^B or ^Y. Calling WordStar a WYSIWYG editor is a stretch - the formatting visible on screen while editing is limited to line and page breaks. To move through the document, instead of using a mouse, you would use the diamond shaped formation of keys: Ctrl + E, Ctrl + X, Ctrl + S, and Ctrl + D to move the cursor up, down, left or right respectively 2. For example, pressing Ctrl + P then B (or just F4 if you were lucky enough to own a computer with function keys) would make the text bold. In WordStar, the user would apply formatting using 'Control codes'.
#Html rich text editor manual
One of the first word processors to label itself as WYSIWYG was WordStar: priced at $495 + $50 for the manual 1, version 1.0 was released in 1978. This ad for WordStar makes a big deal of its ‘what you see is what you get’ features
#Html rich text editor code
WYSIWYG (pronounced wiz-ee-wig) or "what you see is what you get" editors aim to make the appearance of the content inside the editor resemble the final product as accurately as possible, hiding the formatting code from the user and showing its actual effect instead.

\textit would output " this text is in italics" - what you see while editing is different from what you get as the output. Historyīefore the invention of word processing software, adding formatting to text documents meant using a markup language such as TeX. This is text that is richer than ‘plain text’ by virtue of containing formatting information: bold, italic, strikethrough, different fonts, headings, ordered lists, unordered lists, etc. Fundamentally, a rich text editor is an interface for editing ‘rich text’. Borrowing heavily from desktop word processing software, it has gradually become the primary means of writing blog posts, editing CMS-based websites and even composing emails. The rich text editor is one of the most complex interface components, both visually and technically.
