diff --git a/public/react/src/common/quillForEditor/FillBlot.js b/public/react/src/common/quillForEditor/FillBlot.js index d36f2d4b1..144b499ee 100644 --- a/public/react/src/common/quillForEditor/FillBlot.js +++ b/public/react/src/common/quillForEditor/FillBlot.js @@ -4,29 +4,25 @@ * @Github: * @Date: 2020-01-06 09:02:29 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-06 16:04:46 + * @LastEditTime : 2020-01-09 11:58:52 */ import Quill from 'quill'; - -let Inline = Quill.import('blots/inline'); - -class FillBlot extends Inline { +// let Inline = Quill.import('blots/inline'); +const BlockEmbed = Quill.import('blots/block/embed'); +class FillBlot extends BlockEmbed { static create (value) { const node = super.cerate(); - node.classList.add('icon icon-bianji2'); - node.setAttribute('data-fill', 'fill'); - node.addEventListener('DOMNodeRemoved', function () { - alert(123); - }, false); + // node.classList.add('icon icon-bianji2'); + // node.setAttribute('data-fill', 'fill'); + node.setAttribute('data_index', value.data_index); + node.nodeValue = value.text; return node; } static value (node) { return { - dataSet: node.getAttribute('data-fill'), - onDOMNodeRemoved: () => { - alert('123456'); - } + // dataSet: node.getAttribute('data-fill'), + data_index: node.getAttribute('data_index') } } } diff --git a/public/react/src/common/quillForEditor/index.js b/public/react/src/common/quillForEditor/index.js index 2cded3fc3..f892e9b8d 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:01:51 + * @LastEditTime : 2020-01-09 11:56:10 */ import './index.scss'; import 'quill/dist/quill.core.css'; // 核心样式 @@ -18,12 +18,9 @@ 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'; +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']; @@ -96,19 +93,38 @@ function QuillForEditor ({ }, backspace: { key: 'Backspace', + /** + * @param {*} range + * { index, // 删除元素的位置 + * length // 删除元素的个数, 当删除一个时， length=0， 其它等于删除的元素的个数 + * } + * @param {*} context 上下文 + */ 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; - } + /** + * 1. 根据range中的index及length值获取删除的起始位置 + * length === 0 -> start = index - 1; + * length !== 0 -> start = index + * 2. 获取删除的元素内容 + * ctx = this.quill.getText(start, length === 0 ? 1 : length); + * 3. 判断当前删除的下划线是第几个 + */ + 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; + // } + return true; } } }; @@ -180,7 +196,11 @@ function QuillForEditor ({ _quill.getModule('toolbar').addHandler('fill', (e) => { setFillCount(fillCount + 1); const range = _quill.getSelection(true); - _quill.insertText(range.index, '▁'); + // _quill.insertText(range.index, '▁', { 'data_index': fillCount }); + _quill.insertEmbed(range.index, 'span', { + text: '▁', + 'data_index': fillCount + }); // 点击填空图标时，插入一个下划线 // 1. 获取编辑器内容 }); @@ -242,33 +262,6 @@ function QuillForEditor ({ 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: 检索编辑器内容 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 4784b553a..349404dfd 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 11:04:44 + * @LastEditTime : 2020-01-09 14:18:37 */ import './index.scss'; // import 'katex/dist/katex.css'; @@ -453,7 +453,6 @@ class EditTab extends React.Component { colon={ false } > { // 复制面板 let clipboard; // const [recordDetail, setRecordDetail] = useState({}); - const [renderCtx, setRenderCtx] = useState(() => { - return function () { - return ''; - } - }); + // const [renderCtx, setRenderCtx] = useState(() => { + // return function () { + // return ''; + // } + // }); // 渲染提交记录详情 - const renderRecordDetail = () => { - const { - id, - // error_line, - error_msg, - // execute_memory, - // execute_time, - // input, - // output, - status, - // expected_output - } = commitRecordDetail; + const renderRecordDetail = (commitRecordDetail = {}) => { + const {id, status} = commitRecordDetail; if (Object.keys(commitRecordDetail).length > 0) { // console.log('当前状态====》》》', status); const classes = status === 0 ? 'record_result_suc' : 'record_result_err'; @@ -150,17 +140,25 @@ const CommitRecord = (props) => { // // setPagination(pageConfig); // }, [commitRecord]); // 提交详情变化时，显示当前提交信息 - useEffect(() => { - // setRecordDetail(commitRecordDetail); - if (operateType === 'submit') { - setRenderCtx(() => (renderRecordDetail)) - } - }, [commitRecordDetail, operateType]); + // useEffect(() => { + // // setRecordDetail(commitRecordDetail); + // if (operateType === 'submit') { + // setRenderCtx(() => (renderRecordDetail)) + // } + // }, [commitRecordDetail, operateType]); // 复制功能 let count = 0; - useEffect(() => { - clipboard = new ClipboardJS('#copyError'); - clipboard && clipboard.on('success', (e) => { + // useEffect(() => { + + // }, []); + + const clickCopyErrInfo = () => { + count = 0; + if (!clipboard) { + console.log('==========>>>>>>>', 11111111111); + clipboard = new ClipboardJS('#copyError'); + } + clipboard.on('success', (e) => { e.clearSelection(); if (count > 0) return; count++; @@ -169,26 +167,7 @@ const CommitRecord = (props) => { message.destroy(); }, 3000); }); - - return () => { - clipboard = null; - } - }, []); - - const clickCopyErrInfo = () => { - count = 0; } - // if (commitRecordDetail.status !== 0) { - // clipboard.on('success', (e) => { - // console.log('成功=====》》》》》'); - // message.success('复制成功'); - // e.clearSelection(); - // }); - // } - // - // const handleTableChange = (pagination) => { - // setPagination(Object.assign({}, pagination)); - // } const handlePaginationChange = (page) => { setCurrent(page); @@ -204,9 +183,53 @@ const CommitRecord = (props) => { display: pages.total > pages.limit ? 'block' : 'none' }; + const {status, id} = commitRecordDetail || {}; + const classes = status === 0 ? 'record_result_suc' : 'record_result_err'; + const showErrorCode = status !== 0 ? `ecord_error_info show_error_code` : `ecord_error_info`; + const showErrorCopy = status !== 0 ? `copy_error show_error_copy` : `copy_error`; + + // if (!clipboard) { + // console.log('==========>>>>>>>', 11111111111); + // clipboard = new ClipboardJS('#copyError'); + // } + // clipboard.on('success', (e) => { + // e.clearSelection(); + // // if (count > 0) return; + // // count++; + // message.success('复制成功'); + // setTimeout(() => { + // message.destroy(); + // }, 3000); + // }); + + // return () => { + // clipboard = null; + // } + return (
- {renderCtx()} + {renderRecordDetail(commitRecordDetail)} + {/*
+

+ 执行结果: {reviewResult[status]} +

+

+ + 复制错误信息 + +

+

+ + 显示详情 + +

+
+
+ +
*/}
>', hackStatus); - if (hackStatus === 1 && !passed) { + if (hackStatus === 1 && !passed && returnData.isPassed) { dispatch({ type: types.UPDATE_HACK_PASSED, payload: true