Recently I needed to add the ability to do some pretty basic in-page editing of content. I didnât want to use iFrameâs, i didnât want a hugely featured editor, literally some pretty basic tools to be able to edit content, bold, italic, h1, h2 and so on.
After a fair bit of Googling, it seemed that there wasnât a hope! all the plug inâs i found just seems unnecessarily complicated so, in a fit of self-importance, i decided i could do it myself. iâd end up with the editor i wanted, and code that i fully understood. Granted, it wasnât likely to be an easy job, but hey, why would i code anything if there was an easier option?
There are two things you need, the first is
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 called
execCommand actually allows us to do some fairly complex stuff with the contents of the contenteditableÂ area, and all in a really compliant way!