|
|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
* @Github:
|
|
|
|
|
* @Date: 2019-12-18 08:49:30
|
|
|
|
|
* @LastEditors : tangjiang
|
|
|
|
|
* @LastEditTime : 2019-12-31 15:11:37
|
|
|
|
|
* @LastEditTime : 2020-01-06 16:45:50
|
|
|
|
|
*/
|
|
|
|
|
import './index.scss';
|
|
|
|
|
import 'quill/dist/quill.core.css'; // 核心样式
|
|
|
|
|
@ -18,8 +18,11 @@ import deepEqual from './deepEqual.js'
|
|
|
|
|
import { fetchUploadImage } from '../../services/ojService.js';
|
|
|
|
|
import { getImageUrl } from 'educoder'
|
|
|
|
|
import ImageBlot from './ImageBlot';
|
|
|
|
|
// import Toolbar from 'quill/modules/toolbar';
|
|
|
|
|
import FillBlot from './FillBlot';
|
|
|
|
|
const Size = Quill.import('attributors/style/size');
|
|
|
|
|
const Font = Quill.import('formats/font');
|
|
|
|
|
|
|
|
|
|
// 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'];
|
|
|
|
|
@ -29,6 +32,8 @@ 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 ({
|
|
|
|
|
@ -42,6 +47,7 @@ function QuillForEditor ({
|
|
|
|
|
wrapStyle = {},
|
|
|
|
|
showUploadImage,
|
|
|
|
|
onContentChange,
|
|
|
|
|
// addFill, // 点击填空成功的回调
|
|
|
|
|
// getQuillContent
|
|
|
|
|
}) {
|
|
|
|
|
// toolbar 默认值
|
|
|
|
|
@ -62,6 +68,8 @@ function QuillForEditor ({
|
|
|
|
|
// quill 实例
|
|
|
|
|
const [quill, setQuill] = useState(null);
|
|
|
|
|
const [selection, setSelection] = useState(null);
|
|
|
|
|
const [fillCount, setFillCount] = useState(0);
|
|
|
|
|
const [quillCtx, setQuillCtx] = useState({});
|
|
|
|
|
|
|
|
|
|
// 文本内容变化时
|
|
|
|
|
const handleOnChange = content => {
|
|
|
|
|
@ -70,18 +78,23 @@ function QuillForEditor ({
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const renderOptions = options || defaultConfig;
|
|
|
|
|
|
|
|
|
|
// quill 配置信息
|
|
|
|
|
const quillOption = {
|
|
|
|
|
modules: {
|
|
|
|
|
toolbar: renderOptions
|
|
|
|
|
// toolbar: {
|
|
|
|
|
// container: renderOptions
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
readOnly,
|
|
|
|
|
placeholder,
|
|
|
|
|
theme: readOnly ? 'bubble' : 'snow'
|
|
|
|
|
theme: readOnly ? 'bubble' : 'snow',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
|
|
const quillNode = document.createElement('div');
|
|
|
|
|
editorRef.current.appendChild(quillNode);
|
|
|
|
|
const _quill = new Quill(editorRef.current, quillOption);
|
|
|
|
|
@ -121,13 +134,20 @@ function QuillForEditor ({
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
_quill.getModule('toolbar').addHandler('fill', (e) => {
|
|
|
|
|
setFillCount(fillCount + 1);
|
|
|
|
|
const range = _quill.getSelection(true);
|
|
|
|
|
_quill.insertText(range.index, '▁');
|
|
|
|
|
// 点击填空图标时，插入一个下划线
|
|
|
|
|
// 1. 获取编辑器内容
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
// 设置值
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!quill) return
|
|
|
|
|
|
|
|
|
|
// debugger;
|
|
|
|
|
const previous = quill.getContents()
|
|
|
|
|
|
|
|
|
|
if (value && value.hasOwnProperty('ops')) {
|
|
|
|
|
@ -173,7 +193,36 @@ function QuillForEditor ({
|
|
|
|
|
let handler;
|
|
|
|
|
quill.on(
|
|
|
|
|
'text-change',
|
|
|
|
|
(handler = () => {
|
|
|
|
|
(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: 检索编辑器内容
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
|
cxt
5 years ago