|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
/*
|
|
|
|
|
* @Description: quill 编辑器
|
|
|
|
|
* @Author: tangjiang
|
|
|
|
|
* @Github:
|
|
|
|
|
* @Github:
|
|
|
|
|
* @Date: 2019-12-18 08:49:30
|
|
|
|
|
* @LastEditors : tangjiang
|
|
|
|
|
* @LastEditTime : 2020-01-10 15:05:27
|
|
|
|
@ -57,7 +57,7 @@ function QuillForEditor ({
|
|
|
|
|
{size: ['12px', '14px', '16px', '18px', '20px']},
|
|
|
|
|
{align: []}, {list: 'ordered'}, {list: 'bullet'}, // 列表
|
|
|
|
|
{script: 'sub'}, {script: 'super'},
|
|
|
|
|
{ 'color': [] }, { 'background': [] },
|
|
|
|
|
{ 'color': [] }, { 'background': [] },
|
|
|
|
|
{header: [1,2,3,4,5,false]},
|
|
|
|
|
'blockquote', 'code-block',
|
|
|
|
|
'link', 'image', 'video',
|
|
|
|
@ -67,7 +67,7 @@ function QuillForEditor ({
|
|
|
|
|
|
|
|
|
|
const editorRef = useRef(null);
|
|
|
|
|
// quill 实例
|
|
|
|
|
const [quill, setQuill] = useState(null);
|
|
|
|
|
const [quill, setQuill] = useState(null);
|
|
|
|
|
const [selection, setSelection] = useState(null);
|
|
|
|
|
const [fillCount, setFillCount] = useState(0);
|
|
|
|
|
const [quillCtx, setQuillCtx] = useState({});
|
|
|
|
@ -77,7 +77,7 @@ function QuillForEditor ({
|
|
|
|
|
// getQuillContent && getQuillContent(quill);
|
|
|
|
|
onContentChange && onContentChange(content, quill);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const renderOptions = options || defaultConfig;
|
|
|
|
|
|
|
|
|
|
const bindings = {
|
|
|
|
@ -96,10 +96,10 @@ function QuillForEditor ({
|
|
|
|
|
backspace: {
|
|
|
|
|
key: 'Backspace',
|
|
|
|
|
/**
|
|
|
|
|
* @param {*} range
|
|
|
|
|
* @param {*} range
|
|
|
|
|
* { index, // 删除元素的位置
|
|
|
|
|
* length // 删除元素的个数, 当删除一个时, length=0, 其它等于删除的元素的个数
|
|
|
|
|
* }
|
|
|
|
|
* }
|
|
|
|
|
* @param {*} context 上下文
|
|
|
|
|
*/
|
|
|
|
|
handler: function (range, context) {
|
|
|
|
@ -126,7 +126,7 @@ function QuillForEditor ({
|
|
|
|
|
// } else {
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
return true;
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
@ -190,7 +190,7 @@ function QuillForEditor ({
|
|
|
|
|
onClick: showUploadImage,
|
|
|
|
|
width,
|
|
|
|
|
height
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
@ -208,19 +208,19 @@ function QuillForEditor ({
|
|
|
|
|
// 1. 获取编辑器内容
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// TODO
|
|
|
|
|
// 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 || [];
|
|
|
|
@ -234,7 +234,8 @@ function QuillForEditor ({
|
|
|
|
|
const current = value
|
|
|
|
|
if (!deepEqual(previous, current)) {
|
|
|
|
|
setSelection(quill.getSelection())
|
|
|
|
|
if (typeof value === 'string') {
|
|
|
|
|
if (typeof value === 'string' && value) {
|
|
|
|
|
// debugger
|
|
|
|
|
quill.clipboard.dangerouslyPasteHTML(value, 'api');
|
|
|
|
|
if (autoFocus) {
|
|
|
|
|
quill.focus();
|
|
|
|
@ -268,7 +269,7 @@ function QuillForEditor ({
|
|
|
|
|
if (typeof handleOnChange !== 'function') return;
|
|
|
|
|
let handler;
|
|
|
|
|
quill.on(
|
|
|
|
|
'text-change',
|
|
|
|
|
'text-change',
|
|
|
|
|
(handler = (delta, oldDelta, source) => {
|
|
|
|
|
const _ctx = quill.getContents();
|
|
|
|
|
setQuillCtx(_ctx);
|
|
|
|
|