DEV Community

loading...
Cover image for pure html wysiwyg

pure html wysiwyg

ajcwebdev profile image anthonyCampolo ・2 min read

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

00

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.

01

I clicked and entered some text.

02

I entered some more text.

03

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

04

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.

05

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

06-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

07-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

08-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.

09-toolbar1

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.

10-toolbar2

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

Discussion

pic
Editor guide