react 中 使用 没有启用图片上传功能的simditor 富文本编辑器

环境 node less  react ant
添加富文本编辑器功能：只需要一些常用功能，不需要文件上传，图片上传。所以我找了一个看着很简洁的。
富文本编辑器的选择 simditor

搭建环境：

          npm install jquery --save-dev
	  npm install simditor --save-dev

安装只保存在开发环境下，生产环境直接生成静态文件所以不需要生产环境

jsx页面引入：必要的包（一个form表单里的富文本，修改保存）

import React from "react";
import {Form, Input } from "antd";
const createForm = Form.create;
const FormItem = Form.Item;
import $ from "jquery" ;
import Simditor from "simditor";

在 componentDidMount 中获取真是DOM 绑定编辑器创建实例，并设置值

this.editor.on是编辑器监听内容改变事件，用于将该值赋值给下面真是的desc字段

componentDidMount() { 
         this.editor = new Simditor({
            textarea: this.refs.simditor,
            placeholder: '请输入告警处理说明',
            //toolbarFloat: false,
            //toolbarFloatOffset:10,
            toolbar: [
                'title',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'fontScale',
                'color',
                'ol',
                'ul',
                'blockquote',
                'code',
                'table',
                'alignment',
                'hr',
            ],
            codeLanguages:[
                { name: 'CSS', value: 'css' },
                { name: 'Erlang', value: 'erlang' },
                { name: 'Less', value: 'less' },
                { name: 'Sass', value: 'sass' },
                { name: 'Diff', value: 'diff' },
                { name: 'HTML,XML', value: 'html' },
                { name: 'JSON', value: 'json' },
                { name: 'Java', value: 'java' },
                { name: 'JavaScript', value: 'js' },
                { name: 'PHP', value: 'php' },
                { name: 'SQL', value: 'sql'}
                ]
            
        });
       
        this.editor.setValue(this.state.data.monitorDescription);


        this.editor.on("valuechanged", (e, src) => {
           //console.log("valuechanged");
           let desc = this.editor.getValue();
           if(this.state.data.monitorDescription == desc ){
             //  console.log("valuechanged-1");
           }else{
             //  console.log("valuechanged-2");
               let data= this.state.data;
                data.monitorDescription = desc;
                this.setState({
                    data:data
                });
           }
          // console.log(desc);
           
        });
    }

直接返回render的代码（前两天刚看一本react书籍，其中render的建议就是不要有state的改变，所以未优化）
 

render() {
       const {getFieldDecorator, getFieldError, isFieldValidating} = this.props.form;
         // 初始化form表单的值
        this.state.data = this.props.init.data;
	// 判断 改编后赋值与改变前是否一致。一致则跳出
        if(this.editor !==undefined ){
            let desc = this.editor.getValue();
            if(this.state.data.Description !== desc){
                 this.editor.setValue(this.state.data.Description);
            }
           
        }
       
        return (
            <div>
                <Form layout="horizontal">
			//simditor 富文本编辑器的textarea 
                    <textarea className="form-control" ref="simditor" placeholder="这里输入内容"  rows="10"  ></textarea>
			//实际存储并保存的富文本编辑器内容的隐藏字段
                    {getFieldDecorator('Description', {
                            initialValue: this.state.data.Description
                        })(
                            <Input type="hidden"   />
                     )}
                  	//隐藏主键
                    <Input type="hidden" {... getFieldDecorator('Id', {initialValue: this.state.data.Id})} />
                </Form>
            </div>
        );
    }

以上代码遇到问题 ：开始没有做上一次赋值和本次赋值一致判断，所以导致死循环。富文本一旦该改变，则 this.editor.on("valuechanged", (e, src)）方法执行，对state赋值，然后 render 里又改变。解决加一层判断


第二个大坑：我的项目是使用less编译生成css，而富文本编辑器的是 sass和css的。所以项目无法加载编辑器的样式，解决办法。新建一个文件夹，把simditor.css 复制并改名为simditor.less.然后在项目的统一less入口导入这个文件即可。