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入口导入这个文件即可。