From 9d7b1aaf6c18aa61b56b435bbe3bb9564429bd4e Mon Sep 17 00:00:00 2001 From: tangjiang <465264938@qq.com> Date: Thu, 9 Jan 2020 11:05:06 +0800 Subject: [PATCH] update quill --- .../react/src/common/quillForEditor/README.md | 4 +- .../react/src/common/quillForEditor/index.js | 57 +++++++++++++++++-- .../newOrEditTask/leftpane/editorTab/index.js | 4 +- 3 files changed, 58 insertions(+), 7 deletions(-) diff --git a/public/react/src/common/quillForEditor/README.md b/public/react/src/common/quillForEditor/README.md index 0369164c7..75b403590 100644 --- a/public/react/src/common/quillForEditor/README.md +++ b/public/react/src/common/quillForEditor/README.md @@ -4,7 +4,7 @@ * @Github: * @Date: 2020-01-06 16:20:03 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-06 17:13:19 + * @LastEditTime : 2020-01-09 09:45:29 --> ## QuillForEditor 使用 [https://quilljs.com/] @@ -21,7 +21,7 @@ | autoFocus | 自动获得焦点 | | options | 配置参数， 指定工具栏内容 | | value | 文本编辑器内容 | - | imgAttrs | 指定上传图片的尺寸 | + | imgAttrs | 指定上传图片的尺寸 { width: 'xxpx}, height: 'xxpx'| | style | 指定quill容器样式 | | wrapStyle | 指定包裹quill容器的样式| | onContentChange | 当编辑器内容变化时调用此回调函数(注: 此时返回的内容为对象，提交到后台时需要格式成 JSON 字符串: JSON.stringify(xx)) | diff --git a/public/react/src/common/quillForEditor/index.js b/public/react/src/common/quillForEditor/index.js index 326ca21ae..2cded3fc3 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-06 16:45:50 + * @LastEditTime : 2020-01-09 11:01:51 */ import './index.scss'; import 'quill/dist/quill.core.css'; // 核心样式 @@ -18,11 +18,12 @@ 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'; 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']; @@ -36,6 +37,7 @@ Quill.register(Font, true); Quill.register(FillBlot); // Quill.register(Color); + function QuillForEditor ({ placeholder, readOnly, @@ -79,10 +81,44 @@ function QuillForEditor ({ const renderOptions = options || defaultConfig; + const bindings = { + tab: { + key: 9, + handler: function () { + console.log('调用了tab=====>>>>'); + } + }, + enter: { + key: 'Enter', + handler: function () { + console.log('enter====>>>>>>'); + } + }, + backspace: { + key: 'Backspace', + 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; + } + } + } + }; // quill 配置信息 const quillOption = { modules: { - toolbar: renderOptions + toolbar: renderOptions, + keyboard: { + bindings: bindings + } // toolbar: { // container: renderOptions // } @@ -98,8 +134,14 @@ function QuillForEditor ({ const quillNode = document.createElement('div'); editorRef.current.appendChild(quillNode); const _quill = new Quill(editorRef.current, quillOption); - setQuill(_quill); + // _quill.keyboard.addBinding({ + // key: 'tab' + // }, function (range, context) { + // console.log('点击了键盘的删除按钮: ', range, context); + // }); + + setQuill(_quill); // 处理图片上传功能 _quill.getModule('toolbar').addHandler('image', (e) => { const input = document.createElement('input'); @@ -142,6 +184,12 @@ function QuillForEditor ({ // 点击填空图标时，插入一个下划线 // 1. 获取编辑器内容 }); + + // TODO + /** + * 1.获取键盘删除事件 + * 2.点击时获取删除的叶子节点 getLeaf(range.index) + */ }, []); // 设置值 @@ -232,6 +280,7 @@ function QuillForEditor ({ }, [quill, handleOnChange]); useEffect(() => { + if (!quill) return; if (autoFocus) { quill.focus(); } 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 395809901..4784b553a 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-07 15:29:18 + * @LastEditTime : 2020-01-09 11:04:44 */ import './index.scss'; // import 'katex/dist/katex.css'; @@ -291,6 +291,7 @@ class EditTab extends React.Component { // {font: []}, 'image', 'formula', // 数学公式、图片、视频 'clean', // 清除格式 + // 'fill', ]; const renderCourseQuestion = (arrs) => { @@ -452,6 +453,7 @@ class EditTab extends React.Component { colon={ false } >