Opened 5 years ago

Closed 3 years ago

#8846 closed New Feature (fixed)

"Magic Box" to help moving the caret to hard/impossible to reach spaces

Reported by: fredck Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:


There is a general problem in the editor, which is related to the impossibility of placing the caret for typing between some block elements (like <table> or <hr>) or at the top of the contents, if the first element is one of these elements.

The proposed solution is showing a "magic box" when the user moves the mouse over the limits of these blocks. I'm attaching a page that illustrates the idea.

We should eventually come with a similar solution for keyboard navigation as well.

Attachments (2)

magic_box.html (1.5 KB) - added by fredck 5 years ago.
Rough sample illustrating the idea
magic_box_sample.png (7.1 KB) - added by fredck 5 years ago.
Screenshot of the sample page

Download all attachments as: .zip

Change History (7)

Changed 5 years ago by fredck

Rough sample illustrating the idea

Changed 5 years ago by fredck

Screenshot of the sample page

comment:1 Changed 5 years ago by fredck

I've attached a rough sample to illustrate the idea. An image exemplifying the behavior when moving the mouse in between the tables can be found attached as well.

The sample has in any way the intention to propose a way to implement it. It's just hackery to exemplify the behavior and even for this need it is still far from perfect.

comment:2 Changed 5 years ago by fredck

Another nice benefit of this proposal is that we would be able to remove the current "padding block" feature of the editor, making the code cleaner and less prone to bugs. It would also avoid having unwanted <p> elements laying in the resulting HTML.

comment:3 Changed 5 years ago by wwalc

Sounds like a nice idea.

Since we're collecting ideas right now, another possible use case: editing nested block elements. Right now it's not only hard to exit block elements (#6847), but also to edit them.

The "Magic Box" could be particularly useful with "Show Blocks" enabled. This way editing even something as hard as

<div class="div1">
	<div class="div2">

(with no styles for div1 and div2 in contents.css) would be doable.

Right now, even if in wysiwyg mode user can recognize visually nested divs, they hardly can be edited:

<div class="div1" style="border:1px solid red;padding:20px !important">
	<div class="div2" style="border:1px solid green;padding:20px !important">

(try adding content at the top of "div2", inside "div1"). With "Magic Box" it could be easily doable.

comment:4 Changed 5 years ago by j.swiderski

  • Status changed from new to confirmed

Looks great even in that simple sample file.

comment:5 Changed 3 years ago by Reinmar

  • Resolution set to fixed
  • Status changed from confirmed to closed

Fixed in CKEditor 4.0:

Note: See TracTickets for help on using tickets.
© 2003 – 2016 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy