Updating The BYC "Rich Text" Editor - Spell Check Fix, etc.

Discussion in 'Announcements, Feedback, Issues, & Guides' started by Nifty-Chicken, Jul 29, 2013.

  1. Nifty-Chicken

    Nifty-Chicken Administrator

    Hey everybody! in a few weeks we're going to be upgrading to the latest version of the CK Editor, which powers the Rich Text Editor (RTE) on our site that allows you to reply to posts.

    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.

    A little backstory...


    What is CK Editor, you may ask? Well, it's a third-party product which we license and embed in the page to give users rich WYSIWYG content editing capabilities. It's what I used to type this post, and it's what you'll probably use to type your reply. With the exception of BBCode users, CK Editor is the window through which all incoming new content, the lifeblood of our businesses, is created.

    Why do we use a third-party editor? Put simply: it's a case of not reinventing the wheel. We use many 3rd party products to power BYC. We didn't write our own web server: we use Apache. We didn't create our own database software: we use PostgreSQL. Similarly, we have not written our own WYSIWYG editor from the ground up: we use CK Editor.

    Creating a WYSIWYG editing experience inside a web browser is a difficult task, and keeping it working in all browsers is even more work. Various teams have produced quality editors over the years: you may have used or heard of TinyMCE or some others. CK has been around over 10 years, and we originally chose it because it offered the most functionality, including things like WYSIWYG table building and a plug-in architecture.

    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:


    [​IMG]



    Here's what the Editor will look like in Quick Mode. 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:


    [​IMG]



    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.

    "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 can switch between Quick & Advanced modes. 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.

    Here's a mockup of what "Advanced Mode" will look like:

    [​IMG]


    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.

    Quick Mode
    Today's CK Editor
    Advanced Mode
    CK Right-Click Menu
    NO
    YES
    YES
    Source Mode
    [​IMG]
    [​IMG]
    [​IMG]
    Text Format (H1, etc)
    [​IMG]
    [​IMG]
    [​IMG]
    Text Size
    [​IMG]
    [​IMG]
    [​IMG]
    Text Color
    [​IMG]
    [​IMG]
    [​IMG]
    Bold, Italic, Underline
    [​IMG]
    [​IMG]
    [​IMG]
    Strikethrough
    [​IMG]
    [​IMG]
    [​IMG]
    Subscript / Superscript
    [​IMG]
    [​IMG]
    [​IMG]
    Remove Text Styles
    [​IMG]
    [​IMG]
    [​IMG]
    Link / Unlink
    [​IMG]
    [​IMG]
    [​IMG]
    Anchor
    [​IMG]
    [​IMG]
    [​IMG]
    Bulleted / # Lists
    [​IMG]
    [​IMG]
    [​IMG]
    + / - List Level
    [​IMG]
    [​IMG]
    [​IMG]
    Justification options
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Image
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Video
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Table
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Horizontal Rule
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Special Character
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Smiley
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Quote Block
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Attachment
    [​IMG]
    [​IMG]
    [​IMG]
    Insert Spoiler
    [​IMG]
    [​IMG]
    [​IMG]
    Cut/Copy/Paste
    [​IMG]
    [​IMG]
    [​IMG]
    Paste as Plain Text
    [​IMG]
    [​IMG]
    [​IMG]
    Paste from MS Word
    [​IMG]
    [​IMG]
    [​IMG]
    Undo / Redo
    [​IMG]
    [​IMG]
    [​IMG]
    Find Text
    [​IMG]
    [​IMG]
    [​IMG]
    Find / Replace Text
    [​IMG]
    [​IMG]
    [​IMG]
    Maximize Editor
    [​IMG]
    [​IMG]
    [​IMG]

    Again, these changes to the editor won't happen for a few weeks, but we wanted to give everyone a head's-up well in advance!
     
    Last edited: Jul 29, 2013
  2. Mr MKK FARMS

    Mr MKK FARMS Crowing

    33,754
    757
    446
    Sep 27, 2012
    Nice!
     

BackYard Chickens is proudly sponsored by: