ckeditor / ckeditor4-releases

Official distribution releases of CKEditor 4.
Other
522 stars 412 forks source link

Latest release version via the builder is broken #87

Closed xoniq closed 5 years ago

xoniq commented 5 years ago

When getting a clean version from https://ckeditor.com/cke4/builder and adding a simple html to test CKEditor, the editor is not loading, both in the latest Chrome and Safari in macOS Mojave.

The test script i'm using (from documentation):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

The editor loads, the toolbars show up, but its blocked, and when clicking a button it complains about not being active.

EDIT:

This seems to be only the issue when using the builder. Downloading it as a FULL package directly and testing the exact same script above works. Switching back to the builder version fails again.

EDIT 2:

The file samples/index.html also has a not working editor in the build version. Same goes for the samples/toolbarconfigurator/index.html which doesn't work.

f1ames commented 5 years ago

I have tested both standard and full builds downloaded from https://ckeditor.com/cke4/builder with latest Chrome (73.0.3683.103 (Official Build) (64-bit)) and it works fine (both samples/index.html and script provided above). However, I'm on High Sierra (10.13.6 (17G65)) so it's not identical environment.

@xoniq Could you provide exact steps which led you to not working editor so we can be sure that we are testing the same scenario?

xoniq commented 5 years ago

@f1ames My stepts at this time to reproduce:

Tested right now on Google Chrome Version 73.0.3683.103 (Official build) (64-bit).

For full disclosure I added uploaded it to WeTransfer to make sure you can test the exact same zip file as I got (ckeditor_4.11.3_ed3bec5393c3.zip): https://we.tl/t-dD46ESy9WO

NOTE, my macOS version:

macOS Mojave 10.14.4 (18E226)

xoniq commented 5 years ago

It seems to be an plugin breaking stuff. But I cannot find which one this should be. When I run the builder incognito (without pre selected plugins) it actually does work. (Should have tries this first, blame on me).

Will try a few more times to see if I can find which plugin breaks the system.

wwalc commented 5 years ago

There are markdown and qrc 3rd party plugins included in your build according to build-config.js. Try investigating there. config.removePlugins should help in debugging.

xoniq commented 5 years ago

I tested again with only adding plugins, still working. Must be broken because I removed a few unused plugins. So it's not about the newly added plugins, but on deleting existing from within the builder.

xoniq commented 5 years ago

I think I found it. I downloaded perhaps 20 to 25 times with specific plugins deleted, it starts to fail when I remove wysiwygarea from CKEditor (my application doesn't support iframes).

EDIT:

Yes this was it. Now I did exactly the same, without removing wysiwygarea, and it works. Even through the 'iFrame Dialog' plugin actually is deletion, this one I can not delete.

f1ames commented 5 years ago

@xoniq thanks for detailed investigation šŸ‘

I can confirm that removing wysiwygarea causes some issue. However, from what I have tested removing it (Iframe Editing Area) breaks Source version. The Optimized one still works (fallbacks to inline editor). So the other way around than you have reported šŸ¤”

The wysiwygarea (Iframe Editing Area) is basically responsible for creating editable area so one can insert/modify the content. If you cannot use iframe one you can switch this plugin with divarea (Div Editing Area) which uses <div> element instead of <iframe>. One of this plugin is necessary to make editor work correctly.

One thing I'm not 100% sure is why optimized version works in such cases. Probably the builder adds divarea plugin if no editing area plugin is present.

xoniq commented 5 years ago

Weird indeed. Well at least we sorted it out. Either one of these need to be present, this issue can be closed and is clear what caused it.

I was thinking that plugin was used for supporting iframe elements within the editor, I forgot about the fact that the editor itself also uses an iframe, so it's logical this is needed for that to work. (when you're not using div)