CKEditor如何以允许React识别它的方式与React.js一起使用？

Question

我已经尝试使用componentWillMount和componentDidMount在React的上下文中初始化CKEditor,但无论我尝试什么组合,它似乎都不起作用.除了切换编辑器之外,有没有人找到解决方案？

Answer 1

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

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

如何使用？

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

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

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

Answer 2

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}/>

Answer 3

这是一个显示P段文本的React组件.如果用户想要编辑段落中的文本,他们可以单击它然后附加CKEditor实例.当用户完成修改Editor实例中的文本时,将触发"blur"事件,将CKEditor数据传输到state属性并销毁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();给作出反应的时间去做它.没有这个延迟,我会 Cannot read property 'getEditor' of undefined 在控制台中出错.

希望这可以帮助