web-dev-qa-db-ja.com

Reactが認識できるように、CKEditorをReact.jsで使用するにはどうすればよいですか？

ComponentWillMountとcomponentDidMountを使用してReactのコンテキスト内からCKEditorを初期化しようとしましたが、どの組み合わせを試しても機能しないようです。エディタを切り替える以外に、これに対する解決策を見つけた人はいますか？

javascriptreactjsckeditorecmascript-6
12
Slbox

ReactでCKEditorを使用するためのパッケージをNpmに公開しました。プロジェクトに統合するのに必要なコードは1行だけです。

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のデフォルトビルドを使用しますが、好きなプラグインと一緒にカスタムビルドも使用できます。サンプルアプリケーションも含まれています。それがあなたの役に立つことを願っています。

22
codeslayer1

セージはその答えで素晴らしい解決策を説明しています。 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}/>
13
Sander Verhagen

これは、テキストのP段落を表示するReactコンポーネントです。ユーザーが段落内のテキストを編集する場合は、クリックしてCKEditorインスタンスをアタッチします。 Editorインスタンスのテキストの変更が完了すると、「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_エラーが表示されます。

お役に立てれば

6
Sage

ckeditor.js in index.html、およびwindow.CKEDITOR。 Reactコンポーネントのドキュメント）のようにCKEDITORをそのまま使用しないでください。

ckeditor.jsの最初の行を読むだけで、CKEDITORの定義がわかります

1
xiongkailing

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} />
0
David Silva