react中simdiotr富文本的基础使用

　

　　simditor是什么？

　　一个基于浏览器的文本编辑器，也就是我们通常说的富文本

　　

 

　　simditor官网

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

　　https://github.com/mycolorway/simditor  (github)

 

　　simditor安装

　　npm install simditor

 

　　simditor卸载

　　npm uninstall simditor

 

　　simditor使用

　　1.在你react组件中引入simditor和css样式

　　

 

　　2.在你react组件的render()中return下面的html代码

　　

 

　　3.Simditor需要在组件加载时进行初始化，在生命周期函数componentDidMount()中调用richEditor()

　　

 　　注：其中this.refs[''editor-descripition"]指代上面DOM节点<textarea ref="editor-descripition"></textarea>

 

　　如果要插入多个富文本编辑器，只需要在创建相应的simditor实列

　　

　　

 

　　若运行后报错如下图提示

　　

 

 　　注：可降低版本，经本人测试，simditor2.3.6版本可解决上述问题

 

　　DEMO

import React, { Component } from 'react';
import Simditor from 'simditor';
import 'simditor/styles/simditor.css';

class QuestionList extends Component {

    constructor(props) {
        super(props)
        this.state = {
          
        }
    }

    componentDidMount() {
        this.richEditor();
    }

    richEditor() {
        let element_editor_descripition = this.refs['editor-descripition'];
        let element_input_descripition = this.refs['editor-input-descripition'];
        let element_output_descripition = this.refs['editor-output-descripition'];
        let editor1 = new Simditor({
            textarea: element_editor_descripition,
            toolbar: [
                'title', 'bold', 'italic',
                'underline', 'strikethrough', 'fontScale',
                'color', 'ol', 'ul',
                'blockquote', 'code', 'table',
                'link', 'image', 'indent',
                'outdent', 'alignment', 'hr']
        });
        let editor2 = new Simditor({
            textarea: element_input_descripition,
            toolbar: [
                'title', 'bold', 'italic',
                'underline', 'strikethrough', 'fontScale',
                'color', 'ol', 'ul',
                'blockquote', 'code', 'table',
                'link', 'image', 'indent',
                'outdent', 'alignment', 'hr']
        });
        let editor3 = new Simditor({
            textarea: element_output_descripition,
            toolbar: [
                'title', 'bold', 'italic',
                'underline', 'strikethrough', 'fontScale',
                'color', 'ol', 'ul',
                'blockquote', 'code', 'table',
                'link', 'image', 'indent',
                'outdent', 'alignment', 'hr']
        });
    }

    render() {

        return (
           <div>
                <textarea ref="editor-descripition" placeholder="富文本编辑器"></textarea>
                <textarea ref="editor-input-descripition" placeholder="富文本编辑器"></textarea>
                <textarea ref="editor-output-descripition" placeholder="富文本编辑器"></textarea>
           </div>
        );
    }
}

export default QuestionList;

 

　　补充：按照上面的步骤，simditor富文本就已经呈现出了，但上传图片功能还需要单独设置，

　　　　　设置成功后如下图所示，配置详见官网

　　　　　

　　

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点