我在 Npm 上发布了一个包，用于将 CKEditor 与 React 结合使用。只需 1 行代码即可集成到您的项目中。

Github 链接 - https://github.com/codeslayer1/react-ckeditor。

如何使用？

• 使用npm install react-ckeditor-component --save.
• 然后将组件包含在您的 React 应用程序中，并将您的内容和您需要的任何其他props（在 Github 页面上列出的所有props）传递给它 -

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

该软件包使用 CKEditor 的默认构建，但您也可以使用自定义构建以及您喜欢的任何插件。它还包括一个示例应用程序。希望你会发现它很有用。

Sage 在他的回答中描述了一个很棒的解决方案。这是一个救星，因为我才刚刚开始使用 React，我需要它来实现这一目标。然而，我确实改变了实现，也结合了 Jared 的建议（使用componentDidMount）。另外，我需要有一个更改回调，如下所示：

组件的使用：

<CKEditor value={this.props.value} onChange={this.onChange}/>

将此添加到index.html：

<script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>

使用以下组件代码：

import React, {Component} from "react";

export default class CKEditor extends Component {
  constructor(props) {
    super(props);
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  render() {
    return (
      <textarea name="editor" cols="100" rows="6" defaultValue={this.props.value}></textarea>
    )
  }

  componentDidMount() {
    let configuration = {
      toolbar: "Basic"
    };
    CKEDITOR.replace("editor", configuration);
    CKEDITOR.instances.editor.on('change', function () {
      let data = CKEDITOR.instances.editor.getData();
      this.props.onChange(data);
    }.bind(this));
  }
}

再次，所有学分都归功于 Sage！

以下是上述基础版的改进版，支持同一页面多个CKEditor实例：

import React, {Component} from "react";

export default class CKEditor extends Component {
  constructor(props) {
    super(props);
    this.elementName = "editor_" + this.props.id;
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  render() {
    return (
      <textarea name={this.elementName} defaultValue={this.props.value}></textarea>
    )
  }

  componentDidMount() {
    let configuration = {
      toolbar: "Basic"
    };
    CKEDITOR.replace(this.elementName, configuration);
    CKEDITOR.instances[this.elementName].on("change", function () {
      let data = CKEDITOR.instances[this.elementName].getData();
      this.props.onChange(data);
    }.bind(this));
  }
}

请注意，这还需要传递一些唯一的 ID：

<CKEditor id={...} value={this.props.value} onChange={this.onChange}/>

这是用于显示 P 段文本的 React 组件。如果用户想编辑段落中的文本，他们可以单击它，然后附加一个 CKEditor 实例。当用户完成编辑器实例中的文本更改时，“blur”事件将触发，将 CKEditor 数据传输到状态属性并销毁 CKEditor 实例。

import React, {PropTypes, Component} from 'react';

export default class ConditionalWYSIWYG extends Component {
    constructor(props) {
        super(props);
        this.state = {
            field_name:this.props.field_name,
            field_value:this.props.field_value,
            showWYSIWYG:false
        };
        this.beginEdit = this.beginEdit.bind(this);
        this.initEditor = this.initEditor.bind(this);
    }
    render() {
        if ( this.state.showWYSIWYG  ) {
            var field = this.state.field_name;
            this.initEditor(field);
            return (
                <textarea name='editor' cols="100" rows="6" defaultValue={unescape(this.state.field_value)}></textarea>
            )
        } else {
            return (
                <p className='description_field' onClick={this.beginEdit}>{unescape(this.state.field_value)}</p>
            )
        }
    }
    beginEdit() {
        this.setState({showWYSIWYG:true})
    }
    initEditor(field) {
        var self = this;

        function toggle() {
            CKEDITOR.replace("editor", { toolbar: "Basic", width: 870, height: 150 });
            CKEDITOR.instances.editor.on('blur', function() {

                let data = CKEDITOR.instances.editor.getData();
                self.setState({
                    field_value:escape(data),
                    showWYSIWYG:false
                });
                self.value = data;
                CKEDITOR.instances.editor.destroy();
            });
        }
        window.setTimeout(toggle, 100);
    }
}

该self.value = data让我通过一个简单的参考检索父组件中的文本

这window.setTimeout();给了 React 时间来做它所做的事情。如果没有这个延迟，我会Cannot read property 'getEditor' of undefined 在控制台中收到 错误消息。

希望这可以帮助

只需引用ckeditor.jsin index.html，并将其与window.CKEDITOR. 不要CKEDITOR像 React 组件中的文档那样直接使用。

只需阅读ckeditor.js的第一行，您就会发现CKEDITOR的定义是什么。

感谢 Sage、Sander & co。我只是想为 CKEditor 的“内联”模式贡献一个版本。

首先，禁用 CKEditor 的“自动内联”行为...

CKEDITOR.disableAutoInline = true

然后，对于实际组件...

import React, {Component} from 'react';

export default class CKEditor extends Component {
    constructor(props) {
        super(props);
        this.elementName = "editor_" + this.props.id;
        this.componentDidMount = this.componentDidMount.bind(this);
        this.onInput = this.onInput.bind(this);
    }

    onInput(data) {
        console.log('onInput: ' + data);
    }

    render() {
        return (
            <div 
                contentEditable={true} 
                suppressContentEditableWarning
                className="rte"
                id={this.elementName}> 
                {this.props.value}</div>
        )
    }

    componentDidMount() {
        let configuration = {
            toolbar: "Basic"
        };
        CKEDITOR.inline(this.elementName, configuration);
        CKEDITOR.instances[this.elementName].on("change", function() {
            let data = CKEDITOR.instances[this.elementName].getData();
            this.onInput(data);
        }.bind(this));
    }
}

用法是这样的：

<CKEditor id="102" value="something" onInput={this.onInput} />