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

环境介绍功能需求步骤实现npm安装simditor依赖jsx页面引入componentDidMount 获取DOM 绑定编辑器render中的代码问题解决

环境介绍

nodejs + npm + react + ant

功能需求

添加富文本编辑器功能：只需要一些常用功能，不需要文件上传，图片上传。界面尽量清新简洁。因此 富文本编辑器的选择 simditor

步骤实现

npm安装simditor依赖

npm install jquery --save-devnpm 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入口导入这个文件即可。