react中使用simditor富文本編輯器

環境介紹

nodejs + npm + react + ant

功能需求

添加富文本編輯器功能：只需要一些常用功能，不需要文件上傳，圖片上傳。界面儘量清新簡潔。因此 富文本編輯器的選擇 simditor

步驟實現

npm安裝simditor依賴

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

注：安裝只保存在開發環境下，生產環境直接生成靜態文件所以不需要生產環境

jsx頁面引入

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 綁定編輯器

在 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中的代碼

直接返回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入口導入這個文件即可。