change event not called when using scriptUrl

[JKobyP]

When using scriptUrl="static/ckeditor/ckeditor.js" change events aren't called.

Identical code works without scriptUrl. scriptUrl is referring to a valid custom ckeditor build.

[codeslayer1]

Can you please share your source code?

[JKobyP]

class Editor extends Component {
  constructor(props){
    super(props);
  }

  onChange = (evt) => {
    this.props.input.onChange(evt.editor.getData());
    console.log(evt);
  }

  render() {
    return (
      <div>
      <CKEditor
        scriptUrl="/static/ckeditor/ckeditor.js"
        content={this.props.input.value}
        events={{
          change: this.onChange
        }}
      />
    </div>
    );
  }
}

And it's used with redux-form as such:

              <Field
                name="description"
                type="text"
                component={Editor}
                validate={required}
              />

As I said, works perfectly if the scriptUrl attribute is removed, but doesn't call the change event otherwise.

[JKobyP]

I'm using a CKEditor built with the Builder, version 4.9.2, Basic with one or two plugins removed (in order to strip down the toolbar.)

[codeslayer1]

You are using redux-form. You need to include CKEditor a bit differently with redux form. I am not sure but can you try to use the fix mentioned in this issue #18 and see if it works.

[JKobyP]

@codeslayer1 the code above is semantically identical to the post you referred me to, so I'm not sure it would make any difference here.

[JKobyP]

Are you unable to reproduce the problem of change events not firing when scriptUrl is specified? Because my problem seems to be independent of redux-form.

[codeslayer1]

No. I have used custom scriptUrl many times and never faced such a problem.

And the code is not identical to the issue that I referred. Notice the arrow function(=>) in the change event that is passed. Try changing your code to below attached code once.

<CKEditor
        scriptUrl="/static/ckeditor/ckeditor.js"
        content={this.props.input.value}
        events={{
          change": param => this.onChange(param)
        }}
      />

[JKobyP]

I just added scriptUrl to your example project within this repository, and change events immediately stopped printing in the console.

Here is the code (although you can refer to all but the one line in example/example.js of this repository)

The scriptUrl refers to a CKEditor package built by the CKEditor Builder, version 4.9.2.

const React = require('react');
const ReactDOM = require('react-dom');
import CKEditor from "../src";

class Example extends React.Component {
  constructor(props){
    super(props);

    //State initialization
    this.state = {
      content: "Hello World"
    };

    //setInterval(this.setContent.bind(this), 1000)
  }

  //------ Test for race condition ------ //
  // setContent(){
  //   console.log("Setting content");
  //   this.setState({
  //     content: "Hello World " + Math.random()
  //   })
  // }

  onChange(evt){
    console.log("onChange fired with event info: ",evt, "and data: ",evt.editor.getData());
  }

  onBlur(evt){
    console.log("onBlur fired with event info: ",evt);
  }

  afterPaste(evt){
    console.log("afterPaste fired with event info: ",evt);
  }

  render() {
    return (
      <CKEditor
        content={this.state.content}
        scriptUrl='ckeditor/ckeditor.js'
        events={{
          blur: this.onBlur,
          afterPaste: this.afterPaste,
          change: this.onChange
        }}
      />
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
);

[JKobyP]

This problem seems to occur with only certain ckeditor builds. For example, the standard build works properly.

[codeslayer1]

Not sure what you are doing incorrectly. I just tried version 4.9.2 as a custom build and onChange is firing perfectly fine for me. I used the same example code and just changed the script URL to 4.9.2.

const React = require('react');
const ReactDOM = require('react-dom');
import CKEditor from "../src";

class Example extends React.Component {
  constructor(props){
    super(props);

    //State initialization
    this.state = {
      content: "Hello World"
    };

    //setInterval(this.setContent.bind(this), 1000)
  }

  //------ Test for race condition ------ //
  // setContent(){
  //   console.log("Setting content");
  //   this.setState({
  //     content: "Hello World " + Math.random()
  //   })
  // }

  onChange(evt){
    console.log("onChange fired with event info: ",evt, "and data: ",evt.editor.getData());
  }

  onBlur(evt){
    console.log("onBlur fired with event info: ",evt);
  }

  afterPaste(evt){
    console.log("afterPaste fired with event info: ",evt);
  }

  render() {
    return (
      <CKEditor
        content={this.state.content}
        scriptUrl="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"
        events={{
          blur: this.onBlur,
          afterPaste: this.afterPaste,
          change: this.onChange
        }}
        config={{
          toolbar: [
            { name: 'basicstyles', items: [ 'Underline', 'Italic', 'Bold' ] }
          ],
          removeButtons: 'Subscript,Superscript'
        }}
      />
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
);

[JKobyP]

@codeslayer1 Indeed, the builds I'm downloading today are all working just fine for me.

I have a build of ckeditor that I downloaded earlier in the week which still won't work, but it appears to be some special case (I performed a diff to try and see what's special about it, but the code is optimized, so the differences are impossible to work out).

Either way, my problems are no more. Thanks for engaging with me on this and I'm sorry to have taken up your time!

[codeslayer1]

No problem. Glad that your issue was solved. Closing this issue now.