The New FogBugz 8 Wiki Editor

September 23rd, 2010 by Evan Krall

"Now with more awesome!" sticker Back in 2007, we released FogBugz 6 with a new, fancy-pants what-you-see-is-what-you-get (a.k.a., "WYSIWYG") wiki editor. It was awesome (for the time), but it turns out browsers have changed quite a bit in the past 3 years, and as a result, a number of bugs had slowly crept into our wiki editor along the way. Sadly, our wiki editor didn't always get quite the attention it deserved in order to fix some of these bugs, leaving it in a pretty sorry state by the time 2010 rolled around. So, for FogBugz 8, we decided to give you a brand-spankin'-new, fancy-pants WYSIWYG editor.

"But wait!", you say, "hasn't Joel always said that you should never rewrite software?" Aha, but here's the trick: We didn't rewrite it! Heck, we didn't even write it in the first place! Our shiny new editor is based on CKEditor (a popular WYSIWYG editor maintained by the folks at CKSource) which means that you get a nice, modern WYSIWYG editor, and we get to pull in bug fixes from the CKEditor team as they become available. Why did we think this was the right choice for our wiki editor? Because CKEditor is CKSource's bread'n'butter. It's what pays their bills. And with the huge audience that's using CKEditor these days, you can bet that they're all over fixing bugs as quickly as possible.

That's not to say that we didn't write any code ourselves; we did. In fact, we wrote a lot of it. Aside from the glue needed to hook up CKEditor in place of our old wiki editor, we also wrote:

  • CKEditor-aware versions of our old wiki editor's dialogs, to retain a consistent look-and-feel throughout FogBugz:

    Attachment dialog

  • A new Bubble Menu system, which gives you contextual options but leaves the browser's context menus (or "right click" menus if you prefer) accessible and untouched:
    Bubble menus
  • Added link suggestions and the ability to edit the text of a link independent of the URL it's pointing to:

    Link dialog

  • Improvements to the "Insert Image" and "Insert Table" dialogs, including picture alignment and the ability to specify a table's width in pixels in addition to as a percentage of the page's width:

    Picture dialog  Table dialog

  • A "Repair Formatting" command, which helps tremendously when working with copy-and-pasted tables:
    Repair table formatting

We also inherited a bunch of nifty features from CKEditor itself:

  • Source mode, for all the HTML hackz0rs among you
  • Fewer bugs
  • Live previews of fonts, font sizes, and heading styles in their respective drop-down menus
  • Not as many bugs
  • More accurate CSS styles inside of the editor (to, you know, help with its WYSIWYG-iness)
  • Did we mention there are fewer bugs?

We think we've improved the experience of editing wiki articles in FogBogz immensely, and when this new experience is combined alongside all the other improvements we've made to wiki navigation and our default template, we think we've finally made the FogBugz wiki the super-awesome feature we've always wanted it to be.

We hope you enjoy it!