How can CKEditor be used with React.js in a way that allows React to recognize it?

javascript reactjs ckeditor ecmascript-6
Slbox picture Slbox · Apr 10, 2016 · Viewed 34.7k times · Source

I've tried using componentWillMount and componentDidMount to initialize CKEditor from within the context of React, but it doesn't seem to work no matter what combination I try. Has anyone found a solution to this besides switching editors?

Answer

codeslayer1 picture codeslayer1 · Sep 9, 2017

I published a package on Npm for using CKEditor with React. It takes just 1 line of code to integrate in your project.

Github link - https://github.com/codeslayer1/react-ckeditor.

How to Use?

  • Install the package using npm install react-ckeditor-component --save.
  • Then include the component in your React app and pass it your content and any other props that you need(all props listed on Github page) -

<CKEditor activeClass="editor" content={this.state.content} onChange={this.updateContent} />

The package uses the default build of CKEditor but you can use a custom build as well along with any of the plugins you like. It also includes a sample application. Hope you will find it useful.

Related questions

Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More
Show or hide element in React

I am messing around with React.js for the first time and cannot find a way to show or hide something on a page via click event. I am not loading any other library to the page, so I am …

Read More