How to clear inputed data.

[alexpanchuk]

Some problem with subj. When i click on button state.content become equal "", but in input field it still not changed

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            content: 'content',
        }

        this.onChange = this.onChange.bind(this)
        this.clearData = this.clearData.bind(this)
    }

    onChange(evt){
      console.log("onChange fired with event info: ", evt.editor.getData());
      var newContent = evt.editor.getData();
      this.setState({
        content: newContent
      })
    }

    clearData() {
        this.setState({
            content: ""
        })
    }

    render() {
        return (
            <div>
                <CKEditor 
                    activeClass="p10" 
                    content={this.state.content} 
                    events={{
                        "change": this.onChange
                    }}
                />
                <button onClick={this.clearData}>Clear data</button>
            </div>
        )
    }
}

[codeslayer1]

This is because you are not setting the data in CKEditor to "" in your clearData() function. The change event is used for listening to changes inside CKEditor and not to change data inside CKEditor from outside.

To solve this, follow these steps:

1. Add a ref to your CKEditor component to access the child functions. <CKEditor ref={instance => { this.ckeditor = instance; }} />

2. Now you can set data in your CKEditor like this. Simply call this method in your clearData() function. this.ckeditor.editorInstance.setData("");

Hope this solves your query.

[alexpanchuk]

Thank you. Is there any documentation about such methods?

[codeslayer1]

Welcome. I have documented most of the things in the Readme file. Rest you can find in the closed issues. In case you feel anything missing in the Readme/anything additional that you can contribute, feel free to raise a pull request.