Child pages
  • [cms] Upgrading to CKEditor 4.2.0 & Inline Editing [5.3.0-B1]
Skip to end of metadata
Go to start of metadata

Recently new 4.2.0 version of CKEditor has been released. As of today In-Portal 5.2.1 (RC1) has been using same CKEditor 3.6.6 and corresponding CKFinder.

We are proposing to do the following:

  1. Upgrade both CKEditor (4.2.0 - and CKFinder (2.3.1 - to their latest versions in In-Portal 5.3.0 and create patches for In-Portal 5.2.1 in case some project built based on 5.2.x branch decides use it.
  2. Explore and introduce "Inline Editing" (demo: see screenshot below) capabilities instead of pop-up/modal window Editing as we have now.

Note we should be aware of 4.3.0 and 4.2.1 coming up not too long from now. Here is their roadmap

Related Tasks

INP-1300 - Getting issue details... STATUS

INP-1309 - Getting issue details... STATUS


  1. Alex let's explore how we can integrate Inline Editing feature in our Content Management keeping in mind features that we have. We are open discuss necessary changes so let's brainstorm first to see what CAN and CAN NOT be done.

  2. I think following approach would suffice:

    1. add "mode" parameter to <inp2:st_ContentBlock .../> tag, that can have 2 possible values:
      • popup - open editor in a popup/modal (works as now and will be default behavior)
      • inline - open editor inline
    2. keep existing controls and in place (button click or double click) where popup was opening we'll display inline editor
    3. add "Save" toolbar button to the editor
    4. on focus loss or "Save" button click save data to database and remove the editor
    1. Sounds like a plan!

      Let's also explore on options of showing different set of Toolbar buttons for different CMS blocks on the same page.

  3. I ended up with following plan (below the image) and implemented it.

    On the image (from top to bottom):

    • inline content block during editing process
    • inline content block that isn't edited right now
    • regular content block


    1. Content blocks can be of two types, which is controlled by mode parameter:
      1. popup - behave same as before (default value)
      2. inline - new type of blocks
    2. Inline blocks will:
      1. have edit icon (orange pencil) shown on the right instead of large button on the left
      2. start editing process (show toolbar and edit area) upon clicking anywhere in the content block
      3. save changes, when "save icon" (on toolbar) is clicked
      4. save changes, when user clicks elsewhere on a page
      5. don't save changes when "cancel icon" (on toolbar) is clicked
      6. support individual toolbar configuration per each content block (via toolbar parameter)