React中富文本编辑器之Simditor
1.npm install simditor@2.3.19
2.<textarea ref="editor" placeholder="只需这一行就可以实现富文本编辑器，很nice啊">
3.import React from 'react';
class RichEditor extends React.Component {
render() {
return <textarea ref="editor" placeholder="只需这一行就可以实现富文本编辑器，很nice啊"></textarea>
}
}
export default RichEditor;
4.richEditor() {
let element = this.refs['editor'];
let editor = new Simditor({
textarea: element,
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'indent', 'outdent', 'alignment', 'hr']
});
}
5.componentDidMount() {
this.richEditor();
}
完整代码如下:
import React from 'react';
import Simditor from 'simditor';
import 'simditor/styles/simditor.scss';
class RichEditor extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.richEditor();
}
richEditor() {
let element = this.refs['editor'];
let editor = new Simditor({
textarea: element,
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'indent', 'outdent', 'alignment', 'hr']
});
}
render() {
return <textarea ref="editor" placeholder="只需这一行就可以实现富文本编辑器，很nice啊"></textarea>
}
}
export default RichEditor;
效果如下:
