富文本编辑器simditor

最新推荐文章于 2024-04-21 09:59:26 发布

上官不会飞

最新推荐文章于 2024-04-21 09:59:26 发布

阅读量1k

点赞数 1

分类专栏：其他

本文链接：https://blog.csdn.net/weixin_42588966/article/details/105313663

版权

本文介绍了富文本编辑器Simditor的使用方法，包括依赖jQuery、样式引入和核心代码展示。同时，文章深入讲解了Simditor的工作原理，即通过隐藏textarea并创建新的文本域实现。此外，还分享了如何将Simditor封装为React组件的过程。在实际应用中，作者遇到了版本冲突导致的报错问题，解决办法是降低Simditor的版本。

摘要由CSDN通过智能技术生成

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&#