For years there have been little things that have irritated me, as well as I am sure many of you, about how we compose our posts, reviews, and articles. I misspell words from time to time, I would love to just right click on a word and have the spelling fixed--I can't do that right now. Or when I copy text from another source and paste it into the text editor I can't get rid of the background color and general lack of uniformity without doing some serious editing in source mode. So it is with happiness I can say that Huddler is finally updating the Rich Text Editor! The update will most likely push during one of August's bimonthly software updates. This is the short version of the change from Huddler:
For those of you like me who like to know the full technical details here is a more detailed version of the update plan:
About that right-click menu...
As a third-party product, we don't have absolute control over all of CK's behaviors and characteristics. One of the more disliked is the way CK intercepts right-clicks from the user's mouse and surfaces its own context menu instead of the browser's menu. Users frequently report frustration with this because it prevents them from using their browser's inline spellchechecker.
Every single one of us has been here:
CK Editor does have an option to disable this menu, however we haven't done it before because some important functionality lives inside this menu. For example, the only way to add a row to the bottom of a table is to right-click inside it, and choose "insert row after." Here's what that looks like if you haven't seen it recently:
Similarly: if you want to float an image to the left so that text wraps around it to the right, you need to open the Image Properties dialog, which, womp womp, is only accessible via the right click menu. Much maligned though this menu may be, it has some important uses.
SO we've been stuck a little bit on this issue for a while. But we have a proposal to break that logjam and move forward. That's what this post is about.
Quick Editor / Advanced Editor
Our proposal is to split the editor into Quick and Advanced modes. The quick mode will be the default, and it will have fewer buttons, no table editing, and no right click menu. The Advanced editor will have every bell and whistle we can offer, including some new features we don't have today. It will have CK's right click menu.
Let me walk through this a bit:
Step 1: Slim down the default editor and remove the right-click menu
First we turn off that right-click menu, and with it, we disable WYSIWYG table editing. In fact, let's trim the editor way down to just the core essentials that everyone uses.
This is what we'll call the Editor's "Quick Mode." It will not have the CK right-click menu enabled. We're working on a solution for the Image Properties dialog (double click an image to bring it up) but table editing will simply be disabled in Quick Mode.
We've done several analyses of how frequently users employ the Editor's various functions. It turns out that a small number of the toolbar functions get the lion's share of usage. If you count up all the clicks inside the Editor region, and eliminate any button that gets less than 0.5% of clicks, here's what you are left with:
- Text Size
- Text Color
- Bold, Italic, Underline
- Link / Unlink
- Insert Picture
- Insert Video
- Insert Smiley
- Quote Block
Spell check also gets a surprisingly high number of clicks, but that's probably a symptom of how urgently users need to get the right-click menu out of the way.
Here's what the Editor would look like if we removed the right click menu and the advanced functionality that's tied to it, like tables, leaving only the main functions users employ frequently:
Step 2: Offer an "advanced mode" editor that has the kitchen sink (and the right-click menu)
You probably clenched your teeth a little when you saw the above mockup, right? What about spoilers? What about strikethrough? What about html source mode??? Well, look closely at the mockup above and you'll notice a downward-pointing carat at top right.
Users can use this to switch to "advanced mode" (see below) when they want to do something fancy like edit a table or attach a file. Remember, these actions make up less than one-half of one percent of clicks. Tables are used very rarely, so it doesn't make sense to load that function and hijack the right-click menu 100% of the time. However, when you DO want to work with tables, you'll have an option that works.
And guess what? If we're going to offer an "advanced mode" editor, there are additional features we can include which have never been enabled in our editor. Toolbar buttons for indentation, link anchors, inserting special characters, search-and-replace text, and my personal favorite: multi-level nested bullet lists.
BUT... keep in mind that "Advanced Mode" WILL have the CK right-click menu. That menu needs to live somewhere so that users working with tables will have access to it when needed. That's the trade off here.
Users will switch between Quick & Advanced modes using the radio buttons above the editor. Switching modes will be nearly instantaneous. And you will not lose the content you're drafting when switching modes! Also, whatever mode you choose will stick and follow you as a user preference.
Let's break down which functions would be available in which mode. I'll compare Quick and Advanced modes to the CK editor we have today. This should give you a pretty good picture of this proposal.
But wait there's more
The Editor is something we don't want to change too often, so we're looking to package a few more enhancements into the same release. These aren't necessarily related, we just want to do them at the same time.
There will be a button that allows the editor to go full screen, just like when you expand a YouTube video to fill your screen. This is an instantaneous change, unlike switching to the old "full page editor." Members who want some additional screen real estate to stretch out in should really like this new feature.
Have you ever noticed how messy things get when you copy and paste content into the editor? Below I've copied some text from another site and pasted it into the editor.
OCZ Vertex 450 256GB SSD Basics
Notice that it carries over the h3 style (including font size in pixels, to 14 decimal places of accuracy!!), the font face, text size and color and background color of the page itself. Even the line height is preserved from the CSS on the other site. Here's what it looks like in source mode (aka a mess):
The good news is that we're going to start doing something about this. Until now, the Editor has simply been too active in trying to preserve the styles of what it's pasting. We're going to begin screening out most typographic styles at the moment you paste. You'll still be able to apply typographic styles when you want to, but you won't find them stealing into your post as stowaways.
We're also ready to evolve the toolbar appearance a little bit. The hodgepodge of multicolored icons we use today doesn't really compliment any site skin, and in the mockups above you may have noticed a cleaner iconographic toolbar aesthetic.
Ever notice that what you see in the Editor's editing area isn't styled the same as the pages published on your site? We're changing the way this works so that the editor will be part of the page and use the same stylesheet as the page. This will result in much truer what-you-see-is-what-you-get fidelity. More faithful line spacing and text sizing, fonts, etc.