A little while back I wrote an article about using contenteditable and execCommand to build World Simplest HTML5 WYSIWYG Inline Editor.
After a huge number of comments from a whole range of people, I ended up deciding that while the editor works, there are some caveats thats just can’t be ignored, so I followed up with Worlds Simplest HTML Markdown Editor as a simple but usable alternative.
Today I got this question from a reader (Chris Baker)
I was planning on using this for an ultra-simple inline html editor. I see you've moved off to Markdown... I am not sure I want to make my target users learn about Markdown. I scrolled through the comments, and I didn't see any major comparability issues, yet you mention that there were some. What were the dealbreakers? I guess I'm asking you to talk me out of doing this :)
Rather than reply to Chris directly, I thought it would be useful to actually give some more insight in to the reasons for and against using execCommand to run your editor!
What it also gives you is HTML formatting at the mercy of the browser implementor!
If you check out a codePen i wrote you can see how powerful it is:
As you can see, this really simple bit of code gives you the majority of what you want in a WYSIWYG editor. With a tiny bit more code you can add a whole load of other formatting and media, making it pretty much a fully featured editor!
However within a couple of days of writing the article, I got a comment from Piotrek Reinmar Koszuliński who works on CKEditor saying that the approach had a whole load of flaws, and thats why he (and the rest of the CKEditor team) had put so much effort in to writting CKEditor!
Well it turns out that he couldn’t be more right.
The problem is that there’s more than one way to accomplish that same formatting in HTML. For example, how do you make a piece of text bold?
You could add in a <b> tag
You could <span style=”….”>
You could add in a CSS class
I could go on, but you see my point……
Each browser vendor was free to implement the details of the formatting the way they saw fit. The spec is pretty good, but it isn;t tight enough to ensure everyone does it the same….
If you’re in the lucky position of being able to ensure every user will use the same browser, then execCommand is a hit…….. but not if there’s even a small chance of your content being edited in another browser.
You see, if I use Chrome and bold some text, I might surround it in <b> tags. But then I try to remove that in IE8, and instead of removing those <b> tags, it will try to put in it’s own bold method.
Now i have double bolded text.
So a friend pops in with firefox and also tries to remove the bold. oh wait, now we’re bolding the same text in 3 different ways!
and remember, bold text is only one of many different things we can do to format text……..
So for me, this became a deal breaker……
But i still wanted formatted text that was easy to do, without using something as heavy as CKEditor (I sound like i am against CKEditor, honestly, it’s fantastic. I just personally like to know how stuff works, and with the time i have available right now, I don;t have time to really get to know it)
So a friend suggested Markdown. Markdown was invented as a method of taking the millions of text files which have been around since the dawn of time, and display them in a formatted way.
So for example, for many years, people started a text doc like this:
This is my text file ==================== * Content Item 1 * Content Item 2 Hey, this is some content
The beauty of Markdown is that without changing that text, what i get shown is:
This is my text file
- Content Item 1
- Content Item 2
Hey, This is some content
Check out the codepen:
Now I won’t talk much about CKEditor. I love it. It’s feature filled. If you want to see a demo for comparison, check out CKEditor
So to summarize:
- execCommand is great if you have absolute control of what browser is used
- execCommand is poor if you don’t…..
- Markdown is great if your users can deal with it (it does have a learning curve…)
- Markdown is poor if they can’t….
- CKEditor (et al) is great if you want your users to edit text in a way thats familiar to them
- CKEditor is poor if you;re a slight control freak (me) or don;t have time (also me)
But if you want my advice, do the work. Learn CKEditor. Don;t expect your users to bend to you, you bend to your users. it’s a little more work in advance, but it will pay off with happy users, happy clients, and most likely, a richer, calmer and quieter life for you!!!!!