ckeditor5-react icon indicating copy to clipboard operation
ckeditor5-react copied to clipboard

Import from Word plugin not working on custom build

Open axelvaindal opened this issue 1 year ago • 2 comments

Hello,

We're trying to use the import from Word feature, but whenever we import a Word in our Editor, the editor refreshes itself and returns an error we are unable to debug (see screenshot below).

image

As you can see, the Editor seem to be rebuilt and the toolbar is added a second time. The onReady event is fired twice (once when the page loads first, and a second time when the document is added from the import from word feature). An error is indeed fired when trying to upload the document, but I really don't know what to do with it.

image

From the look of it, it might be related to the development token and generated user ids but we cannot find relevant docs to help us out.

We have created a custom build with the import from word plugin, and here is our react component:

<CKEditor
        config={{
          licenseKey: "some-license-key",
          language: "fr",
          pagination: {
            // A4
            pageWidth: "21cm",
            pageHeight: "29.7cm",

            pageMargins: {
              top: "20mm",
              bottom: "20mm",
              left: "12mm",
              right: "12mm",
            },
          },
          importWord: {
            tokenUrl:
              "some-token",
          },
        }}
        editor={DecoupledEditor}
        data="<p>Hello from CKEditor&nbsp;5!</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          const toolbar = document.getElementById("editorToolbar");
          if (toolbar) {
            toolbar.appendChild(editor.ui.view.toolbar.element!);
          }
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event) => {
          console.log(event);
        }}
        onError={(event) => {
          console.log("An error has occured");
          console.log(event);
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>

Thanks for your help,

axelvaindal avatar Mar 07 '24 11:03 axelvaindal

Note that the comment plugin display the exact same behaviour, so I guess we are missing something in terms of configuration with the development token, although it's not really clear what 🤔

axelvaindal avatar Mar 07 '24 13:03 axelvaindal

@axelvaindal if problems are related to premium features, please reach out to our support, we can spend much more time on investigation then.

Witoso avatar Mar 07 '24 15:03 Witoso