You are building a website, CMS, blog platform, ecommerce site, or web app. You need the user to edit their webpages, product info, or posts. You have an idea for how it will work, how your product will make this easier than any other. But after hours of searching for something you can use you are emotionally exhausted. The only things out there that aren’t ugly hobby projects are over-engineered replace-your-textarea solutions. You can’t have your vision. You can only have someone else’s complete package. Or you can start your own hobby project and stop because of time, releasing it among the crowds of other partially started WYSIWYGs.
I have felt keenly the pain of existing WYSIWYG solutions through the years. I’ve been meaning to take the time to build one from scratch that kept the core separate from the toolbar/interface. One that other’s could build custom solutions with. I finally made some time. It’s still not finished, but it’s in a usable state. I wanted to provide a sneak peak.
Inline WYSIWYG Sneak Peak
To make portions of an HTML page editable you can add a
data-editable="simple" attribute to the element or call
editable.enable(element, 'simple'). The following screenshot is the HTML for the page being edited in the video. We’ll be open sourcing it soon.