You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298 lines
8.4 KiB
298 lines
8.4 KiB
/*
|
|
* @Description: quill 编辑器
|
|
* @Author: tangjiang
|
|
* @Github:
|
|
* @Date: 2019-12-18 08:49:30
|
|
* @LastEditors : tangjiang
|
|
* @LastEditTime : 2020-01-09 11:01:51
|
|
*/
|
|
import './index.scss';
|
|
import 'quill/dist/quill.core.css'; // 核心样式
|
|
import 'quill/dist/quill.snow.css'; // 有工具栏
|
|
import 'quill/dist/quill.bubble.css'; // 无工具栏
|
|
import 'katex/dist/katex.min.css'; // katex 表达式样式
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
import Quill from 'quill';
|
|
import katex from 'katex';
|
|
import deepEqual from './deepEqual.js'
|
|
import { fetchUploadImage } from '../../services/ojService.js';
|
|
import { getImageUrl } from 'educoder'
|
|
import ImageBlot from './ImageBlot';
|
|
import { Modal } from 'antd';
|
|
// import Toolbar from 'quill/modules/toolbar';
|
|
import FillBlot from './FillBlot';
|
|
const Size = Quill.import('attributors/style/size');
|
|
const Font = Quill.import('formats/font');
|
|
const { confirm } = Modal;
|
|
// const Color = Quill.import('attributes/style/color');
|
|
Size.whitelist = ['12px', '14px', '16px', '18px', '20px', false];
|
|
Font.whitelist = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
|
|
|
|
window.Quill = Quill;
|
|
window.katex = katex;
|
|
Quill.register(ImageBlot);
|
|
Quill.register(Size);
|
|
Quill.register(Font, true);
|
|
// Quill.register({'modules/toolbar': Toolbar});
|
|
Quill.register(FillBlot);
|
|
// Quill.register(Color);
|
|
|
|
|
|
function QuillForEditor ({
|
|
placeholder,
|
|
readOnly,
|
|
autoFocus,
|
|
options,
|
|
value,
|
|
imgAttrs = {}, // 指定图片的宽高
|
|
style = {},
|
|
wrapStyle = {},
|
|
showUploadImage,
|
|
onContentChange,
|
|
// addFill, // 点击填空成功的回调
|
|
// getQuillContent
|
|
}) {
|
|
// toolbar 默认值
|
|
const defaultConfig = [
|
|
'bold', 'italic', 'underline',
|
|
{size: ['12px', '14px', '16px', '18px', '20px']},
|
|
{align: []}, {list: 'ordered'}, {list: 'bullet'}, // 列表
|
|
{script: 'sub'}, {script: 'super'},
|
|
{ 'color': [] }, { 'background': [] },
|
|
{header: [1,2,3,4,5,false]},
|
|
'blockquote', 'code-block',
|
|
'link', 'image', 'video',
|
|
'formula',
|
|
'clean'
|
|
];
|
|
|
|
const editorRef = useRef(null);
|
|
// quill 实例
|
|
const [quill, setQuill] = useState(null);
|
|
const [selection, setSelection] = useState(null);
|
|
const [fillCount, setFillCount] = useState(0);
|
|
const [quillCtx, setQuillCtx] = useState({});
|
|
|
|
// 文本内容变化时
|
|
const handleOnChange = content => {
|
|
// getQuillContent && getQuillContent(quill);
|
|
onContentChange && onContentChange(content, quill);
|
|
};
|
|
|
|
const renderOptions = options || defaultConfig;
|
|
|
|
const bindings = {
|
|
tab: {
|
|
key: 9,
|
|
handler: function () {
|
|
console.log('调用了tab=====>>>>');
|
|
}
|
|
},
|
|
enter: {
|
|
key: 'Enter',
|
|
handler: function () {
|
|
console.log('enter====>>>>>>');
|
|
}
|
|
},
|
|
backspace: {
|
|
key: 'Backspace',
|
|
handler: function (range, context) {
|
|
console.log('调用了删除按钮', range, context);
|
|
// 1. 获取删除的文件
|
|
// 2. 判断删除的文件中包含空格的个数
|
|
// 3. 循环调用删除方法
|
|
const r = window.confirm('确定要删除吗?')
|
|
console.log('+++++', quill);
|
|
if (r) {
|
|
// 调用传入的删除事件
|
|
return true
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// quill 配置信息
|
|
const quillOption = {
|
|
modules: {
|
|
toolbar: renderOptions,
|
|
keyboard: {
|
|
bindings: bindings
|
|
}
|
|
// toolbar: {
|
|
// container: renderOptions
|
|
// }
|
|
},
|
|
readOnly,
|
|
placeholder,
|
|
theme: readOnly ? 'bubble' : 'snow',
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const quillNode = document.createElement('div');
|
|
editorRef.current.appendChild(quillNode);
|
|
const _quill = new Quill(editorRef.current, quillOption);
|
|
|
|
// _quill.keyboard.addBinding({
|
|
// key: 'tab'
|
|
// }, function (range, context) {
|
|
// console.log('点击了键盘的删除按钮: ', range, context);
|
|
// });
|
|
|
|
setQuill(_quill);
|
|
// 处理图片上传功能
|
|
_quill.getModule('toolbar').addHandler('image', (e) => {
|
|
const input = document.createElement('input');
|
|
input.setAttribute('type', 'file');
|
|
input.setAttribute('accept', 'image/*');
|
|
input.click();
|
|
|
|
input.onchange = async (e) => {
|
|
const file = input.files[0]; // 获取文件信息
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const range = _quill.getSelection(true);
|
|
let fileUrl = ''; // 保存上传成功后图片的url
|
|
// 上传文件
|
|
const result = await fetchUploadImage(formData);
|
|
// 获取上传图片的url
|
|
if (result.data && result.data.id) {
|
|
fileUrl = getImageUrl(`api/attachments/${result.data.id}`);
|
|
}
|
|
// 根据id获取文件路径
|
|
const { width, height } = imgAttrs;
|
|
// console.log('上传图片的url:', fileUrl);
|
|
if (fileUrl) {
|
|
_quill.insertEmbed(range.index, 'image', {
|
|
url: fileUrl,
|
|
alt: '图片信息',
|
|
onClick: showUploadImage,
|
|
width,
|
|
height
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
_quill.getModule('toolbar').addHandler('fill', (e) => {
|
|
setFillCount(fillCount + 1);
|
|
const range = _quill.getSelection(true);
|
|
_quill.insertText(range.index, '▁');
|
|
// 点击填空图标时，插入一个下划线
|
|
// 1. 获取编辑器内容
|
|
});
|
|
|
|
// TODO
|
|
/**
|
|
* 1.获取键盘删除事件
|
|
* 2.点击时获取删除的叶子节点 getLeaf(range.index)
|
|
*/
|
|
}, []);
|
|
|
|
// 设置值
|
|
useEffect(() => {
|
|
if (!quill) return
|
|
|
|
const previous = quill.getContents()
|
|
|
|
if (value && value.hasOwnProperty('ops')) {
|
|
// console.log(value.ops);
|
|
const ops = value.ops || [];
|
|
ops.forEach((item, i) => {
|
|
if (item.insert['image']) {
|
|
item.insert['image'] = Object.assign({}, item.insert['image'], {style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url)});
|
|
}
|
|
});
|
|
}
|
|
|
|
const current = value
|
|
// console.log('+++++', current);
|
|
if (!deepEqual(previous, current)) {
|
|
setSelection(quill.getSelection())
|
|
if (typeof value === 'string') {
|
|
quill.clipboard.dangerouslyPasteHTML(value, 'api')
|
|
} else {
|
|
quill.setContents(value)
|
|
}
|
|
}
|
|
}, [quill, value, setQuill]);
|
|
|
|
// 清除选择区域
|
|
useEffect(() => {
|
|
if (quill && selection) {
|
|
quill.setSelection(selection)
|
|
setSelection(null)
|
|
}
|
|
}, [quill, selection, setSelection]);
|
|
|
|
// 设置placeholder值
|
|
useEffect(() => {
|
|
if (!quill || !quill.root) return;
|
|
quill.root.dataset.placeholder = placeholder;
|
|
}, [quill, placeholder]);
|
|
|
|
// 处理内容变化
|
|
useEffect(() => {
|
|
if (!quill) return;
|
|
if (typeof handleOnChange !== 'function') return;
|
|
let handler;
|
|
quill.on(
|
|
'text-change',
|
|
(handler = (delta, oldDelta, source) => {
|
|
// let del = false;
|
|
// let delLen = 1;
|
|
// delta.ops.forEach(o => {
|
|
// // 存在删除并且只删除一个
|
|
// if (o.delete) {
|
|
// del = true;
|
|
// }
|
|
// });
|
|
// 删除编辑器内容
|
|
// if (del) {
|
|
// delLen = delta.ops[0].retain || 1; // 删除数组的长度
|
|
// // 获取删除的内容并判断其它是否有填空内容
|
|
// console.log('原编辑器内容', oldDelta);
|
|
// console.log('编辑器内容', quillCtx);
|
|
// }
|
|
// 获取删除的内容
|
|
// oldDelta
|
|
// if (del) {
|
|
// const ops = oldDelta.ops;
|
|
// const len = ops.length;
|
|
// // if (ops[len - 1] && ops[len - 1].insert) {
|
|
// // const str = ops[len - 1].insert;
|
|
// // const _len = str.length;
|
|
// // const _last = str.substr(_len - 1);
|
|
// // console.log('删除的一项', _last);
|
|
// // }
|
|
// }
|
|
const _ctx = quill.getContents();
|
|
setQuillCtx(_ctx);
|
|
handleOnChange(quill.getContents()); // getContents: 检索编辑器内容
|
|
})
|
|
);
|
|
return () => {
|
|
quill.off('text-change', handler);
|
|
}
|
|
}, [quill, handleOnChange]);
|
|
|
|
useEffect(() => {
|
|
if (!quill) return;
|
|
if (autoFocus) {
|
|
quill.focus();
|
|
}
|
|
}, [quill, autoFocus]);
|
|
|
|
// 返回结果
|
|
return (
|
|
<div className='quill_editor_for_react_area' style={wrapStyle}>
|
|
<div ref={editorRef} style={style}></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default QuillForEditor;
|