Adventures with contenteditable

The contentenditable attribute offers powerful editing capabilities on nearly any HTML element, allowing far greater formatting options and more streamlined editing environment than a simple textarea. However, it has a few key short comings that require some work to overcome.

Depending on the situation, especially when a rich text editing toolbar is needed, the best solution may be a library like Medium.js, which includes a wide range of editing options and capabilities (although it does require a couple of dependencies). While this and other libraries will also make contenteditable beyond usable, I’ve tied up a couple of the loose ends currently present for a quick or lightweight implementation.

In it’s current incarnation, contenteditable handles empty elements rather poorly: an empty element is automatically deactivated and the cursor cannot be placed inside, even through JavaScript. The solution to this is to detect the backspace key on keyup and insert an empty span into the parent element when it is empty:

This function also prevents the backspace key from navigating the browser when the element is empty, as it normally would. To ensure that empty elements can be focused properly, another short function is required:

This creates an empty span and focuses the element, placing the cursor at the beginning. This code has been tested mainly in Chrome v41, although there shouldn’t be any significant issues with current version of Firefox or Internet Explorer (although IE 11 does exhibit some weird behavior with the cursor).

Hello world!

I think a good place to start is my motivations behind starting this blog and the kind of content I intend to post here. I’ve been a web developer for the past 6 years and, and over that time there’s been a number of interesting techniques and technologies I’ve come across and implemented. I’d like to be able to document my similar future experiences, in a public way, with my own contributions and insights. Secondly I spend a great deal of time keeping up with recent technological developments in general, and I’d like to post thoughts about those here.

So why a blog?

I think there’s a few reasons why a blog is the best medium for this content. The first is that a blog is an informal way to present content in an environment that I’m extremely familiar with. Depending on time constraints, I can exercise as much or little control over customization and polish as I desire, and I won’t feel limited by the platform. Given my skills, it’s a natural place to document my experiences and discoveries.

There are a few alternatives to posting this content through a blog, but I don’t think any of them meet my current needs or goals. For example, I could post these thoughts and experience on Facebook or another social media site, but these platforms are extremely limited in both their formatting options and content capacity.