From 68c10b2897c286b380b5516fb48ccb9a4ffeca47 Mon Sep 17 00:00:00 2001
From: harry <harry@fangmingyi.com>
Date: Mon, 9 Mar 2020 20:46:14 +0800
Subject: [PATCH] =?UTF-8?q?fix=20issue/28444=20=E9=93=BE=E6=8E=A5=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/comment/CommentForm.js  | 19 ++++------
 .../common/components/comment/CommentItem.js  |  1 -
 .../src/common/quillForEditor/FillBlot.js     | 12 +++----
 .../src/common/quillForEditor/ImageBlot.js    | 15 +-------
 .../react/src/common/quillForEditor/index.js  | 36 +++++++++----------
 .../src/common/quillForEditor/link-blot.js    | 21 +++++++++++
 6 files changed, 48 insertions(+), 56 deletions(-)
 create mode 100644 public/react/src/common/quillForEditor/link-blot.js

diff --git a/public/react/src/common/components/comment/CommentForm.js b/public/react/src/common/components/comment/CommentForm.js
index 11eea72e2..058cceda7 100644
--- a/public/react/src/common/components/comment/CommentForm.js
+++ b/public/react/src/common/components/comment/CommentForm.js
@@ -10,11 +10,9 @@ import './index.scss';
 import React, { useState } from 'react';
 import { Form, Button, Input } from 'antd';
 import QuillForEditor from '../../quillForEditor';
-// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'
-// import {formatDelta} from './util';
 const FormItem = Form.Item;
 
-function CommentForm (props) {
+function CommentForm(props) {
 
   const {
     onCancel,
@@ -28,9 +26,6 @@ function CommentForm (props) {
   const [focus, setFocus] = useState(false);
 
   const options = [
-    // ['bold', 'italic', 'underline'],
-    // [{header: [1,2,3,false]}],
-    'code-block',
     'link',
     'image',
     'formula'
@@ -52,12 +47,10 @@ function CommentForm (props) {
 
   // 编辑器内容变化时
   const handleContentChange = (content) => {
-    console.log('编辑器内容', content);
     setCtx(content);
     try {
       // const _html = new QuillDeltaToHtmlConverter(content.ops, {}).convert();
-      // props.form.setFieldsValue({'comment': _html.replace(/<\/?[^>]*>/g, '')});
-      props.form.setFieldsValue({'comment': content});
+      props.form.setFieldsValue({ 'comment': content });
     } catch (error) {
       console.log(error);
     }
@@ -69,7 +62,7 @@ function CommentForm (props) {
       if (!err) {
         setShowQuill(false);
         const content = ctx;
-        props.form.setFieldsValue({'comment': ''});
+        props.form.setFieldsValue({ 'comment': '' });
         setCtx('');
         // const _html = formatDelta(content.ops);
         // console.log('保存的内容=====》》》》', content);
@@ -95,7 +88,7 @@ function CommentForm (props) {
         {
           getFieldDecorator('comment', {
             rules: [
-              { required: true, message: '评论内容不能为空'}
+              { required: true, message: '评论内容不能为空' }
             ],
           })(
             <Input
@@ -112,7 +105,7 @@ function CommentForm (props) {
         }
 
         <QuillForEditor
-          imgAttrs={{width: '60px', height: '30px'}}
+          imgAttrs={{ width: '60px', height: '30px' }}
           wrapStyle={{
             height: showQuill ? 'auto' : '0px',
             opacity: showQuill ? 1 : 0,
@@ -130,7 +123,7 @@ function CommentForm (props) {
       </FormItem>
       <FormItem style={{ textAlign: 'right', display: showQuill ? 'block' : 'none' }}>
         <Button onClick={handleCancle}>取消</Button>
-        <Button onClick={handleSubmit} type="primary" style={{ marginLeft: '10px'}}>发送</Button>
+        <Button onClick={handleSubmit} type="primary" style={{ marginLeft: '10px' }}>发送</Button>
       </FormItem>
     </Form>
   );
diff --git a/public/react/src/common/components/comment/CommentItem.js b/public/react/src/common/components/comment/CommentItem.js
index a70a15e75..28351cac9 100644
--- a/public/react/src/common/components/comment/CommentItem.js
+++ b/public/react/src/common/components/comment/CommentItem.js
@@ -237,7 +237,6 @@ function CommentItem({
           />
         </div>
 
-        {/* 显示上传的图片信息 */}
         <div className="show_upload_image" style={{ display: url ? 'block' : 'none' }}>
           <Icon type="close" className="image_close" onClick={handleClose} />
           <div className="image_info">
diff --git a/public/react/src/common/quillForEditor/FillBlot.js b/public/react/src/common/quillForEditor/FillBlot.js
index 5e5e2aa77..07b8b4a47 100644
--- a/public/react/src/common/quillForEditor/FillBlot.js
+++ b/public/react/src/common/quillForEditor/FillBlot.js
@@ -8,19 +8,15 @@
  */
 import Quill from 'quill';
 let Inline = Quill.import('blots/inline');
-// const BlockEmbed = Quill.import('blots/embed');
 class FillBlot extends Inline {
-  static create (value) {
+  static create(value) {
     const node = super.cerate(value);
-    // node.classList.add('icon icon-bianji2');
-    // node.setAttribute('data-fill', 'fill');
-    console.log('编辑器值===》》》》》', value);
     node.setAttribute('data_index', value.data_index);
-    node.nodeValue = value.text; 
+    node.nodeValue = value.text;
     return node;
   }
-  
-  static value (node) {
+
+  static value(node) {
     return {
       // dataSet: node.getAttribute('data-fill'),
       data_index: node.getAttribute('data_index')
diff --git a/public/react/src/common/quillForEditor/ImageBlot.js b/public/react/src/common/quillForEditor/ImageBlot.js
index 5ff84b249..0a9bec733 100644
--- a/public/react/src/common/quillForEditor/ImageBlot.js
+++ b/public/react/src/common/quillForEditor/ImageBlot.js
@@ -17,7 +17,6 @@ export default class ImageBlot extends BlockEmbed {
     const node = super.create();
     node.setAttribute('alt', value.alt);
     node.setAttribute('src', value.url);
-    // console.log('~~~~~~~~~~~', node, value);
     node.addEventListener('click', function () {
       value.onclick(value.url);
     }, false);
@@ -33,25 +32,14 @@ export default class ImageBlot extends BlockEmbed {
     }
     // 宽度和高度都不存在时，
     if (!value.width && !value.height) {
-      // node.setAttribute('display', 'block');
       node.setAttribute('width', '100%');
     }
 
-    // node.setAttribute('style', { cursor: 'pointer' });
-
-    // if (node.onclick) {
-    //   console.log('image 有图片点击事件======》》》》》》');
-    //   // node.setAttribute('onclick', node.onCLick);
-    // }
-    // 给图片添加点击事件
-    // node.onclick = () => {
-    //   value.onClick && value.onClick(value.url);
-    // }
     return node;
   }
 
   // 获取节点值
-  static value (node) {
+  static value(node) {
 
     return {
       alt: node.getAttribute('alt'),
@@ -61,7 +49,6 @@ export default class ImageBlot extends BlockEmbed {
       height: node.height,
       display: node.getAttribute('display'),
       id: node.id,
-      // style: node.style
     };
   }
 }
diff --git a/public/react/src/common/quillForEditor/index.js b/public/react/src/common/quillForEditor/index.js
index ba37059ba..46b02b94e 100644
--- a/public/react/src/common/quillForEditor/index.js
+++ b/public/react/src/common/quillForEditor/index.js
@@ -20,16 +20,17 @@ import { fetchUploadImage } from '../../services/ojService.js';
 import { getImageUrl } from 'educoder'
 import ImageBlot from './ImageBlot';
 import FillBlot from './FillBlot';
+import LinkBlot from './link-blot'
 var Size = Quill.import('attributors/style/size');
-// const Color = Quill.import('attributes/style/color');
 Size.whitelist = ['14px', '16px', '18px', '20px', false];
-var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi','FangSong'];
+var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'FangSong'];
 var Font = Quill.import('formats/font');
 Font.whitelist = fonts; //将字体加入到白名单
 window.Quill = Quill;
 window.katex = katex;
 Quill.register(ImageBlot);
 Quill.register(Size);
+Quill.register(LinkBlot);
 Quill.register(Font, true);
 // Quill.register({'modules/toolbar': Toolbar});
 Quill.register({
@@ -38,7 +39,7 @@ Quill.register({
 // Quill.register(Color);
 
 
-function QuillForEditor ({
+function QuillForEditor({
   placeholder,
   readOnly,
   autoFocus = false,
@@ -51,17 +52,16 @@ function QuillForEditor ({
   onContentChange,
   addFill, // 点击填空成功的回调
   deleteFill // 删除填空，返回删除的下标
-  // getQuillContent
 }) {
   // toolbar 默认值
   const defaultConfig = [
     'bold', 'italic', 'underline',
-    {size: ['14px', '16px', '18px', '20px']},
-    {align: []}, {list: 'ordered'}, {list: 'bullet'}, // 列表
-    {script: 'sub'}, {script: 'super'},
+    { size: ['14px', '16px', '18px', '20px'] },
+    { align: [] }, { list: 'ordered' }, { list: 'bullet' }, // 列表
+    { script: 'sub' }, { script: 'super' },
     { 'color': [] }, { 'background': [] },
-		{ 'font': []},
-    {header: [1,2,3,4,5,false]},
+    { 'font': [] },
+    { header: [1, 2, 3, 4, 5, false] },
     'blockquote', 'code-block',
     'link', 'image', 'video',
     'formula',
@@ -77,7 +77,6 @@ function QuillForEditor ({
 
   // 文本内容变化时
   const handleOnChange = content => {
-    // getQuillContent && getQuillContent(quill);
     onContentChange && onContentChange(content, quill);
   };
 
@@ -86,9 +85,7 @@ function QuillForEditor ({
   const bindings = {
     tab: {
       key: 9,
-      handler: function () {
-        console.log('调用了tab=====>>>>');
-      }
+      handler: function () { }
     },
     backspace: {
       key: 'Backspace',
@@ -104,11 +101,10 @@ function QuillForEditor ({
          * index: 删除元素的位置
          * length: 删除元素的个数
          */
-        const {index, length} = range;
+        const { index, length } = range;
         const _start = length === 0 ? index - 1 : index;
         const _length = length || 1;
         let delCtx = this.quill.getText(_start, _length); // 删除的元素
-        // aa
         const reg = /▁/g;
         const delArrs = delCtx.match(reg);
         if (delArrs) {
@@ -216,7 +212,7 @@ function QuillForEditor ({
       const ops = value.ops || [];
       ops.forEach((item, i) => {
         if (item.insert['image']) {
-          item.insert['image'] = Object.assign({}, item.insert['image'], {style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url)});
+          item.insert['image'] = Object.assign({}, item.insert['image'], { style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url) });
         }
       });
     }
@@ -225,7 +221,7 @@ function QuillForEditor ({
     if (!deepEqual(previous, current)) {
       setSelection(quill.getSelection())
       if (typeof value === 'string' && value) {
-      	// debugger
+        // debugger
         quill.clipboard.dangerouslyPasteHTML(value, 'api');
         if (autoFocus) {
           quill.focus();
@@ -273,9 +269,9 @@ function QuillForEditor ({
 
   // 返回结果
   return (
-      <div className='quill_editor_for_react_area' style={wrapStyle}>
-        <div ref={editorRef} style={style}></div>
-      </div>
+    <div className='quill_editor_for_react_area' style={wrapStyle}>
+      <div ref={editorRef} style={style}></div>
+    </div>
   );
 }
 
diff --git a/public/react/src/common/quillForEditor/link-blot.js b/public/react/src/common/quillForEditor/link-blot.js
new file mode 100644
index 000000000..8f508dd34
--- /dev/null
+++ b/public/react/src/common/quillForEditor/link-blot.js
@@ -0,0 +1,21 @@
+import Quill from "quill";
+const Inline = Quill.import('blots/inline');
+
+export default class LinkBlot extends Inline {
+  static create(value) {
+    let node = super.create()
+    let rs = value
+    if (rs.indexOf('http://') < 0) {
+      rs = 'http://' + rs
+    }
+    node.setAttribute('href', rs)
+    node.setAttribute('target', '_blank')
+    return node;
+  }
+
+  static formats(node) {
+    return node.getAttribute('href');
+  }
+}
+LinkBlot.blotName = 'link'
+LinkBlot.tagName = 'a'
\ No newline at end of file