In JSX file; I use two CKEditors to replace two div elements with id as 'div1,'div2'.
I got CKEDITOR.instances as {editor1 : ..., editor2: ...}.
I wonder the reason why div1, div2 changes to editor1, editpr2?
Following are my JSX and HTML files.
JSX file:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var CKEditor = require('react-ckeditor-wrapper');
class App extends Component {
constructor(props) {
super(props);
this.state = {
content: 'content',
}
}
updateContent(value) {
this.setState({ content: value })
}
render() {
return (<CKEditor
value={this.state.content}
onChange={this.updateContent.bind(this)}
/>)
}
}
ReactDOM.render(<App />, document.getElementById('div1'));
ReactDOM.render(<App />, document.getElementById('div2'));
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practice CKEditor</title>
<script src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script src="js/client_bundle.js"></script>
<button type="button" onclick="extractData()">GetData</button>
<script>
function extractData() {
for (var p in CKEDITOR.instances) {
console.log(p, CKEDITOR.instances[p].getData())
}
}
</script>
</body>
</html>
In JSX file; I use two CKEditors to replace two div elements with id as 'div1,'div2'.
I got CKEDITOR.instances as {editor1 : ..., editor2: ...}.
I wonder the reason why div1, div2 changes to editor1, editpr2?
Following are my JSX and HTML files.
JSX file:
HTML file: