Opened 13 years ago

Closed 9 years ago

#7979 closed Bug (duplicate)

iframe body height causes problem with right click menu.

Reported by: Freddie Bingham Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc:

Description

  1. Disable the contextmenu plugin
  2. Open an empty editor.
  3. Create a line of text.

In (at least) IE and FF, right click on this text and observe the menu. You see the cut/copy/paste/undo options. Their state is unimportant.

Now go to the bottom area of the editor and right click on the blank space. Now you see a different menu, this one has the back/forward/print commands. The options vary between browsers but it is a different menu than the first.

This is confusing for users as they expect to see the text editing menu regardless of where they right click within the editor. I need not right click on an existing area of text to be able to paste within the editor.

This happens because the body element is as only high as the entered text. Clicking underneath the body element sends the click to the HTML document, not the body. This bug has been brought up before but in regards to left click not bringing focus to the editor.

Change History (11)

comment:1 Changed 13 years ago by Freddie Bingham

The related issue is at http://dev.ckeditor.com/ticket/1659

I have not modified the default doctype.

comment:2 Changed 13 years ago by Jakub Ś

Status: newconfirmed
Version: 3.0

The native context menu is displayed from CKEditor 3.5 (Before you could only see it using CRTL+right-click, despite removed plug-in).

But the body is as high as its content from CKEditor 3.0.

comment:3 Changed 13 years ago by Freddie Bingham

I suspect that the CKEditor is performing an operation that is causing this state. I have checked other editors and find that they also have a body element that is only as tall as the text within but there you can right click anywhere on the iframe and see the expected popup. http://developer.yahoo.com/yui/examples/editor/switch_editor.html for example.

comment:4 Changed 13 years ago by Freddie Bingham

.. and I've noticed that adding this:

editor.document.on( 'contextmenu', function(e) {

alert(1);

});

and clicking at the bottom of the editor, where there is not text, results in an alert followed by the proper context menu with undo/cut/copy/paste

Remove the alert, then proceed to right click extremely fast on the bottom portion of the editor with no text and you will occasionally see the undo/cut/copy/past menu appear.

Seems like a click event is stealing the action here.

Firefox 3.6

Last edited 13 years ago by Freddie Bingham (previous) (diff)

comment:5 Changed 10 years ago by Kimball Robinson

I'm still seeing this problem with CKEditor 4.4.2 (revision 1567b48)

This really needs to be fixed. +1/+Like/bump/+upvote

Last edited 10 years ago by Kimball Robinson (previous) (diff)

comment:6 Changed 10 years ago by Kimball Robinson

Component: GeneralUI : Context Menu
Keywords: mouse context-menu added
Version: 3.04.4.2

comment:7 Changed 10 years ago by Kimball Robinson

Version: 4.4.24.4.4 (GitHub - master)

comment:8 Changed 10 years ago by Kimball Robinson

I checked this at http://nightly.ckeditor.com/14-07-17-06-05/full/samples/replacebyclass.html and see the same problem, version 4.4.4.

This has to do with the fact that the <body> element inside the ckeditor iframe doesn't take up the entire visible area, and the event handling seems to be on the body element.

This could be improved by expanding the body element to take up the entire IFrame. Here's some proof-of-concept CSS that could be improved upon:

/* CSS rules outside the iframe */
#cke_contents iframe {
    width: 100%;
    height: 100%;
}

/* CSS rules for inside the ckeditor iframe */
html {

    height: 100%;
}

body.cke_editable {
    min-height: 95%;
    width: 96%;
    min-height: calc(100% - 20px);
    width: calc(100% - 2em);
    margin: 0 1em 0 1em;
    top: 0;
    position: absolute;
    /*background: #eee;*/
    /*border: 1px solid red;*/
}

Last edited 10 years ago by Kimball Robinson (previous) (diff)

comment:9 Changed 10 years ago by Jakub Ś

Component: UI : Context MenuGeneral
Keywords: mouse context-menu removed
Version: 4.4.4 (GitHub - master)3.0

@kimballrobinson, Version is used to indicate when problem started. Please don't chnage this value.

comment:10 Changed 9 years ago by Jakub Ś

#8286 was marked as duplicate.

comment:11 Changed 9 years ago by Jakub Ś

Resolution: duplicate
Status: confirmedclosed

I'm closing this ticket as duplicate of #10169 as the former one links to other tickets.

I will however link comment:8 which contains proof of concept for fixing this problem.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy