State of the Art in WYSIWYG HTML Editors
December 15, 2014

State of the Art in WYSIWYG HTML Editors

by Chris Waters

A common feature request from Aha! users was the ability to include images and tables inline with feature descriptions. A year or so ago we embarked on a project to improve our editor with a more feature rich experience.

When we originally chose an editor for Aha! we selected Ning’s wysihtml5 because it had a nice balance of functionality with a relatively simple and easy to follow code-base.

At the time it was a good choice for us because it was easy to integrate and most importantly had excellent support for inline-editing.

A key aspect of the editing experience in Aha! which is product roadmap software is that you can immediately start editing text inline, without needing to click an “edit” button or wait for the editor to load.

This makes editing quick and easy, but it does require that the editor code can work directly with <div→s that are marked with the contenteditable attribute.

Here is an example of our old inline editor in action:

Over time we found a few small problems with wysihtml5 that we were not able to fix: (1) weird text combinations that prevented editing, (2) clunky editing of links, (3) no cross-browser support for inline images. So we embarked on a search for a replacement.

After experimenting with many of the available editors we settled on tinymce.

We chose it because it has excellent cross-browser support, including inline images, because of its elegant table editor, and because we could be confident that because of the large existing user and developer base that there would continue to be improvements in the future.

Although tinymce has an inline mode, getting it to work satisfactorily for us turned out to be a much bigger undertaking than we expected. We are fussy about how a toolbar should behave when the screen is small, when it is resized and how it should behave during scrolling. Getting the right result required weeks of fine tuning, but we are very pleased with the result.

Here is the new editor in action:

You probably now understand why we are excited to roll out the new text editor and start using it ourselves. Tell us about what you have learned about working with text editors.

Comments on Hacker News.

Create your product strategy and visual roadmap in minutes If you are not already an Aha! customer, you may want to sign up for a free 30 day trial of Aha! now to see why over 5,000 product and engineering managers trust Aha! to set brilliant product strategy and create visual roadmaps.

We are growing fast and hiring!
Rails Developers. UX. Content Specialists. Product Managers. Customer Success.

Follow Aha! @aha_io

Chris Waters

About Chris Waters

Dr. Chris Waters is the CTO and co-founder of Aha! — the world’s #1 roadmap software. Chris is a serial entrepreneur who loves writing code and building products. He holds 16 patents for innovations in network security, database queries, and wireless devices.

Follow Chris

Follow Aha!

Related articles

The Best Cover Letters That CEOs Love to Read
April 13, 2017

The Best Cover Letters That CEOs Love to Read

You are probably familiar with the “elevator pitch.” You know, the one-minute speech every seasoned salesperson has memorized to deliver at a moment’s notice. It may be a cliche,…

Hey Boss: Stop Being My Timekeeper
August 8, 2017

Hey Boss: Stop Being My Timekeeper

“Let’s get it done ASAP.” How many times have you heard this from your boss? Maybe it was an urgent phone call or an email flagged as “high priority.” The pressure of a countdown.…

User Stories vs. Requirements
January 23, 2018

User Stories vs. Requirements

Stories. You have hundreds of them if you are a product manager. Each one describes the awesome experiences you want your customers to have while using your product. And like any…

See why more than 400,000 users trust Aha! to build products customers love

Start your free 30-day trial

© 2020 Aha! Labs Inc.All rights reserved