EpicSki › The Barking Bear Forums › EpicSki Community › Community Discussions & Forum News › The Text Editor is Getting an Upgrade
New Posts  All Forums:Forum Nav:

The Text Editor is Getting an Upgrade

post #1 of 12
Thread Starter 

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:

 

Quote:
Huddler is upgrading to the latest version of CK Editor, which powers the Rich Text Editor (RTE) on our site. The new version of the RTE will have two modes. Quick Mode is light and simple, with a streamlined toolbar, and won't interfere with your browser's right-click menu. Advanced Mode will have a fuller set of editing tools, including some new features that have never been in the RTE before. Switching between Quick/Advanced will be easy and instant, and whichever mode you used last will "stick" for you without having to set any preferences. This is an upgrade to the Rich Text Editor only. Aside from a minor facelift of the toolbar icons, the BBCode Editor will not be affected."

 

 

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. 

 

 

 

 

 

 

In Summary

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.

 

Maximize Editor

 

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. 

 

 

 

Copy/Paste Filtering

 

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.

 

 

Quote:

OCZ Vertex 450 256GB SSD Basics

 

 

The business climate for OCZ has been brutal since the departure of its previous CEO left the company in shambles. Recovering from the damage has been a journey for OCZ, and one that isn't entirely completed. Dealing with the realities of the SSD market has left OCZ in the center of a whirlwind of change as it fights to re-image itself in order to survive.

 

 

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):

 

<h3 style="font-size: 17.33333396911621px; border: 0px solid red; background-image: none; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); font-family: arial, sans-serif; line-height: 18px;"><b>OCZ Vertex 450 256GB SSD Basics</b></h3>
<p style="border: 0px solid red; color: rgb(255, 255, 255); font-family: arial, sans-serif; font-size: 14px; line-height: 18px; background-color: rgb(0, 0, 0);">
 
If you've ever ventured into Source mode in CK Editor you know that the HTML can be pretty hairy, and copy/paste is a big offender. A lot of times, your post is coming along fine, and then 1 copy/paste operation sends everything to hell. Even copying and pasting from a page on the same site can lead to this kind of markup - or even within the editor itself. Anybody been there? I sure have. 

 

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.

 

 

Toolbar Styling

 

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. 

 

 

Truer WYSIWYG

 

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.

post #2 of 12

why does this thread ask for username and password in a popup dialog box?

post #3 of 12
Thread Starter 
Quote:
Originally Posted by cantunamunch View Post

why does this thread ask for username and password in a popup dialog box?

I pulled it from Huddlers site which is on a password protected server. I thought I reuploaded all the pics but I must have missed one. Is there a particular image not loading for you?
post #4 of 12

can't tell - i have to block all images for ease of loading.

post #5 of 12
Basically, I get asked REPEATEDLY to log in, tried logging in, got asked again, finally kept hitting Cancel, got the thread. But NONE OF THE ICONS (I assume) on the grid show up. Just that broken picture link in every cell.
post #6 of 12
Quote:
Originally Posted by sibhusky View Post

Basically, I get asked REPEATEDLY to log in, tried logging in, got asked again, finally kept hitting Cancel, got the thread. But NONE OF THE ICONS (I assume) on the grid show up. Just that broken picture link in every cell.

Same here.  The dialog box says:

 

"To view this page, you must log in to area “Restricted” on partners.huddler.com:80."

 

I see some images in Post #1.  The Summary Table is all question marks where the Yes/No info should be.

post #7 of 12
Thread Starter 
Ill fix it as soon as I get back to my laptop. I looked at the HTML and I did reupload all the pics, but the smileys were pointing back to the Huddlers server instead of the Epic server.
post #8 of 12
Thread Starter 
Quote:
Originally Posted by cantunamunch View Post

why does this thread ask for username and password in a popup dialog box?

 

Quote:
Originally Posted by cantunamunch View Post

can't tell - i have to block all images for ease of loading.

 

Quote:
Originally Posted by sibhusky View Post

Basically, I get asked REPEATEDLY to log in, tried logging in, got asked again, finally kept hitting Cancel, got the thread. But NONE OF THE ICONS (I assume) on the grid show up. Just that broken picture link in every cell.

 

Quote:
Originally Posted by marznc View Post

Quote:
Originally Posted by sibhusky View Post

Basically, I get asked REPEATEDLY to log in, tried logging in, got asked again, finally kept hitting Cancel, got the thread. But NONE OF THE ICONS (I assume) on the grid show up. Just that broken picture link in every cell.

Same here.  The dialog box says:

 

"To view this page, you must log in to area “Restricted” on partners.huddler.com:80."

 

I see some images in Post #1.  The Summary Table is all question marks where the Yes/No info should be.

 

It's fixed now. Sorry about that. 

post #9 of 12
Quote:

It's fixed now. Sorry about that. 

No problem.  Guess these days "Y" and "N" are too ambiguous. wink.gif

post #10 of 12
Thread Starter 

Just a brief update. Huddler is expecting to roll out this change on August 28th. 

post #11 of 12
Thread Starter 

Still planning to be released on Wednesday, check out this article that summarizes all the major changes. 

post #12 of 12

I'm just lazy with my ione finga typiung. If the puter gave me an electric shok imight get betterr. wink.gif

New Posts  All Forums:Forum Nav:
  Return Home
EpicSki › The Barking Bear Forums › EpicSki Community › Community Discussions & Forum News › The Text Editor is Getting an Upgrade