React中富文本編輯器之Simditor
官網(wǎng)?https://simditor.tower.im/?
1.npm install simditor@2.3.19
2.<textarea ref="editor" placeholder="只需這一行就可以實現(xiàn)富文本編輯器，很nice啊">
3.import React from 'react';
class RichEditor extends React.Component {
render() {
return <textarea ref="editor" placeholder="只需這一行就可以實現(xiàn)富文本編輯器，很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="只需這一行就可以實現(xiàn)富文本編輯器，很nice啊"></textarea>
}
}
export default RichEditor;
效果如下:
