React中富文本编辑器之Simditor

Simditor是一个很简单很好用的富文本编辑器，本文介绍在React中使用Simditor。首先进入官网 https://simditor.tower.im/ ，找到安装Simditor的方法，为了保险，本文安装2.3.19如：npm install simditor@2.3.19或者用yarn add simditor@2.3.19。

用React官方提供的脚手架npx create-react-app rich-editor新建一个项目，简化文件目录同时新建一个rich-editor目录，最终目录结构如图所示，

根据Simditor官网可以看出使用Simditor非常简单，只需在rich-editor下的index.js中的JSX中引入以下代码即可，

<textarea ref="editor" placeholder="只需这一行就可以实现富文本编辑器，很nice啊"></textarea>

'/rich-editor/index.js'中的代码如下所示：

import React from 'react';

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

export default RichEditor;

这时页面上并不能显示出想要的富文本编辑器，而是一个textarea的输入框，这是因为还没对textarea做任何处理，接下来对textarea做一些处理。首先，对Simditor初始化，代码如下所示：

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']
		});
	}

Simditor需要在组件加载时就对其初始化，因此需要在生命周期函数componentDidMount()中调用richEditor，如下所示：

componentDidMount() {
		this.richEditor();
	}

到此Simditor引用基本结束，但是这样还是会出错的，不能显示显示我们想要的样式，这时就需要引入样式，import './simditor/styles/simditor.scss'，由于create-react-app脚手架不能编译sass文件，所以需要安装node-sass，安装命令：yarn add node-sass。最终完整代码为：

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;

效果为：

整个demo的完整代码github