Text gets highlighted in read only controls in Firefox

[abua]

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.

[Piotrek Koszuliński]

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.

[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.

[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.

html

<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>

<ul>

<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="​http://blogs.ubc.ca/CourseBlogSample01/wp-content/themes/thesis/rotator/sample-1.jpg" 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>

css:

.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 {

e.stopPropagation();

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 () {

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

});

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

element.focus();

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

});

});

[Jakub Ś]

Hi,

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.

[abua]

Sample page

[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.

[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?

[Piotrek Koszuliński]

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. ​http://ckeditor.com/blog/CKEditor-4.3-Beta-Released It makes use of non-editable containers and it may help you in solving your problem.