Merge branch 'dev_aliyun' of http://bdgit.educoder.net/Hjqreturn/educoder into dev_aliyun

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');
+let Inline = Quill.import('blots/inline');
-const BlockEmbed = Quill.import('blots/embed');
+// const BlockEmbed = Quill.import('blots/embed');
-class FillBlot extends BlockEmbed {
+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;

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({
+Quill.register({
-//   'formats/fill': FillBlot
+  '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值获取删除的起始位置
+         * index: 删除元素的位置 
-         *    length === 0 -> start = index - 1;
+         * length: 删除元素的个数
-         *    length !== 0 -> start = index
-         * 2. 获取删除的元素内容
-         *    ctx = this.quill.getText(start, length === 0 ? 1 : length);
-         * 3. 判断当前删除的下划线是第几个
          */
-        // const {index, length} = range;
+        const {index, length} = range;
-        // const _start = length === 0 ? index - 1 : index;
+        const _start = length === 0 ? index - 1 : index;
-        // const _length = length || 1;
+        const _length = length || 1;
-        // let delCtx = this.quill.getText(_start, _length);
+        let delCtx = this.quill.getText(_start, _length); // 删除的元素
         // aa
-        // console.log(delCtx.match(/▁/g));
+        const reg = /▁/g;
-        // console.log('删除的文本信息=====>>>>', delCtx);
+        const delArrs = delCtx.match(reg);
-        // const r = window.confirm('确定要删除吗?')
+        if (delArrs) {
-        // if (r) {
+          const r = window.confirm('确定要删除吗?');
-        //   // 调用传入的删除事件
+          if (r) {
-        //   return true
+            let leaveCtx; // 获取删除元素之前的内容
-        // } else {
+            if (length === 0) {
-        //   return false;
+              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.insertText(range.index, '▁');
-      _quill.insertEmbed(range.index, 'fill', {
+      addFill && addFill(); // 调用添加回调
-        text: '▁',
-        'data_index': fillCount
-      });
-      // 点击填空图标时，插入一个下划线
-      // 1. 获取编辑器内容
     });
-
-    // TODO
-    /**
-     * 1.获取键盘删除事件
-     * 2.点击时获取删除的叶子节点  getLeaf(range.index)
-     */
   }, []);
 
   // 设置值

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 13:26:58
  */
 import './index.scss';
 // import 'katex/dist/katex.css';