富文本编辑器--基于wangEditor富文本编辑器的改进与完善
做组里项目的时候,需要这样一个可以即插即用的富文本编辑器,在其他的项目里通过import方式可以直接使用,因为项目本身是用react写的,这个wangEditor富文本编辑器刚好可用于React项目,且页面看起来比较简洁清爽,故搬运过来作了些配置,完善了上传图片的功能,并添加了将输入文本内容转换为HTML格式和JSON格式的功能。
1.按照wangEditor官网的提示,拉到代码之后,有以下一段文字指示你用于React:
官网就是官网,提示都写的毫无营养。折腾了一下这里,从项目目录开始看起,看一下怎么用于React项目:
教程里说的npm start启动wangEditor的方式只有在如图的项目目录下才可生效
2.项目应用:
import React, { Component } from 'react';
import E from 'wangeditor';
import './App.css';
import Card from "../../ishow/Card/index";
import Row from '../../ishow/LayoutComponent/row/index';
import Col from '../../ishow/LayoutComponent/col/index';
import Breadcrumb from '../../ishow/Breadcrumb/index';
class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
editorContent: '',
editorContentJson: ''
}
}
componentDidMount() {
const elem = this.refs.editorElem
const editor = new E(elem)
const text1 = document.getElementById('text1')
const text2 = document.getElementById('text2')
const onUploadFile = (url, name, folder, type, style) => {
return url + '?name=' + name + '&folder=' + folder + '&type=' + type + '&style=' + style;
};
editor.customConfig.uploadImgServer = 'http://10.10.33.144/filebroker/upload'
editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
let file;
if (files && files.length) {
file = files[0];
} else {
return
}
const uploadImgServer = "http://10.10.33.144/filebroker/upload";
const xhr = new XMLHttpRequest();
const test = onUploadFile(uploadImgServer, 'image.jpg', 'local', 0, 1);
xhr.open('POST', test);
const data = new FormData();
data.append('image', file);
xhr.send(data);
xhr.addEventListener('load', () => {
const response = JSON.parse(xhr.responseText);
const imgUrl = response.data[0].local;
insert(imgUrl)
});
xhr.addEventListener('error', () => {
const error = JSON.parse(xhr.responseText);
alert('上传失败');
});
}
// 使用 onchange 函数监听内容的变化,并实时更新到 state 中
editor.customConfig.onchange = (html, getJSON) => {
var json = editor.txt.getJSON()
this.setState({
editorContent: html,
editorContentJson: json
})
document.getElementById('text1').value = html
document.getElementById('text2').value = JSON.stringify(json)//转换为JSON字符串
console.log(JSON.stringify(json))
}
editor.create()//将生成编辑器
}
render() {
const { editorContent } = this.state;
return (
<div className="App">
<h2>富文本编辑器</h2>
<Breadcrumb first="UI" second="富文本" />
<div ref="editorElem" style={{ textAlign: 'left' }}>
<div className='div1'>
</div>
</div>
<Row>
<Col className="gutter-row" md={12} >
<Card style={{ borderStyle: 'none', boxShadow: '0px 0px 0px #888888' }}
header={
<div>
<span style={{ lineHeight: '20px', fontSize: '16px', fontWeight: '600' }}>同步转换HTML</span>
</div>
}
>
<textarea id="text1" style={{ width: '100%', height: '100px', borderStyle: 'none' }}></textarea>
</Card>
</Col>
<Col className="gutter-row" md={12}>
<Card style={{ borderStyle: 'none', boxShadow: '0px 0px 0px #888888' }}
header={
<div>
<span style={{ lineHeight: '20px', fontSize: '16px', fontWeight: '600' }}>同步转换JSON</span>
</div>
}>
<textarea id="text2" style={{ width: '100%', height: '100px', borderStyle: 'none' }}></textarea>
</Card>
</Col>
</Row>
</div>
);
}
}
export default App;
主要涉及的是两个地方的改动:
1,本地图片上传
上传地址拼接方法:
const onUploadFile = (url, name, folder, type, style) => {
return url + '?name=' + name + '&folder=' + folder + '&type=' + type + '&style=' + style;
};
editor.customConfig.uploadImgServer = 'http://10.10.33.144/filebroker/upload'
图片上传实现:
editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
let file;
if (files && files.length) {
file = files[0];
} else {
return
}
const uploadImgServer = "http://10.10.33.144/filebroker/upload";
const xhr = new XMLHttpRequest();
const test = onUploadFile(uploadImgServer, 'image.jpg', 'local', 0, 1);
xhr.open('POST', test);
const data = new FormData();
data.append('image', file);
xhr.send(data);
xhr.addEventListener('load', () => {
const response = JSON.parse(xhr.responseText);
const imgUrl = response.data[0].local;
insert(imgUrl)
});
xhr.addEventListener('error', () => {
const error = JSON.parse(xhr.responseText);
alert('上传失败');
});
}
图片上传可参考formdata表单提交的方式,点击打开链接
imgUrl是从后台拿到的图片的地址,insert是从后台拿到url后将图片插入到编辑器中的方法。
2.将编辑输入内容转换为HTML和JSON数据格式
给定初始状态:
this.state = {
editorContent: '',
editorContentJson: ''
}
通过获取id的方式两个编辑区域:
const text1 = document.getElementById('text1')
const text2 = document.getElementById('text2')
编辑内容格式转换方法:
editor.customConfig.onchange = (html, getJSON) => {
var json = editor.txt.getJSON()
this.setState({
editorContent: html,
editorContentJson: json
})
document.getElementById('text1').value = html
document.getElementById('text2').value = JSON.stringify(json)//转换为JSON字符串
}
editor.create()//将生成编辑器
}
text1和text2对应的分别是如下两部分的编辑区域:将两个编辑区域的内容格式分别定义为html和json格式(json格式需要做一步转换字符串操作: JSON.stringfy());
因为这个富文本编辑器是集成到公司项目作为一个组件来用的,所以如Card这样的组件都是直接import完了直接用的,一些依赖也是直接通过yarn install方法获取的,还未完全将其抽离出来做成组件,这款富文本编辑器还有很多值得深究的地方,以后有时间再研究。
上一篇: php time()与date()时间与本地电脑有区别
下一篇: (进阶篇)php生成验证码程序代码