Ckeditor5: [XWiki] CreateError: observable-bind-to-properties-length: The number of properties must match.

[wuguokai]

Is this a bug report or feature request? (choose one)

Other

💻 Version of CKEditor

ckeditor5/11.1.1/classic/ckeditor.js

📋 Steps to reproduce

1. create ckeditor5 follow quick-start.
   create code :

ClassicEditor
            .create('<p>Hello world!</p>')
            .then(editor => {
                console.log('Editor was initialized', editor);

                // Initial data was provided so `editor.element` needs to be added manually to the DOM.
                document.body.appendChild(editor.element);
            })
            .catch(err => {
                console.error(err.stack);
            });

✅ Expected result

create success!

❎ Actual result

throw error : observable-bind-to-properties-length: The number of properties must match.

📃 Other details that might be useful

What may cause this error(observable-bind-to-properties-length: The number of properties must match. )?

[Reinmar]

cc @oleq

[oleq]

I followed the guide but I couldn't reproduce the issue.

Is that really all it takes to reproduce the issue, @wuguokai? Just the quick start guide? Anyway, where do you run the editor? Chrome? Electron? Something else? Can you create a JSFiddle or CodePen that would allow us to reproduce the issue?

Most likely the error comes from these lines but we need more information about the case to understand it.

[wuguokai]

Thanks for your @oleq answer! Actually I created the editor followed the guide is fine because it in a simple html page.

This problem appear when I try to use ckeditor in XWiki (It uses ckeditor4 fine now .But ckeditor5 is too cool ,So I want to try it ).
Then I add <script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script> to html head and try to create an editor. But failed ,got above issue.
I don't know what will cause it probably.

[oleq]

I created a raw fiddle and it simply works.

I'm not familiar with XWiki but it does not seem like a tricky use–case for our editor (at first glance). Still, to track this issue down, I'd need a working XWiki environment, best with an uncompressed build of the editor. Or at least some meaningful stack trace because I'm not sure where the error comes from. Is there any chance we could get some details?

[wuguokai]

Yes! I have create a demo XWiki environment and add script link of ckeditor to all page header.

You could try on it, excute code :

ClassicEditor
      .create('<p>Hello world!</p>')
      .then(editor => {
        console.log('Editor was initialized', editor);

        // Initial data was provided so `editor.element` needs to be added manually to the DOM.
        document.body.appendChild(editor.element);
    } )
    .catch(err => {
      console.error(err.stack);
    } );

and then got the error :

. But it possible has expired, look this

So you also could create a demo XWiki yourself by this step :

1. Make a try-xwiki-cloud
   
   
   
   
   1. Fill in your information and Create.
      
      
   
   
   2. Wait a moment , You should go into the new XWiki Main Home. Then follow this step, you should got the error:
      
      
   
   

Thank you very much for your help!

[oleq]

OK, I checked the demo and found the issue. The culprit is:

<script type="text/javascript" src="/xwiki/resources/js/prototype/prototype.js"></script>

the ancient, abandoned prototype.js library, which extends native APIs, implementing methods on its own e.g. Array.from() used extensively across the CKEditor 5 project. This kind of practice is considered an antipattern these days exactly because of this kind of problems.

Because the library is old, it does not support modern ES6 features, e.g. an array from an iterator Array.from( new Map().keys() ). It breaks the editor and as long as the library is used in XWiki, I see no easy way to run CKEditor 5 in the project.

[wuguokai]

👍 @oleq Thanks you very much !
I have add an iframe label to create the CKEditor5. It is success and I'm trying to use other features and plugins .
Nice experience！

[oleq]

Just for the record, I submitted an issue to the XWiki bug tracker.