Question

我正在尝试在我的React Project中使用CKEditor，并将app.html中的“ script src ='// cdn.ckeditor.com/4.6.1/basic/ckeditor.js'”标签替换为react-ckeditor-组件，但无法找出一些问题。在问这个问题之前，我已经尝试过此链接How can CKEditor be used with React.js in a way that allows React to recognize it?

上的解决方案

新的反应，也从未与ckeditor合作。我使用script标记来运行它。这是我到目前为止所做的：

Editor.js

import React, {Component} from "react";
import CKEditor from "react-ckeditor-component";

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

  render() {
    return (
      <textarea name={this.elementName} className="form-control" 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));
    window.setTimeout(toggle, 100);
  }
}

App.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>App Template</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

    <body>
        <div id="content"></div>
        <script type='text/javascript' src='/js/x3dom.js'> </script>
        <script src="/dist/js/modernizr/modernizr-bundle.js"></script>
        <!-- <script src="/dist/js/index.js"></script> -->
        <!-- <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script> -->
        <!-- <Editor content={this.state.content} onChange={this.updateContent} /> -->
    </body>
</html>

Form.js

import React, {Component} from 'react';
import { VALIDATOR } from '../../utils';
import Editor from './Editor';

class FForm extends Component {
    state = {
        subject: '',
        category: '',
        body: '',
        err: {
            subject: '',
            category: '',
            body: ''
        }
    }

    onSubjectChange = (e) => this.setState({subject: e.target.value});
    onCategoryChange = (e) => this.setState({category: e.target.value});
    onBodyChange = (value) => this.setState({body: value});
    handleSubmit = () => {
        let err = {
            subject: '',
            category: '',
            body: ''
        };
        const {subject, category, body} = this.state;
        const {isBlank, hasError} = VALIDATOR;
        err.subject = (isBlank(subject))
            ? 'Topic is Required'
            : '';
        err.category = (isBlank(category))
            ? 'Please select a Category'
            : '';
        err.body = (isBlank(body))
            ? 'Body is required'
            : '';
        this.setState({err});
        if (hasError(err)) {
            return false;
        } else {
            this.props.saveData({subject, category, body});
        }
    }

    render() {
        const {err} = this.state;
        return (<form className="forum form-dialog">
            <div className="row">
                <div className="col-md-6">
                    <input type="text"
                        className="form-input-control"
                        value={ this.state.topic }
                        onChange={ this.onSubjectChange }
                        placeholder="Topic for the form"
                        autoFocus="autoFocus" />
                    <span className="form-dialog-error">{ err.subject }</span>
                </div>
                <div className="col-md-6">
                    <select
                        className="form-input-control"
                        onChange={ this.onCatChange }
                    >
                        <option value="">Select a cat</option>
                        { this.props.options }
                    </select>
                    <span className="form-dialog-error">{ err.caegory }</span>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <Editor id="topic1"
                        value={ this.state.body }
                        onChange={this.onBodyChange} />
                    <span className="form-dialog-error">{err.body}</span>
                </div>
            </div>
            <div className="row form-footer">
                <button type="button"
                    className="btn btn-ghost"
                    onClick={ this.props.onClose }>CANCEL</button>
                <button type="button"
                    className="btn btn-green"
                    onClick={ this.handleSubmit }>CREATE TOPIC</button>
            </div>
        </form>);
    }
}

export default FForm;

我在控制台中收到的错误

Uncaught ReferenceError: CKEDITOR is not defined
    at Editor.componentDidMount (Editor.js:49)
    at eval (VM4277 ReactCompositeComponent.js:262)
    at measureLifeCyclePerf (VM4277 ReactCompositeComponent.js:73)
    at eval (VM4277 ReactCompositeComponent.js:261)
    at CallbackQueue.notifyAll (VM4214 CallbackQueue.js:74)
    at ReactReconcileTransaction.close (VM4302 ReactReconcileTransaction.js:78)
    at ReactReconcileTransaction.closeAll (VM4225 Transaction.js:207)
    at ReactReconcileTransaction.perform (VM4225 Transaction.js:154)
    at ReactUpdatesFlushTransaction.perform (VM4225 Transaction.js:141)
    at ReactUpdatesFlushTransaction.perform (VM4213 ReactUpdates.js:87)

Answer 1

您可以直接使用

<CKEditor activeClass="className" value={this.state.value}
      events={{"change": this.onChange}} />

组件，它将在您的页面中呈现CKEditor

使用react-ckeditor-component会引发错误，指出未定义CKEDITOR

1 个答案: