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富文本就已经呈现出了,但上传图片功能还需要单独设置,

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