pure html wysiwyg

I stumbled upon the most incredible thing the other day on MDN. On the page for Making content editable which is part of the HTML developer guide they give an example of a simple but complete rich text editor.

I was intrigued, so I copy-pasted the whole block of code into a blank document in TextEdit and saved it as index.html and opened it up.

I clicked and entered some text.

I entered some more text.

I clicked the mysteriously named "Show HTML" checkbox wondering what it could possibly do.

I don't know about you, but this absolutely BLEW MY MIND. I started digging into the code.

pure html #

First of all the title of this article is actually a bald faced lie so I apologize for that. This is definitely not pure html and requires a decent amount of JavaScript and CSS to work.

I titled it "pure html" because it keeps everything in a single index.html file that cleanly separates the script, styling, and html body. Vue and Svelte developers should recognize the format immediately.

script #

The script tag starts by declaring two variables (var!!) and contains five functions for (I'm assuming based on the names):

• initializing the document
• formatting the document
• validating the input
• setting document mode (switching between html or output)
• printing the document

style #

The styling provides just a little CSS to format the editor and give a few resets.

body #

The body contains one giant html form

Nested inside the form:

• input tag
• div for first toolbar
• div for second toolbar
• div for text box
• paragraph tag containing an input tag for Show HTML button
• paragraph tag containing an input tag for send button

toolBar1 #

The first toolbar is a series of five select tags for formatting, font, size, color, and background color.

Each select has an onchange handler and a series of option tags for the different choices.

toolBar2 #

The second toolbar contains a fair bit of code since it has a lot going on.

The links inside the src attributes where originally much longer but I deleted most of it just for the sake of getting a more readable screenshot of the whole toolbar. Refer to the code on the MDN site for implementation