Opened 6 years ago

Closed 6 years ago

#9761 closed Bug (fixed)

setReadOnly(false) doesn't activate backspace keystroke

Reported by: limuhob Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.1.2
Component: Core : Editable Version: 4.0 Beta
Keywords: IBM Cc: jeremie@…, jan_wloka@…, joel.peltonen@…

Description (last modified by Jakub Ś)

Hi guys,

if an editor is read only, then the backspace key is blocked by this code: keystrokeHandler.blockedKeystrokes[ 8 ] = editor.readOnly;

However if I change a readOnly mode by calling the setReadOnly(false) function later, the backspace key is still blocked.

Maybe it is a good idea to active the backspace key if setReadOnly(false) is called.


Edited:
Please see comment:12 and comment:13 for explanation of this problem.

Issue can be reproduced in all browsers from CKEditor 4.0 beta.

Attachments (3)

THISTEST.html (723 bytes) - added by Joel 6 years ago.
Simple TC where the bug appears
bug.html (1.2 KB) - added by ianllewellyn 6 years ago.
comparing contenteditable attribute
body-content-bg.gif (184 bytes) - added by Slavon 5 years ago.
www.bubblews.com

Download all attachments as: .zip

Change History (24)

comment:1 Changed 6 years ago by Jakub Ś

Status: newpending

I have just checked readOnly sample in latest editor 4.0 and didn't get this problem - backspace is working as expected.

In which browsers were you getting this problem, what are steps to reproduce this, what is the code that is causing this and can this problem be reproduced in latest editor 4.0?

comment:2 in reply to:  1 Changed 6 years ago by limuhob

Replying to j.swiderski:

I have just checked readOnly sample in latest editor 4.0 and didn't get this problem - backspace is working as expected.

In which browsers were you getting this problem, what are steps to reproduce this, what is the code that is causing this and can this problem be reproduced in latest editor 4.0?

Problem is in google chrome 23 on linux. Same problem in the latest editor 4.0. Sample code is here. Sorry for jquery:

<head>
<script>
           
            $(document).ready(function(){
                
                var $editme = $("#editor1");
                var editor = CKEDITOR.inline($editme.get(0));
                //hide contenteditable and make editor readOnly
                $editme.hide();

                $("#activate").bind("click", function(e){
                    //show contenteditable and make editor writable
                    $editme.show();
                    editor.setReadOnly(false);
                    //now backspace doesn't work
                });
            });

        </script>

    </head>
    <body>
        <input id="activate" type="button" value="activate editable"/>
        <div id="editor1" contenteditable="true">
            sample
        </div>
    </body>

comment:3 Changed 6 years ago by Jeremie Miserez

I can confirm this bug on Windows 7 with Chrome 23.0.1271.95m, CKEditor 4.0 "Full" Release. It does not occur on IE9 or Firefox.

Specifically, I have this issue with a (huge) dynamic web application with multiple inline CKEditor instances, one of which is created in a DOM tree which is not attached to the document. When this tree is then attached to the document, the setReadOnly(false) indeed does not change the backspace handling back to normal.

So in my code, I was able to fix this issue using the following code (_editor is my CKEDITOR.editor instance)

setReadOnly: function(readOnly) {
    if (this._editor.readOnly !== readOnly) {
        this._editor.setReadOnly(readOnly);
        if (!readOnly) {
            delete this._editor.keystrokeHandler.blockedKeystrokes["8"]; //8 is Backspace
        }
    }
}

I will try to investigate this further, as it is impossible for me to give you a short testcase.

Last edited 6 years ago by Jeremie Miserez (previous) (diff)

comment:4 Changed 6 years ago by Jeremie Miserez

Cc: jeremie@… added
Type: New FeatureBug
Version: 4.0 Beta4.0

comment:5 Changed 6 years ago by Jan Wloka

Cc: jan_wloka@… added

Subscribed.

comment:6 Changed 6 years ago by Jakub Ś

Cc: jan_wloka@… removed
Resolution: invalid
Status: pendingclosed

I have tried to reproduce this issue but with on luck.

@limuhob one thing I have noticed - beside code being incomplete is that you should rather set editor to readOnly on instanceReady event. That way it has always worked for me without problems.

 var $editme = $("#editable");
				$editme.attr('contenteditable', true);
				CKEDITOR.disableAutoInline = true;
                var editor = CKEDITOR.inline($editme.get(0));
                //hide contenteditable and make editor readOnly
				editor.on('instanceReady', function(ev){	
					editor.setReadOnly(true);
					$editme.hide();
				});

                $("#activate").bind("click", function(e){
                    //show contenteditable and make editor writable
                   	$editme.show();
					editor.setReadOnly(false);
                    //now backspace doesn't work
					
                });

I'm closing this issue as invalid. If you guys are able to provide working and reduced sample file that shows this problem please do so and I will reopen this issue.

comment:7 Changed 6 years ago by Krzysztof K.

I can confirm this bug on chrome/safari. This bug is related to "auto readonly" feature on contenteditable/inline.

To reproduce simply... Create a page with jqueryUI tabs.

Place an inline editor on each page (div). Then call CKEDITOR.inline(); Now initialize tabs().

If you switch to second tab (the hidden one) the editor will be readOnly, so i have a change-tab callback...

activate: function( event, ui ) {

if ( _.aFeaturedDialogWysiwygEditors ) {

for ( var i in _.aFeaturedDialogWysiwygEditors ) {

try {

this is the result of CKEDITOR.inline _.aFeaturedDialogWysiwygEditors[i].setReadOnly( false );

if ( _.aFeaturedDialogWysiwygEditors[i].keystrokeHandler && _.aFeaturedDialogWysiwygEditors[i].keystrokeHandler.blockedKeystrokes && '8' in _.aFeaturedDialogWysiwygEditors[i].keystrokeHandler.blockedKeystrokes )

delete _.aFeaturedDialogWysiwygEditors[i].keystrokeHandler.blockedKeystrokes8?;

}

catch ( e ) { }

}

}

...

}

comment:8 Changed 6 years ago by Jakub Ś

@dynamicplus instead of me creating files and guessing what you had in mind could you please create sample test page that show the problem (HTML page that can be put in samples folder and will show the bug (jquery can be imported from Google code) ).

That way we will be working on the same code.


You have written:

If you switch to second tab (the hidden one) the editor will be readOnly

This may have something to do with - http://dev.ckeditor.com/ticket/9835#comment:2 (This works in elements available on page)

Please provide the sample so that I could see code you are having problems with and base on it I will be able to tell more.

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:9 Changed 6 years ago by Jan Wloka

Cc: jan_wloka@… added
Keywords: IBM added

comment:10 Changed 6 years ago by Joel

Cc: joel.peltonen@… added

subscribed

Changed 6 years ago by Joel

Attachment: THISTEST.html added

Simple TC where the bug appears

comment:11 Changed 6 years ago by Joel

This should not be closed. This is a very common error for and I just now nailed it down what caused it for me. Here is a sample of of how to reproduce it very simply.

  1. Download the attached sample THISTEST.html, add to 4.1 samples folder
  2. Open in IE9, allow it to run the script
  3. Click "Unleash" button ad awd w ad awd awd awd a
  4. Click some text
  5. Press Backspace; does not work

Also reproducible in http://ckeditor.com/demo

  1. Go to demo with IE9
  2. Open developer console; input the following commands individually
  3. editor.setReadOnly();
  4. editor.setData("<p>foo</p>");
  5. editor.setReadOnly(false);
Last edited 6 years ago by Joel (previous) (diff)

comment:12 Changed 6 years ago by Joel

Sorry to spam you all, but I found a workaround. In my example, the following fails:

function derp() {
	editor.setData("<p>Lorem ipsum dolor sit amet</p>", function() {
		editor.setReadOnly(false);
	});
}

But the following works:

function derp() {
	editor.setReadOnly(false);
	editor.setData("<p>Lorem ipsum dolor sit amet</p>", function() {
		editor.setReadOnly(false);
	});
}

Meaning that the bug is very closely related to setData and not just setReadOnly. For now, it is safe to setReadOnly before setting readOnly to false, if possible for you.

comment:13 Changed 6 years ago by Jakub Ś

Resolution: invalid
Status: closedreopened

comment:14 Changed 6 years ago by Jakub Ś

Description: modified (diff)
Status: reopenedconfirmed
Version: 4.04.0 Beta

comment:15 Changed 6 years ago by Jeff Duty

I can confirm in FF 20.0.1 and IE 9.0.8112.16421.

Any word on this? Rather hard to get the staff to use the tool if backspace is broken.

comment:16 Changed 6 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 4.1.2

Changed 6 years ago by ianllewellyn

Attachment: bug.html added

comparing contenteditable attribute

comment:17 Changed 6 years ago by ianllewellyn

I've recently been looking into this issue as I've run into it in chrome on OSX. I've isolated it to a specific case:

If I use CKEDITOR.inline() on an element with contenteditable="true" then I can use CKEDITOR.setReadOnly(false) and backspace will work.

If however I use CKEDITOR.inline() on an element that does not have contenteditable="true" then CKEDITOR.setReadOnly(false) will leave the backspace key blocked in the keystrokeHandler.blockedKeystrokes hash.

I've attached bug.html which can be dropped into the ckeditor samples dir, this replicates the two situations described above.

comment:18 Changed 6 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedassigned

comment:19 Changed 6 years ago by Olek Nowodziński

Status: assignedreview

DEV: Created fix in t/9761 branch.

TESTS: Added tests for BACKSPACE key behavior and mt for the ticket.

comment:20 Changed 6 years ago by Frederico Caldeira Knabben

Status: reviewreview_passed

comment:21 Changed 6 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed

Merged into master: git:3b38fe9c4e0f6e (dev), a6c66688723eab60 (tests).

Changed 5 years ago by Slavon

Attachment: body-content-bg.gif added
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy