diff --git a/public/react/src/common/quillForEditor/FillBlot.js b/public/react/src/common/quillForEditor/FillBlot.js index 2f9414253..5e5e2aa77 100644 --- a/public/react/src/common/quillForEditor/FillBlot.js +++ b/public/react/src/common/quillForEditor/FillBlot.js @@ -4,12 +4,12 @@ * @Github: * @Date: 2020-01-06 09:02:29 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-09 15:00:13 + * @LastEditTime : 2020-02-05 10:44:01 */ import Quill from 'quill'; -// let Inline = Quill.import('blots/inline'); -const BlockEmbed = Quill.import('blots/embed'); -class FillBlot extends BlockEmbed { +let Inline = Quill.import('blots/inline'); +// const BlockEmbed = Quill.import('blots/embed'); +class FillBlot extends Inline { static create (value) { const node = super.cerate(value); // node.classList.add('icon icon-bianji2'); @@ -29,7 +29,7 @@ class FillBlot extends BlockEmbed { } -FillBlot.blotName = "fill-blot"; +FillBlot.blotName = "fill"; 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 d993905a0..012743141 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-11 13:43:31 + * @LastEditTime : 2020-02-05 11:23:03 */ import './index.scss'; import 'quill/dist/quill.core.css'; // 核心样式 @@ -18,7 +18,7 @@ import deepEqual from './deepEqual.js' import { fetchUploadImage } from '../../services/ojService.js'; import { getImageUrl } from 'educoder' import ImageBlot from './ImageBlot'; -// import FillBlot from './FillBlot'; +import FillBlot from './FillBlot'; const Size = Quill.import('attributors/style/size'); const Font = Quill.import('formats/font'); // const Color = Quill.import('attributes/style/color'); @@ -31,9 +31,9 @@ Quill.register(ImageBlot); Quill.register(Size); Quill.register(Font, true); // Quill.register({'modules/toolbar': Toolbar}); -// Quill.register({ -// 'formats/fill': FillBlot -// }); +Quill.register({ + 'formats/fill': FillBlot +}); // Quill.register(Color); @@ -48,7 +48,8 @@ function QuillForEditor ({ wrapStyle = {}, showUploadImage, onContentChange, - // addFill, // 点击填空成功的回调 + addFill, // 点击填空成功的回调 + deleteFill // 删除填空,返回删除的下标 // getQuillContent }) { // toolbar 默认值 @@ -97,29 +98,39 @@ function QuillForEditor ({ * @param {*} context 上下文 */ handler: function (range, context) { - // console.log('调用了删除按钮', range, context); /** - * 1. 根据range中的index及length值获取删除的起始位置 - * length === 0 -> start = index - 1; - * length !== 0 -> start = index - * 2. 获取删除的元素内容 - * ctx = this.quill.getText(start, length === 0 ? 1 : length); - * 3. 判断当前删除的下划线是第几个 + * index: 删除元素的位置 + * length: 删除元素的个数 */ - // const {index, length} = range; - // const _start = length === 0 ? index - 1 : index; - // const _length = length || 1; - // let delCtx = this.quill.getText(_start, _length); + const {index, length} = range; + const _start = length === 0 ? index - 1 : index; + const _length = length || 1; + let delCtx = this.quill.getText(_start, _length); // 删除的元素 // aa - // console.log(delCtx.match(/▁/g)); - // console.log('删除的文本信息=====>>>>', delCtx); - // const r = window.confirm('确定要删除吗?') - // if (r) { - // // 调用传入的删除事件 - // return true - // } else { - // return false; - // } + const reg = /▁/g; + const delArrs = delCtx.match(reg); + if (delArrs) { + const r = window.confirm('确定要删除吗?'); + if (r) { + let leaveCtx; // 获取删除元素之前的内容 + if (length === 0) { + leaveCtx = this.quill.getText(0, index - 1); + } else { + leaveCtx = this.quill.getText(0, index); + } + const leaveArrs = leaveCtx.match(reg); + const leaveLen = (leaveArrs || []).length; + let delIndexs = []; + // 获取删除元素的下标 + delArrs.forEach((item, i) => { + leaveLen === 0 ? delIndexs.push(i) : delIndexs.push(leaveLen + i); + }); + deleteFill && deleteFill(delIndexs); // 调用删除回调, 返回删除的元素下标[] + return true + } else { + return false; + } + } return true; } } @@ -182,25 +193,14 @@ function QuillForEditor ({ } } }); - + // 处理填空 _quill.getModule('toolbar').addHandler('fill', (e) => { - // console.log('点击了填空=====>>>>>>', e); + // alert(1111); setFillCount(fillCount + 1); const range = _quill.getSelection(true); - // _quill.insertText(range.index, '▁', { 'data_index': fillCount }); - _quill.insertEmbed(range.index, 'fill', { - text: '▁', - 'data_index': fillCount - }); - // 点击填空图标时,插入一个下划线 - // 1. 获取编辑器内容 + _quill.insertText(range.index, '▁'); + addFill && addFill(); // 调用添加回调 }); - - // TODO - /** - * 1.获取键盘删除事件 - * 2.点击时获取删除的叶子节点 getLeaf(range.index) - */ }, []); // 设置值 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 6fc264663..03c41d2fe 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-10 15:06:23 + * @LastEditTime : 2020-02-05 10:09:54 */ import './index.scss'; // import 'katex/dist/katex.css'; @@ -291,7 +291,7 @@ class EditTab extends React.Component { // {font: []}, 'image', 'formula', // 数学公式、图片、视频 'clean', // 清除格式 - // 'fill', + 'fill', ]; const renderCourseQuestion = (arrs) => {