Develoraptor Blog


html-area: a wysiwyg custom element for forms

Posted by

I wanted to add an HTML input control to my blog, but none of the libraries I could find seemed to do the right thing. They all tried to be one-size-fits-all, but in doing so just bundled a load of complexity for things I don't need.

What I need was this: a contenteditable element that sends its contents with form submissions, and falls back to a textarea for unsupported browsers.

I've created html-area, which does exactly that. It uses custom elements with element internals for form participation. It listens for InputEvents, which means it picks up any direct user input as well as calls to document.execCommand and the developer can hook in by throwing any other InputEvents they want at it.

Part of my philosophy for software development is that as your becomes more complex its goals should be more specific. If you can't meet that rubric then your ability to test, debug and generally maintain your package begins to deteriorate. Much better to follow the UNIX philosophy and make something simple that can be customised from the outside than build something that needs a complex configuration system inside.

If you want to use my library or see how it works, check out the git repo, (the JS file for the component is 49 lines / just over 1KB) , or try it out with the demo page.