CKEditor readOnly problem

Flow
1

Best people of vaadin forum,

I have a problem with the setReadOnly function for the CKEditorTextField. I have posted this problem with detailed explanation and working test project in the following issue:

http://code.google.com/p/vaadin-ckeditor/issues/detail?id=33

Short version: Creating and adding a CKEditorTextField to a subwindow and setting readOnly in code does not disable the textarea below the styling. Only when setReadOnly is executed while CKEditor is already shown it works. This happened to be a forgotten use-case?

Also here provided my UI class java file that is the sole class needed for the test project. Do I use FormLayout or FieldGroup in the wrong way? Or is this really a problem with CKEditor?

Other source UI class :

http://pastebin.com/ZhTxhjD1

Thank you in advance!
13107.java (18.5 KB)

2

Not sure what is going on this case. We’ve seen this with the toggle read-only attribute on the demo too:

https://open.esignforms.com/Vaadin7CKEditor/?restartApplication

We’ve even noted that if we toggle the read-only on the second editor in the demo, and then retry on the first editor, it seems to eventually behave as you’d expect. But we don’t really understand if this is something we are doing or just an issue with CKEditor itself.

As you can see, the editor buttons and such seem to show they are in readonly mode, but not the editor region itself, though our code blocks updates when in readonly mode no matter what.

We do not control individual parts for readonly, we just set the editor to readonly or not.

Have you checked what the value of the editor’s readonly attribute is using your browser’s javascript debugger? What is odd to us is that it appears that the editor’s attribute is being set, but the editor itself does not always seem to obey it (though it does for the buttons and such). For example, the command CKEDITOR.instances will show you all editors you have. In our demo page, we have two named ‘editor1’ and ‘editor2’. If you check their read only status, it seems to be correct as we toggle them, yet the editor is not truly behaving as expected:

CKEDITOR.instances.editor1.readOnly
CKEDITOR.instances.editor1.getData() – use this to confirm the editor’s contents as which editor becomes ‘editor1’ is not fixed

What is odd with the demo system, too, is if you load the page, then click the set-read-only, it doesn’t seem to fully work (though the editor icons turn read-only). But if you click inside the editor area without making any changes, then click the set-read-only button, it seems to work fully.

If anybody has an ideas on how to fix, we’ll be happy to incorporate them.

3

Hi,

just discovered this issue as well. Here is a short example, to reproduce it. If the setReadOnly(true) is called, the editor looks like read only but you can enter the text. If you comment it out you can use the toggle button and everything seems to work fine (you cannot change the text if CKEditor is in the read only mode).

I feel like it is something in the initialization of the editor. Would it help to test with the configuration property “readonly=true” just to see how it will behave? Might be there is a Vaadin / GWT effect?

    public void init(VaadinRequest request) {

        VerticalLayout mainView = new VerticalLayout();
        setContent(mainView);

        final CKEditorTextField ckEditorTextField = new CKEditorTextField();

        ckEditorTextField1.setReadOnly(true);// 1

        Button toggleReadOnlyButton = new Button("Toggle read-only editor");
        toggleReadOnlyButton.addClickListener(new Button.ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                ckEditorTextField.setReadOnly(!ckEditorTextField.isReadOnly());
            }
        });

        mainView.addComponent(toggleReadOnlyButton);
        mainView.addComponent(ckEditorTextField);
    }
4

@Dimitri Lubenski
I think the bug can be seen with the online demo. It’s not a matter of reproducing the issue, but how to resolve it. If you have any ideas or can find the bug, that will be really helpful.

Here’s the issue for it:
https://code.google.com/p/vaadin-ckeditor/issues/detail?id=33

It’s possible it’s related to some issue with Vaadin itself, too, since setVisible with multiple editors often has odd behavior:
https://code.google.com/p/vaadin-ckeditor/issues/detail?id=36
https://vaadin.com/forum#!/thread/4202335

We already have to work around a Vaadin issue with modal windows:
https://code.google.com/p/vaadin-ckeditor/issues/detail?id=25

Focus:
https://code.google.com/p/vaadin-ckeditor/issues/detail?id=30

What we need now is someone who has an idea for the fixes since we’ve not been able to determine what is wrong or how to fix them. Thanks for any help you can provide to resolve any of them (maybe they are even related in some way)…

5

For me it was enough if in the readonly mode there is only the content without the editor, so I just override the setReadOnly() method for myself:
@Override
public void setReadOnly(boolean readOnly) {
super.setReadOnly(readOnly);
setViewWithoutEditor(readOnly);
}

But about the real problem:
I tried to add a custom Javascript to the component which finds the body element in the CKEditor iframe and tries to overset the attribute contenteditable to false.
Just setting that like $(document).ready(function(){ myFunction(); } did not work, but noticed that CKEditor component rendering takes a time, so it needs to be ready before setting that attribute.
And the script like: $(document).ready(function(){ setTimeout(function(){ myFunction(); }, 2000);} already changed the attribute.
So, could you check that in the UI class VCKEditorTextField or somewhere if the ckEditor instance is really ready before setting: ckEditor.setReadOnly(readOnly);

Maybe these ideas could help to fix that problem.

6

I have the same problems with setReadOnly for the CKEditorTextField. Maybe someone has a solution for this problem?

7

Suggest using setViewWithoutEditor instead of setReadOnly for now. A read-only editor is a bit odd anyway.

8

Thank you for your quick reply! But after setViewWithoutEditor I get other problem. I use the codesnippet plugin. And with setViewWithoutEditor syntax highlighting doesn’t work!

18955.png
18956.png

9

No idea what your attachments are showing. The view without editor should show the HTML in the editor, so it should render as correctly as it can. If the HTML is not rendering correctly, most likely it’s somehow missing resources (like CSS or JS) that is needed to render it correct outside of the editor.