富文本编辑器simditor

1. 使用

依赖了jQuery, 而且它有自己的样式, 别忘记从node_modules引入,例如

import Simditor 		from 'simditor';
import 'simditor/styles/simditor.scss';

核心代码

var editor = new Simditor({
  textarea: $('#editor')
  //optional options
});

2. 原理

它一般是先创建一个textarea,然后当这个插件初始化的时候,它把这个文本域隐藏,自己建一个文本域

3. 再封装

封装成react组件,先创建文本域,然后组件初始化的时候换成它的富文本编辑器

import React 			from 'react';
import 'simditor/styles/simditor.scss';
import Simditor 		from 'simditor';

// 通用富文本编辑器, 依赖jQuery
class RichEditor extends React.Component {
	constructor (props) {
		super(props);
	}
	componentDidMount () {
		this.loadRichEditor()
	}
	// 加载富文本编辑器
	loadRichEditor () {
		let element = this.refs['textarea'];
		this.simditor = new Simditor({
		  	textarea: $(element),
		  	defaultValue: this.props.placeholder || '请输入',
		  	upload: {
		  		url: '/manage/product/richtext_img_upload.do', // 富文本的图片上传
		  		defaultImage: '',
		  		fileKey: 'upload_file' // 对应后台接口的name,例如:后端图片接口require: <input type="file" name="upload_file">
		  	}
		});
		this.bindEditorChange();
	}
	// 把结果暴露给父组件
	bindEditorChange () {
		// this.simditor.on() 和 this.simditor.getValue()都是simditor提供的方法
		this.simditor.on('valuechanged' , () => {
			this.props.onValueChange(this.simditor.getValue())
		})
	}
	render () {
		return (
			<div className="rich-editor">
				<textarea ref="textarea"></textarea>
			</div>
		);
	}
}

export default RichEditor;

4. 报错

Simditor.connect is not a function

这是因为版本问题, 也和jQuery有关
降低simditor版本就行了

我的react项目里面:

[email protected]
[email protected]