Ticket #7979 (confirmed Bug)

Opened 3 years ago

Last modified 6 weeks ago

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

comment:1 Changed 3 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 3 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 3 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 3 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 3 years ago by fbingha (previous) (diff)

comment:5 Changed 6 weeks 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 6 weeks ago by kimballrobinson (previous) (diff)

comment:6 Changed 6 weeks ago by kimballrobinson

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

comment:7 Changed 6 weeks ago by kimballrobinson

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

comment:8 Changed 6 weeks 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 6 weeks ago by kimballrobinson (previous) (diff)

comment:9 Changed 6 weeks ago by j.swiderski

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

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

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