react-quill 富文本编辑器
安装包
- package.json
"quill-image-drop-module": "^1.0.3",
"react-quill": "^1.1.0",
- 支持剪切板粘贴图片的功能
import ReactQuill, { Quill } from 'react-quill';
import { ImageDrop } from 'quill-image-drop-module';
import 'react-quill/dist/quill.snow.css';
// 在quiil中注册quill-image-drop-module
Quill.register('modules/imageDrop', ImageDrop);
- constructor 构造函数
can't call ref(also others like state, props, function, etc) on react quill custom handler
imageHandler is not getting called becuase its not binded to App component this.
In the object modules , this referring modules and not App component.
save the this ref and use it inside modules object
constructor(props) {
super(props)
this.quillRef = null; // Quill instance
this.reactQuillRef = null; // ReactQuill component
this.state = { text: ''} // You can also pass a Quill Delta here
//this.handleChange = this.handleChange.bind(this)
this.imageHandler = this.imageHandler.bind(this)
this.modules = {
toolbar: {
container: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote','code-block'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link', 'image'],
[{ 'color': [] }, { 'background': [] }],
['clean'],
],
handlers: {
image: this.imageHandler
}
},
imageDrop: true,
}
}
将 this.modules 写到构造函数中，这样工具栏上的就可以调用到编辑器的 this 函。如果不写到构造函数中，会报错 xxx is not a function。
将工具栏默认的 image 事件，代理到自定义的 imageHandler 函数上面，获取到的图片是 File Object
还有一个 image drop 的包，有一个 Quill.register 将这个模块注册到 Quill 上面。监测剪贴板的 dnd 事件，获取到的图片是 base64
有 JavaScript 函数可以将 File Object 和 base64 转换成二进制流，存储到后端。然后用后端返回的 url 插入到 delta 中。
- ImageDrop.js
这个地方，不是直接使用 npm 安装的 quill-image-drop-module，使用 import {ImageDrop} from 'quill-image-drop-module'; 会报错，引用失败。讲 ImageDrop.js 文件存放在编辑器组件同级的目录下面， import {ImageDrop} from './ImageDrop.js';
火狐自带粘贴图片功能，而谷歌只支持一半。我们看到模块作者在粘贴图片函数中进行了判断，如果没有这段判断，火狐浏览器会出现同时粘贴两张一样图片的情况，而谷歌浏览器则能截取浏览器外的图片粘贴。这是因为quill编辑器本身会有部分粘贴功能。
修改粘贴函数
handlePaste(evt) {
if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
this.readFiles(evt.clipboardData.items, dataUrl => {
const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
if (userAgent.indexOf('Firefox') > -1) {
const selection = this.quill.getSelection();
if (selection) {
// we must be in a browser that supports pasting (like Firefox)
// so it has already been placed into the editor
} else {
// otherwise we wait until after the paste when this.quill.getSelection()
// will return a valid index
setTimeout(() => this.insert(dataUrl), 0);
}
} else {
setTimeout(() => this.insert(dataUrl), 0);
}
});
}
}
PHP base64 图片上传
JavaScript 前端把 base64 处理成 Blob 对象后，调用文件上传的接口，图片存储没有成功。
换了个方式，前端直接把 base64 的字符串扔给 php，由 php 处理成上传接口接受的二进制流。
$base64string = '';
$base64string = str_replace(' ', '+', $base64string); // 空格替换为 + 号
$arr = explode(',', $base64string);
$decodedString = base64_decode( $arr[1] );
file_put_contents($filename, $decodedString);
- onChange 函数
这个函数并没有用到，可以了解下几个参数
// 当修改文本框的内容时，会自动调用onQuillChange函数
onQuillChange = (content, delta, source, editor) => {
// content 是真实的DOM节点
// delta 记录了修改的对象，下篇文章详述
// source 值为user或api
// editor 文本框对象，可以调用函数获取content, delta值
};
A Quill component for React
Quill-Delta的文档：https://quilljs.com/docs/delta
