如何将CKEditor与React.js一起使用，让React能够识别它？

问题描述

我试过使用componentWillMount和componentDidMount从React的上下文中初始化CKEditor，但是它似乎不工作，不管我尝试什么组合。除了切换编辑器，有没有人找到一个解决方案？

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?

推荐答案

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

This is for a React component which displays a P paragraph of text. If the user wants to edit the text in the paragraph, they can click it which will then attach a CKEditor instance. When the user is done altering the text in the Editor instance, the "blur" event fires which transfers the CKEditor data to a state property and destroys the CKEditor Instance.

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 =数据允许我通过简单的引用从父组件检索文本

The self.value = data allows me to retrieve the text from the parent component via a simple ref

window.setTimeout 给React时间做它做什么。没有这个延迟，我会得到一个无法读取属性的getEditor的未定义的错误在控制台。

The window.setTimeout(); gives React time to do what it does. Without this delay, I would get an Cannot read property 'getEditor' of undefined error in the console.

希望这有助于

这篇关于如何将CKEditor与React.js一起使用，让React能够识别它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！