¿Cómo se puede usar CKEditor con React.js de una manera que permita que React lo reconozca?

Solución:

Publiqué un paquete en Npm para usar CKEditor con React. Solo se necesita 1 línea de código para integrarse en su proyecto.

Enlace de Github: https://github.com/codeslayer1/react-ckeditor.

¿Cómo utilizar?

• Instale el paquete usando npm install react-ckeditor-component --save.
• Luego, incluya el componente en su aplicación React y pásele su contenido y cualquier otro accesorio que necesite (todos los accesorios enumerados en la página de Github) –

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

El paquete usa la compilación predeterminada de CKEditor, pero también puede usar una compilación personalizada junto con cualquiera de los complementos que desee. También incluye una aplicación de muestra. Espero que te resulte útil.

Sage describe una solución asombrosa en su respuesta. Fue un salvavidas, ya que recién comencé a usar React, y lo necesitaba para que esto funcionara. Sin embargo, cambié la implementación, incorporando también las sugerencias de Jared (usando componentDidMount). Además, mi necesidad era tener una devolución de llamada de cambio, así:

Uso del componente:

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

Agregó esto a index.html:

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

Usando el siguiente código de componente:

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));
  }
}

Nuevamente, ¡todos los créditos para Sage!

---

La siguiente es una versión mejorada de la versión básica anterior, que admite varias instancias de CKEditor en la misma página:

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));
  }
}

Tenga en cuenta que esto también requiere que se transmita una identificación única:

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

Esto es para un componente React que muestra un párrafo de texto. Si el usuario desea editar el texto en el párrafo, puede hacer clic en él, lo que luego adjuntará una instancia de CKEditor. Cuando el usuario termina de alterar el texto en la instancia del Editor, se activa el evento “desenfoque” que transfiere los datos de CKEditor a una propiedad de estado y destruye la Instancia de 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);
    }
}

los self.value = data me permite recuperar el texto del componente principal a través de una referencia simple

los window.setTimeout(); le da a React tiempo para hacer lo que hace. Sin este retraso, obtendría un Cannot read property 'getEditor' of undefined error en la consola.

Espero que esto ayude

---

---

Utiliza Nuestro Buscador