Forgot your password?

Home > About Us > Modern Signal Blog >WYSIWYG is Hard!

WYSIWYG is Hard!

Why I'm Switching to TinyMCE

It's really hard to build a good wysiwyg ("what you see is what you get") editor.  Specifically, I'm talking about a browser-based editor -- one that doesn't require the user to install any extra software.  I'm sure other types of wysiwyg editors are hard too, but I don't have experience with those.

For the past few years I have been maintaining a wysiwyg editor as part of Modern Signal's Lighthouse CMS.  I have even been proud of it from time to time, because I have thought that it does some things really well, and has some unique solutions to some problems that I haven't seen in other editors.  Occasionally, though, I think about dumping it.  There are a number of reasons for this:

  • I don't have much time to work on it, and as a result it's lacking a lot of the features that other editors have.
  • I know that I need eventually to support WebKit-based browsers (Safari, Chrome) eventually.  After the pain of adding support for Firefox, I'm not looking forward to learning about all the new quirks I will have to deal with.  Since Webkit uses a lot of the same APIs as Internet Explorer and Firefox, it probably wouldn't be as hard as supporting Firefox was, but, again, I just don't have much time.
  • There are some persistent cross-browser compatibility problems that are really hard to solve.

There is one specific problem that I'm thinking of.  If you create a simple editable document in Internet Explorer, and you put your cursor in there and hit enter, you will get a new paragraph, with space between the last location of your cursor and the new one.  If you do the same thing in Firefox, it inserts a simple line break instead -- no new paragraph and no extra space.  This is a problem for a number of reasons, but the main reason is that if you want to apply a stylesheet rule to a paragraph, it works fine in IE but not in Firefox.  And then if you have one person using IE and one person using Firefox, confusion ensues.

The two premier open-source wysiwyg editors out there, TinyMCE and CKEditor have handled this by forcing Firefox to act more or less like Internet Explorer by default.  I think that is the best solution.  I put some code in my wysiwyg to do that too, but it doesn't work all that well.  If I really had a lot of time, maybe I could come up with the right code to make this work well (again the problem with time).

Anyway, I've decided that it's time to transition over to a new editor.  I have settled, after some internal debate, on TinyMCE, because it seems to handle this Firefox/IE stuff in a very solid way, and it also seems to have a very nice extensible architecture.

Now, of course, I have a bit of heavy integration work to do.  A number of the tools in the Lighthouse wysiwyg are tailored specifically to work with Lighthouse, so I will need to incorporate those into TinyMCE.  The other big thing is that in the Lighthouse site editor, there is a single toolbar for all editable areas on the page, and all of the editable areas automatically expand to the size of the content.  This may be tricky to implement with TinyMCE.  But I feel pretty confident that in the long run using TinyMCE will save me a few gray hairs, and ultimately make Lighthouse better than it would otherwise be.

Even before the integration work is done for the site editor, Lighthouse will use TinyMCE to replace textareas in admin tools for Safari, Chrome, and Opera (yep, TinyMCE supports Opera too).  It's a basic implementation, but better than a plain textarea, which is what you saw previously in those browsers.


Comments

Leave this field empty

Testimonials

  • Modern Signal worked with us to understand our needs and figure out what solution would work best for us. Our Lighthouse CMS is perfectly suited to our website goals. When we later needed to modify the CMS, they again took the time to understand exactly what was  needed and then built that functionality rather than delivering a cookie cutter solution.   

    - Ecosystem Investment Partners

  • I felt as if my company was their only client. They responded to my needs quickly and efficiently despite short turn around time and intense demands.

    - Teaching Strategies, Inc.

  • Modern Signal has a professional staff that was very responsive to our needs during all phases - scoping, developing, implementing and maintaining - of our project.  We have been pleased with their ability to deliver quality work on time and on budget. If given the opportunity, I would work with them again.

    - The National Center for Safe Routes to School

  • This was by far the smoothest website redevelopment I have ever experienced. Modern Signal was a wonderful company to work with and we greatly value our working relationship. 

    - National Association of Student Financial Aid Administrators

  • We wouldn’t have gotten where we are today without your support over the years.  Modern Signal has always been a great partner to us.

    - Kirk Gillis, Managing Director at Zoom Tanzania

  • Modern Signal understands our business - from future needs to current limitations - so their solutions are always scalable, solid, and service-oriented.

    - National Association of Home Builders

  • Modern Signal significantly enhanced our site to be more efficient and user-friendly. They provide excellent customer service with timely and cost-effective solutions.

    - Center for Medicare Education

  • Modern Signal has been a great partner for us for over the past 10 years.  As our business grew and our needs changed, Modern Signal was able to work with us to adjust our website platform in the ever-changing online world.  Their service and response level has been second to none, and we've been never been happier with our relationship with them.

    - Charm City Run

  • I love working with Modern Signal! Their CMS is very easy to use and they are incredibly responsive to questions or challenges I bring them.

    - NALP