Opened 6 years ago

Closed 5 years ago

#10896 closed Bug (invalid)

Text gets highlighted in read only controls in Firefox

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


I have a div with contenteditable set to false and it contains two more divs(image-menu-container and image-container) with contenteditable set to false. Second div is contains image and first div contains menu items for the image. When user select first time menu looks okay when user select again the text in menu gets highlited in Firefox. It is not Chrome and IE-10.

Attachments (2)

image_menu.png (12.8 KB) - added by abua 6 years ago.
imagemenusample.html (9.7 KB) - added by abua 5 years ago.
Sample page

Download all attachments as: .zip

Change History (10)

Changed 6 years ago by abua

Attachment: image_menu.png added

comment:1 Changed 6 years ago by abua

Summary: Text gets highlighted in FirefoxText gets highlighted in read only controls in Firefox
Version: 4.0

comment:2 Changed 6 years ago by Piotrek Koszuliński

Status: newpending

I don't understand what issue you're reporting. Could you create a sample and describe what are the steps to reproduce the issue and what's the expected result? Without this we won't be able to understand where's the problem and if there's a problem at all.

comment:3 Changed 6 years ago by Jakub Ś

Does this menu has any handlers applied? If it doesn't then it will be treated as plain text that on double click gets selected (e.g. word on double click).

  1. I'm not sure why you need contenteditable=false setting? Where is that menu used?
  2. Please provide reduced and working sample page so that we could see this problem on our own.

comment:4 Changed 5 years ago by abua

This menu is used for some operation on image and we want it to be read only so that user cant edit it. But there may be some caption text and that should be editable. Below is the html, css and jquery code used. We are using ckeditor's inline mode.


<div style="display: block;" class="block"><div class="block-overlay trigger-block-drag"><nav class="nav-right"><a class="act trigger-block-edit1"><span class="edit">Edit</span></a></nav></div><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td style="padding: 20px;"><div class="block-content block-image" style="color: rgb(66, 66, 66); font-family: sans-serif; font-size: 12px; font-weight: 400; font-style: normal; text-align: left; line-height: 1.25;" id="dynamicDiv1"><div class="image-caption-wrap"> <div contenteditable="false" style="position: relative;" class="image-block-wrap"> <div contenteditable="false" style="display: none;" class="subimage-block"> <div class="subimage-block-overlay">&nbsp;</div>

<div class="action-list"> <div class="setting">&nbsp;</div>


<li><a href="#">Change</a></li> <li><a href="#">Delete</a></li> <li class="sub"><a href="#">Add Caption</a> <ol>

<li><a href="#">Bottom Caption</a></li> <li><a href="#">Left Caption</a></li> <li><a href="#">Right Caption</a></li>

</ol> </li> <li class="sub"><a href="#">Alignment</a> <ol>

<li><a href="#">Left</a></li> <li><a href="#">Right</a></li> <li><a href="#">Center</a></li>

</ol> </li> <li><a href="#" class="checkable">Edge to Edge</a></li> <li><a href="#">Default Size</a></li> <li><a href="#">Add / Edit Link</a></li>

</ul> </div> </div>

<div contenteditable="false" class="image-container"><img contenteditable="false" src="" default-size="420§315" class="image-preview"></div> </div>

<div style="clear:both;" class="caption-wrap bottom-caption"> <div style="padding-top:20px;" class="caption"> <p>This is bottom caption for the above image. This is editable area.</p> </div> </div> </div> </div></td></tr></tbody></table></div>


.block {

display: block; height: 100%; width: 90%; position: relative;

} .block .block-overlay {

display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2;

} .block:hover .block-overlay {

border: 2px solid #626262; border-radius: 2px; left: -2px; top: -2px; display: block !important; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);

} .block .block-overlay .nav-right {

position: absolute; right: -2px; top: 0px;


.block .block-overlay a {

background: none repeat scroll 0 0 #2D2D2D; border-radius: 0 0 0 0 !important; cursor: pointer; display: none; float: left; height: 30px; margin-right: 2px; opacity: 0.75; position: relative; width: 44px; z-index: 2;

} .block:hover .block-overlay a {

display: block;

} .block .block-overlay a:hover {

background-color: #2d2d2d; opacity: 1; filter: alpha(opacity=100);

} .block .block-overlay a span {

width: 20px; height: 20px; display: block; float: left; margin: 5px 12px;


JQuery code:

$(document).ready(function(){ $('.trigger-block-edit1 .edit').live("click", function (e) {

try {


Get block & element var block = $(this).closest('.block'); var element = block.find('.block-content'); Set inline editing on this element var elementId = element.attr("id"); element.attr("contenteditable", "true"); var editor = CKEDITOR.inline(elementId, { toolbar: 'ebuilder' }); editor.config.extraPlugins = 'Media'; editor.on("blur", function () { return false; }); editor.on("instanceReady", function () {

$('.' + + ).animate({ marginTop: '39' }, 250);


Hide block overlay $(this).parent().parent().hide();


} catch (ex) { alert(ex.message); }



comment:5 Changed 5 years ago by Jakub Ś


Could I perhaps ask you to put a little more effort into this? I was talking about reduced HTML sample that can for example put in samples folder of default editor and will show this bug.
The reason for this is that instead we should work on the same code that is causing problems for you and not guess what author had in mind (e.g. here we have no idea which jQuery version you use).

Please provide reduced and WORKING sample - some file(s) that can be put in samples folder and will show this issue.

Changed 5 years ago by abua

Attachment: imagemenusample.html added

Sample page

comment:6 Changed 5 years ago by abua

I have attached the page named "Sample page". You can check in major browser and can replicate the problem on Firefox by following these steps.
1: Hover mouse on image, it will show black border around the block.
2: Click on "Edit" button on right top. It will apply inline editing on the block.
3: Hover the mouse on image, it will show a small blackish area on left top of the image.
4: Click on it to see the menu for different actions on the image.
5: If not found, click any where on the page except on the image and repeat step 3 & 4.

Please let me know if you require any other specification.

Last edited 5 years ago by abua (previous) (diff)

comment:7 Changed 5 years ago by Jakub Ś

Thanks for the sample - I have tried your code in win 7 and Firefox 24 but didn't get this selection problem. After clicking on menu it is closed.

Could you perhaps tell me how to get this selection effect?

comment:8 Changed 5 years ago by Piotrek Koszuliński

Resolution: invalid
Status: pendingclosed

I can reproduce the problem, but it's not a bug. At least not in CKEditor. This is how FF apparently works and you should handle this on your side. However, I know how hard it is to work with non-editable content, because I encountered a lot of problems during works on #9764. It requires very deep knowledge about contenteditable, DOM, focus, etc. to deal with them, so if you're not experienced enough I'd advise you to avoid using non-editable content inside editable.

PS. Check the Widgets System, which we introduced recently in CKEditor 4.3 Beta. It makes use of non-editable containers and it may help you in solving your problem.

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