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.
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.
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
The styling provides just a little CSS to format the editor and give a few resets.
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
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.
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