setReadOnly hides entire editor

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Call setReadOnly() method of CKEditorTextField

What is the expected output? What do you see instead?
CKEditor API has CKEDITOR.editor.setReadOnly which grays out buttons and 
prevents editing which would be expected result. Instead wrapper hides the 
visibility of the entire editor component.

What version of the product are you using? On what operating system?
Vaadin CKEditor Wrapper 1.6.7
Vaadin 6.8.2
Tomcat 7.0
OSX 10.8.2

Please provide any additional information below.

Sample app to demonstrate behavior
package com.example.helloworld;

import org.vaadin.openesignforms.ckeditor.CKEditorTextField;

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;

public class HelloworldApplication extends Application {
    @Override
    public void init() {
        Window mainWindow = new Window("Helloworld Application");
        final CKEditorTextField textField = new CKEditorTextField();
        Label label = new Label("CKEditor should appear right below me");
        Button btn = new Button("Toggle read only");
        btn.addListener(new Button.ClickListener() {
                    private boolean toggle = true;
                    @Override
                    public void buttonClick(ClickEvent event) {                
                        textField.setReadOnly(toggle);
                        toggle = !toggle;
                    }
                });

        mainWindow.addComponent(btn);
        mainWindow.addComponent(label);     
        mainWindow.addComponent(textField);
        setMainWindow(mainWindow);
    }
}

Original issue reported on code.google.com by sam...@vaadin.com on 19 Nov 2012 at 11:39

[GoogleCodeExporter]

Thanks for the report. I've not tried out your code, but of course you can see 
this also on our main demo:

https://open.esignforms.com/VaadinCKEditor/

It appears that the setReadOnly option only became available in the 3.6 version 
of CKEditor, which predates our original code. The current functionality is 
that the editor is removed and the contents of the editor are displayed instead 
(which of course is essentially read-only for the HTML that is in the field).

We'll take a look at the editor's read only function and see how it works.  I 
am mostly worried about issues with existing code that may expect the read-only 
editor to work as it was originally designed.  If we switch to the CKEditor's 
new ability, we'll perhaps create another method that will allow the current 
behavior (setViewEditor?) so that those who need it can at least get to it.

Original comment by yoz...@gmail.com on 19 Nov 2012 at 6:47

• Changed state: Accepted

[GoogleCodeExporter]

We are looking into this, but found that while the editor's buttons seem to be 
grayed out when in read-only mode, I was still able to remove/add text into the 
editor area itself. Have you used CKEditor in readonly mode to know if that's 
how it "works" or not?

It does seem that the SOURCE mode blocks changes, but the WYSIWYG mode allows 
changes to be made even though most buttons are disabled.

Not sure what to make of it. I hate to have to code around it not really 
working (like setting the contents back every time they turn read only mode off 
so it's reset back to our last value).  Any thoughts on your end since you are 
requesting this?

Original comment by yoz...@gmail.com on 20 Nov 2012 at 12:35

[GoogleCodeExporter]

So you can see what we have, check out the online demo.  The read-only button 
toggles the new ckeditor readOnly attribute, while the toggle 
'view-without-editor' button does what the previous readonly feature did.

Note that when it's read-only, the editor is set correctly 
(CKEDITOR.instances.editor1.readOnly shows true/false as expected) and the 
buttons look good, but I still get the INSERTION bar in the editor area itself, 
and I can DELETE text, etc. using our code:

http://open.esignforms.com/VaadinCKEditor/

Yet CKEditor has an example that seems to work as expected (no insertion bar is 
even allowed):

http://nightly.ckeditor.com/7660/_samples/readonly.html

The only difference I can see is that they use a TEXTAREA for the editor to 
replace while we use a DIV. 

Original comment by yoz...@gmail.com on 20 Nov 2012 at 1:53

[GoogleCodeExporter]

Added a query to the CKEditor forums (which sadly rarely come with an answer, 
but sometimes you get lucky!):

http://cksource.com/forums/viewtopic.php?f=6&t=27638

Original comment by yoz...@gmail.com on 20 Nov 2012 at 2:19

[GoogleCodeExporter]

Thanks for your efforts. I wrote as a workaround, a custom CKEditor plugin that 
invokes CKEDITOR.editor.setReadOnly() directly and noticed the same thing. 
Editing area stays editable despite the read only flag. Looking at the CK's 
wysiwygarea plugin there seems to be a whole bunch of references to textarea 
elements. Havent' dig that deep to say whether it could work with divs by 
simply patching the plugin. 

Original comment by sam...@vaadin.com on 20 Nov 2012 at 8:11

[GoogleCodeExporter]

Tough timing luck, too, since the CKEditor forum says today, "Due to technical 
reasons, the forum has been partially disabled until Thursday, November 22.
The posting and editing features have been temporarily disabled."

You'd think since CKEditor replaces the TEXTAREA or is appended to the DIV, the 
resulting sub-DOM created for the editor would otherwise be the same.  We can 
possibly work around this on our end such then whenever read-only is turned 
off, we also send the HTML so any changes that were "inadvertently" done would 
not matter, but we'll wait a bit and see if there are any other options we can 
pursue.

Original comment by yoz...@gmail.com on 20 Nov 2012 at 7:36

[GoogleCodeExporter]

The demo system is running a version that still suffers the CKEditor bug 
itself, but it should work as we essentially reset the editor contents when 
switching back to edit mode so any changes made when in read-only mode are not 
kept. 

Original comment by yoz...@gmail.com on 20 Nov 2012 at 10:59

• Changed state: Started

[GoogleCodeExporter]

This appears to be working under CKEditor 4.0, so we bundled this along with 
that editor upgrade.

Original comment by yoz...@gmail.com on 30 Nov 2012 at 3:00

• Changed state: Fixed