From 206342d8916bbbf7156aa6cb92c6c6209e69fd48 Mon Sep 17 00:00:00 2001 From: tangjiang <465264938@qq.com> Date: Thu, 9 Jan 2020 18:28:41 +0800 Subject: [PATCH 1/2] update quill --- public/react/src/common/quillForEditor/FillBlot.js | 9 +++++---- public/react/src/common/quillForEditor/index.js | 9 ++++++--- .../developer/newOrEditTask/leftpane/editorTab/index.js | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/public/react/src/common/quillForEditor/FillBlot.js b/public/react/src/common/quillForEditor/FillBlot.js index 144b499ee..2f9414253 100644 --- a/public/react/src/common/quillForEditor/FillBlot.js +++ b/public/react/src/common/quillForEditor/FillBlot.js @@ -4,16 +4,17 @@ * @Github: * @Date: 2020-01-06 09:02:29 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-09 11:58:52 + * @LastEditTime : 2020-01-09 15:00:13 */ import Quill from 'quill'; // let Inline = Quill.import('blots/inline'); -const BlockEmbed = Quill.import('blots/block/embed'); +const BlockEmbed = Quill.import('blots/embed'); class FillBlot extends BlockEmbed { static create (value) { - const node = super.cerate(); + const node = super.cerate(value); // node.classList.add('icon icon-bianji2'); // node.setAttribute('data-fill', 'fill'); + console.log('编辑器值===》》》》》', value); node.setAttribute('data_index', value.data_index); node.nodeValue = value.text; return node; @@ -28,7 +29,7 @@ class FillBlot extends BlockEmbed { } -FillBlot.blotName = "fill"; +FillBlot.blotName = "fill-blot"; FillBlot.tagName = "span"; export default FillBlot; diff --git a/public/react/src/common/quillForEditor/index.js b/public/react/src/common/quillForEditor/index.js index f892e9b8d..599bffa1f 100644 --- a/public/react/src/common/quillForEditor/index.js +++ b/public/react/src/common/quillForEditor/index.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-12-18 08:49:30 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-09 11:56:10 + * @LastEditTime : 2020-01-09 14:52:58 */ import './index.scss'; import 'quill/dist/quill.core.css'; // 核心样式 @@ -31,7 +31,9 @@ Quill.register(ImageBlot); Quill.register(Size); Quill.register(Font, true); // Quill.register({'modules/toolbar': Toolbar}); -Quill.register(FillBlot); +Quill.register({ + 'formats/fill': FillBlot +}); // Quill.register(Color); @@ -194,10 +196,11 @@ function QuillForEditor ({ }); _quill.getModule('toolbar').addHandler('fill', (e) => { + console.log('点击了填空=====>>>>>>', e); setFillCount(fillCount + 1); const range = _quill.getSelection(true); // _quill.insertText(range.index, '▁', { 'data_index': fillCount }); - _quill.insertEmbed(range.index, 'span', { + _quill.insertEmbed(range.index, 'fill', { text: '▁', 'data_index': fillCount }); diff --git a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js index 349404dfd..b388156c8 100644 --- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js +++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-11-20 10:35:40 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-09 14:18:37 + * @LastEditTime : 2020-01-09 16:54:45 */ import './index.scss'; // import 'katex/dist/katex.css'; From 6f5ea589f48f8fc889ca2132568ec2fdc49b9511 Mon Sep 17 00:00:00 2001 From: tangjiang <465264938@qq.com> Date: Fri, 10 Jan 2020 15:06:43 +0800 Subject: [PATCH 2/2] update quill autofocus --- .../react/src/common/quillForEditor/index.js | 24 +++++++++---------- .../newOrEditTask/leftpane/editorTab/index.js | 3 ++- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/public/react/src/common/quillForEditor/index.js b/public/react/src/common/quillForEditor/index.js index 599bffa1f..525feba09 100644 --- a/public/react/src/common/quillForEditor/index.js +++ b/public/react/src/common/quillForEditor/index.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-12-18 08:49:30 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-09 14:52:58 + * @LastEditTime : 2020-01-10 15:05:27 */ import './index.scss'; import 'quill/dist/quill.core.css'; // 核心样式 @@ -40,7 +40,7 @@ Quill.register({ function QuillForEditor ({ placeholder, readOnly, - autoFocus, + autoFocus = false, options, value, imgAttrs = {}, // 指定图片的宽高 @@ -196,7 +196,7 @@ function QuillForEditor ({ }); _quill.getModule('toolbar').addHandler('fill', (e) => { - console.log('点击了填空=====>>>>>>', e); + // console.log('点击了填空=====>>>>>>', e); setFillCount(fillCount + 1); const range = _quill.getSelection(true); // _quill.insertText(range.index, '▁', { 'data_index': fillCount }); @@ -232,16 +232,21 @@ function QuillForEditor ({ } const current = value - // console.log('+++++', current); if (!deepEqual(previous, current)) { setSelection(quill.getSelection()) if (typeof value === 'string') { - quill.clipboard.dangerouslyPasteHTML(value, 'api') + quill.clipboard.dangerouslyPasteHTML(value, 'api'); + if (autoFocus) { + quill.focus(); + } else { + quill.blur(); + } } else { quill.setContents(value) + if (autoFocus) quill.focus(); } } - }, [quill, value, setQuill]); + }, [quill, value, setQuill, autoFocus]); // 清除选择区域 useEffect(() => { @@ -275,13 +280,6 @@ function QuillForEditor ({ } }, [quill, handleOnChange]); - useEffect(() => { - if (!quill) return; - if (autoFocus) { - quill.focus(); - } - }, [quill, autoFocus]); - // 返回结果 return (
diff --git a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js index b388156c8..6fc264663 100644 --- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js +++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-11-20 10:35:40 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-09 16:54:45 + * @LastEditTime : 2020-01-10 15:06:23 */ import './index.scss'; // import 'katex/dist/katex.css'; @@ -453,6 +453,7 @@ class EditTab extends React.Component { colon={ false } >