ComponentWillMountとcomponentDidMountを使用してReactのコンテキスト内からCKEditorを初期化しようとしましたが、どの組み合わせを試しても機能しないようです。エディタを切り替える以外に、これに対する解決策を見つけた人はいますか?
ReactでCKEditorを使用するためのパッケージをNpmに公開しました。プロジェクトに統合するのに必要なコードは1行だけです。
Githubリンク- https://github.com/codeslayer1/react-ckeditor 。
使い方?
npm install react-ckeditor-component --save
を使用してパッケージをインストールします。<CKEditor activeClass="editor" content={this.state.content} onChange={this.updateContent} />
パッケージはCKEditorのデフォルトビルドを使用しますが、好きなプラグインと一緒にカスタムビルドも使用できます。サンプルアプリケーションも含まれています。それがあなたの役に立つことを願っています。
セージはその答えで素晴らしい解決策を説明しています。 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}/>
これは、テキストの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
_エラーが表示されます。
お役に立てれば
ckeditor.js
in index.html
、およびwindow.CKEDITOR
。 Reactコンポーネントのドキュメント)のようにCKEDITOR
をそのまま使用しないでください。
ckeditor.jsの最初の行を読むだけで、CKEDITORの定義がわかります
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} />