contenteditable tells the browser that this item (a div for example) can be edited inline. You can do all the normal text editing here with ctrl-b for bold, ctrl-i for italics etc, but it's fairly limited.
The second thing you need is a special function calledexecCommand
execCommand actually allows us to do some fairly complex stuff with the contents of the contenteditable area, and all in a really compliant way!
If you want to read what it can do in detail, check out The Mozilla Docs
Essentially, execCommand takes three parameters:
Command Name - the name of a command
ShowDefaultUI - not implemented, and best set to false
ValueArgument - optional for some commands so for example, using the command 'bold' will make the currently selected text turn bold with a <b> tag!
ValueArgument can be set to null in all but one case. When you want to set a tag for a line of text (h1, h2 for example) you need to use the formatBlock command, and put the tag you want in the ValueArgument (without angle-braces).
Now this is simple enough, but to make life even easier, a single click handler and a data-attribute on each link allow us to have one very simple function to handle everything.
to stop and unwanted page movements etc….