update quill

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)) |

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();
     }

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 }
           >
             <QuillForEditor
+                autoFocus={true}
                 style={{ height: '200px' }}
                 placeholder="请输入描述信息"
                 onContentChange={handleContentChange}