Opened 4 years ago

Closed 9 months ago

#7979 closed Bug (duplicate)

iframe body height causes problem with right click menu.

Reported by: fbingha 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 4 years ago by fbingha

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

I have not modified the default doctype.

comment:2 Changed 4 years ago by j.swiderski

  • Status changed from new to confirmed
  • Version set to 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 4 years ago by fbingha

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 4 years ago by fbingha

.. 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 4 years ago by fbingha (previous) (diff)

comment:5 Changed 14 months ago by kimballrobinson

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 14 months ago by kimballrobinson (previous) (diff)

comment:6 Changed 14 months ago by kimballrobinson

  • Component changed from General to UI : Context Menu
  • Keywords mouse context-menu added
  • Version changed from 3.0 to 4.4.2

comment:7 Changed 14 months ago by kimballrobinson

  • Version changed from 4.4.2 to 4.4.4 (GitHub - master)

comment:8 Changed 14 months ago by kimballrobinson

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 14 months ago by kimballrobinson (previous) (diff)

comment:9 Changed 14 months ago by j.swiderski

  • Component changed from UI : Context Menu to General
  • Keywords mouse context-menu removed
  • Version changed from 4.4.4 (GitHub - master) to 3.0

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

comment:10 Changed 9 months ago by j.swiderski

#8286 was marked as duplicate.

comment:11 Changed 9 months ago by j.swiderski

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

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 – 2015 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy