CKEditor4-react gives editor-element-conflict

[rasika-sinha]

I am trying to POC CKEditor for my React app, the features are working fine but I am getting an error consistently -

[CKEDITOR] Error code: editor-element-conflict. {editorName: "editor1"}

Even if I simply copy paste the code from "DataBinding" example shared https://ckeditor.com/docs/ckeditor4/latest/guide/dev_react.html, then also it throws an error in console. Please see attached image for reference.

Reproduction steps

1 installed ckeditor4-react
2. created TwoWayBinding.js with code from https://ckeditor.com/docs/ckeditor4/latest/guide/dev_react.html#data-binding
3. called the TwoWayBinding component in render of another empty component

Expected result

CKEditor with standard features should get rendered

Actual result

CKEditor with standard features is rendered but there are 2 errors in console pointing to https://ckeditor.com/docs/ckeditor4/latest/guide/dev_errors.html#editor-element-conflict

The render of TwoWayBinding.js is called only once. None of the existing threads on stackoverflow or git talk about "editor-element-conflict" issue with respect to react.

There is one one wrapper library present - https://www.npmjs.com/package/react-ckeditor-component, if this is used then the error does not come, but ideally I want to use the official library of CKEditor.

Kindly share the preferred solution.

Other details

• Browser: chrome
• OS: windows 10
• Integration version: React16
• CKEditor version: CKEditor4
• Installed CKEditor plugins: none

[NSV1991]

also facing same issue

[rasika-sinha]

Hi @f1ames , I noticed that you responded to recent issues posted for ckeditor hence tagging you, can you please take a look at the above issue if possible.

Thanks!

[Comandeer]

It seems to be a bug in integration itself, as it's present also in our docs. Fortunately there is an easy workaround: use of CKEDITOR.disableAutoInline.

<CKEditor onBeforeLoad={ ( CKEDITOR ) => ( CKEDITOR.disableAutoInline = true ) } />

[rasika-sinha]

Thank you @Comandeer, the work around does the job!

I have one more blocker issue with ckeditor, it is regarding easy image upload plugin. I want the images to be saved at a folder hosted by us and not use the cloud service of ckeditor. I have shared the details at https://stackoverflow.com/questions/57431210/ckeditor4-react-add-easyimage-plugin-without-cloud-url as well.

[GTRekter]

It seems to be a bug in integration itself, as it's present also in our docs. Fortunately there is an easy workaround: use of CKEDITOR.disableAutoInline.

<CKEditor onBeforeLoad={ ( CKEDITOR ) => ( CKEDITOR.disableAutoInline = true ) } />

It works for me

[jayc971]

It seems to be a bug in integration itself, as it's present also in our docs. Fortunately there is an easy workaround: use of CKEDITOR.disableAutoInline.

<CKEditor onBeforeLoad={ ( CKEDITOR ) => ( CKEDITOR.disableAutoInline = true ) } />

It works for me

how to put it in?

[bodfaj13]

worked alright, thanks 😎

[f1ames]

@gkumar9 could you report a separate issue as it is not related to this thread?

[kiminohero]

Still getting the same error even after using the onBeforeLoad prop.
I am using the following code

import CKEditor from "ckeditor4-react";

class CKEditorFull extends CKEditor {
  constructor(props) {
    super(props);
    CKEditor.editorUrl = "https://cdn.ckeditor.com/4.13.0/full-all/ckeditor.js";
  }
}

export default CKEditorFull;

<CKEditorFull
             onBeforeLoad={(CKEDITOR) => (CKEDITOR.disableAutoInline = true)}
                data={this.state.someData}
                config={Config}
                onChange={this.inputChangeFooter}
              />

I am rendering 2 instances of the above component in the same page.
Can please help me out?

[watercayman]

Getting this same issue without React. The workaround from @Comandeer is not successful for me.

Never had it before, but turned on pasteFromWord and downloaded latest version of ckeditor.js, and now it shows up on all pages where I use the pasteFromWord plugin. It does not present the error on pages where I don't use the plugin. I haven't changed any code except to allow pasteFromWord.

[kiminohero]

I am still facing the above issue. I think the onBeforeLoad prop is not working for me. It is not executing at all. I am still using the same code as my previous comment here but I have updated the editorUrl to version 4.14.1. I am also using the latest ckeditor4-react i.e v1.1.1. Can you please look into it? Thanks.