react的富文本编辑器

React中富文本编辑器之Simditor

官网 https://simditor.tower.im/ 

1.npm install [email protected]

2.</p> <p>3.import React from 'react';</p> <p>class RichEditor extends React.Component {</p> <p> render() {</p> <p> return <textarea ref="editor" placeholder="只需这一行就可以实现富文本编辑器，很nice啊">

}

}

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

}

}

export default RichEditor;

效果如下: