State of the Art in WYSIWYG HTML Editors

WYSIWYG Text Editor

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

 

 

About Chris and Aha!

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. His last two companies were acquired by Aruba Networks [ARUN] and Citrix [CTXS].

Sign up for a free trial of Aha! and see why more than 250,000 users worldwide trust Aha! to build and market products customers love.

We are rapidly growing and hiring!

  • Customer Success Managers (product manager experience required)
  • Product Marketing Managers
  • UX Designers
  • Rails Developers

Work from anywhere and be happy. Learn about our team — see current openings.