From 7dbcdd7b778995ed77784f8ce0fb143071c15301 Mon Sep 17 00:00:00 2001
From: caicai8 <1149225589@qq.com>
Date: Thu, 19 Mar 2020 16:10:42 +0800
Subject: [PATCH] issue

---
 src/forge/Main/IndexItem.js             |  2 +-
 src/forge/Order/Detail.js               | 50 ++++++++++++-------
 src/forge/Order/New.js                  |  9 +---
 src/forge/Order/UpdateDetail.js         |  9 +---
 src/forge/quillForEditor/FillBlot.js    | 12 ++---
 src/forge/quillForEditor/ImageBlot.js   | 18 ++++---
 src/forge/quillForEditor/font.css       | 66 +++++++++++++++++++++++++
 src/forge/quillForEditor/index.js       | 50 +++++++++----------
 src/forge/quillForEditor/link-blot.js   | 21 ++++++++
 src/forge/quillForEditor/quill.core.css | 18 +++++++
 src/forge/quillForEditor/quill.snow.css | 28 +++++++++++
 11 files changed, 207 insertions(+), 76 deletions(-)
 create mode 100644 src/forge/quillForEditor/font.css
 create mode 100644 src/forge/quillForEditor/link-blot.js
 create mode 100644 src/forge/quillForEditor/quill.core.css
 create mode 100644 src/forge/quillForEditor/quill.snow.css

diff --git a/src/forge/Main/IndexItem.js b/src/forge/Main/IndexItem.js
index 6ad46bb10..5358a0480 100644
--- a/src/forge/Main/IndexItem.js
+++ b/src/forge/Main/IndexItem.js
@@ -25,7 +25,7 @@ class IndexItem extends Component{
             <img className="p-r-photo" alt="" src={getImageUrl(`images/${item.author && item.author.image_url}`)} ></img>
             <div className="p-r-Infos">
               <div className="p-r-name">
-                <a onClick={()=>this.TurnToDetail(`${item.author && item.author.login}`,`/projects/${item.identifier}/coder`)} className="hide-1 font-16 color-grey-3" style={{whiteSpace:"wrap"}}>{item.name}</a>
+                <a onClick={()=>this.TurnToDetail(`${item.author && item.author.login}`,`/projects/${item.id}/coder`)} className="hide-1 font-16 color-grey-3" style={{whiteSpace:"wrap"}}>{item.name}</a>
               </div>
               <div className="p-r-content">
                 <p className="break_word task-hide flex1" style={{maxHeight:"40px"}}>{item.description}</p>
diff --git a/src/forge/Order/Detail.js b/src/forge/Order/Detail.js
index a8431dd5a..98bf2b974 100644
--- a/src/forge/Order/Detail.js
+++ b/src/forge/Order/Detail.js
@@ -90,19 +90,14 @@ class Detail extends Component{
         })
         return;
       }
-      let _html = '';
-      try {
-        _html = new QuillDeltaToHtmlConverter(quillValue.ops, {}).convert();
-      } catch (error) {
-        console.log(error);
-      }
+      
       this.props.form.validateFieldsAndScroll((err, values) => {
         if(!err){
           const { data, page, limit, fileList } = this.state;
           const url = `/issues/${data.id}/journals.json`;
           axios.post(url,{
             ...values,
-            content:_html,
+            content:JSON.stringify(quillValue),
             issue_id:data.id,
             attachment_ids:fileList
           }).then(result=>{
@@ -313,10 +308,29 @@ class Detail extends Component{
     }
   }
 
+  handleShowImage=(value)=>{
+    console.log("imgOnclick",value);
+  }
+
+  commentCtx = (ctx) => {
+    let _ctx = null;
+    try {
+      _ctx = JSON.parse(ctx);
+    } catch (e) {
+      _ctx = ctx;
+    }
+    return (
+      <QuillForEditor
+        readOnly={true}
+        value={_ctx}
+        showUploadImage={this.handleShowImage}
+      />
+    )
+  };
+
   render(){
     const { projectsId,orderId} = this.props.match.params;
     const { data,journalsdata, page, limit, search_count, isSpin, isedit, showFiles , quillValue , quillFlag } = this.state;
-    const { getFieldDecorator } = this.props.form;
     const { current_user } = this.props;
     const Paginations = (
       <React.Fragment>
@@ -336,7 +350,7 @@ class Detail extends Component{
                return(
                  <li key={key}>
                 <div className="df">
-                  <Link to={``}><img className="user_img" src={getImageUrl(`images/${item.user_picture && item.user_picture}`)} alt=""/></Link>
+                  <img className="user_img" src={getImageUrl(`images/${item.user_picture && item.user_picture}`)} alt=""/>
                   <div className="detail_context" >
                   <div className="topWrapper_detali">
                     <p className="ml6 detail_p lineH40">
@@ -356,11 +370,8 @@ class Detail extends Component{
                     <div className="detail_ptitlecount">
                       <div style={{display: (isedit && isedit === item.id) ? "none" : "block"}} >
                         {
-                          item.content ?
-                            <QuillForEditor 
-                              readOnly={true}
-                              value={item.content}
-                            />
+                          item.content ? 
+                            this.commentCtx(item.content)
                             :
                             <div>
                               {this.renderJournalList(item.journal_details)}
@@ -448,10 +459,11 @@ class Detail extends Component{
             <Link to={``}><img className="user_img" src={getImageUrl(`images/${data && data.author_picture}`)} alt=""/></Link>
             <div className="detail_context">
               <div className="detail_p">
-                <QuillForEditor 
+                {/* <QuillForEditor 
                   readOnly={true}
                   value={ data && data.description}
-                />
+                /> */}
+                {this.commentCtx(data && data.description)}
               </div>
               {
                 data && data.attachments && data.attachments.length > 0 ?
@@ -473,11 +485,11 @@ class Detail extends Component{
             { Paginations }
 
             <div className="df">
-              <Link to={``}><img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt=""/></Link>
+              <img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt=""/>
               <div className="new_context">
                 <div className="quillContent">
                   <QuillForEditor
-                    imgAttrs={{ width: '60px', height: '30px' }}
+                    imgAttrs={{ width: '30px' }}
                     wrapStyle={{
                       height: '220px',
                       opacity:1,
@@ -488,7 +500,7 @@ class Detail extends Component{
                     options={options}
                     value={quillValue}
                     onContentChange={this.onContentChange}
-                    // showUploadImage={handleShowImage}
+                    showUploadImage={this.handleShowImage}
                     // onContentChange={handleContentChange}
                   />
                   <p className="quillFlag">
diff --git a/src/forge/Order/New.js b/src/forge/Order/New.js
index 568721f34..350d5aa04 100644
--- a/src/forge/Order/New.js
+++ b/src/forge/Order/New.js
@@ -104,15 +104,10 @@ class New extends Component{
           values.issue_tag_ids = [values.issue_tag_ids]
         }
         const { description } = this.state;
-        let _html = '';
-        try {
-          _html = new QuillDeltaToHtmlConverter(description.ops, {}).convert();
-        } catch (error) {
-          console.log(error);
-        }
+        
         axios.post(url,{
           ...values,
-          description:_html,
+          description:JSON.stringify(description),
           attachment_ids:fileList
         }).then(result=>{
           if(result){
diff --git a/src/forge/Order/UpdateDetail.js b/src/forge/Order/UpdateDetail.js
index b2fd0af6e..42157af99 100644
--- a/src/forge/Order/UpdateDetail.js
+++ b/src/forge/Order/UpdateDetail.js
@@ -159,17 +159,12 @@ class UpdateDetail extends Component{
               values.assigned_to_id = ""
             }
             const { textcount } = this.state;
-            let _html = '';
-            try {
-              _html = new QuillDeltaToHtmlConverter(textcount.ops, {}).convert();
-            } catch (error) {
-              console.log(error);
-            }
+            
             axios.put(url,{
                 project_id:projectsId,
                 subject:subject,
                 id: orderId,
-                description:_html,
+                description:JSON.stringify(textcount),
                 attachment_ids:fileList,
               ...values
             }).then(result=>{
diff --git a/src/forge/quillForEditor/FillBlot.js b/src/forge/quillForEditor/FillBlot.js
index 5e5e2aa77..07b8b4a47 100644
--- a/src/forge/quillForEditor/FillBlot.js
+++ b/src/forge/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/src/forge/quillForEditor/ImageBlot.js b/src/forge/quillForEditor/ImageBlot.js
index 5ff84b249..6e585f31f 100644
--- a/src/forge/quillForEditor/ImageBlot.js
+++ b/src/forge/quillForEditor/ImageBlot.js
@@ -1,7 +1,7 @@
 /*
  * @Description: 重写图片
  * @Author: tangjiang
- * @Github: 
+ * @Github:
  * @Date: 2019-12-16 15:50:45
  * @LastEditors  : tangjiang
  * @LastEditTime : 2019-12-31 13:59:02
@@ -17,10 +17,14 @@ export default class ImageBlot extends BlockEmbed {
     const node = super.create();
     node.setAttribute('alt', value.alt);
     node.setAttribute('src', value.url);
-    // console.log('~~~~~~~~~~~', node, value);
+		 console.log('~~~~~~~~~~~', node, value);
     node.addEventListener('click', function () {
-      value.onclick(value.url);
-    }, false);
+    	try {
+				value.onclick(value.url);
+			}catch (e) {
+
+			}
+     }, false);
     if (value.width) {
       node.setAttribute('width', value.width);
     }
@@ -33,7 +37,6 @@ export default class ImageBlot extends BlockEmbed {
     }
     // 宽度和高度都不存在时，
     if (!value.width && !value.height) {
-      // node.setAttribute('display', 'block');
       node.setAttribute('width', '100%');
     }
 
@@ -51,7 +54,7 @@ export default class ImageBlot extends BlockEmbed {
   }
 
   // 获取节点值
-  static value (node) {
+  static value(node) {
 
     return {
       alt: node.getAttribute('alt'),
@@ -61,10 +64,9 @@ export default class ImageBlot extends BlockEmbed {
       height: node.height,
       display: node.getAttribute('display'),
       id: node.id,
-      // style: node.style
     };
   }
 }
 
 ImageBlot.blotName = 'image';
-ImageBlot.tagName = 'img';
\ No newline at end of file
+ImageBlot.tagName = 'img';
diff --git a/src/forge/quillForEditor/font.css b/src/forge/quillForEditor/font.css
new file mode 100644
index 000000000..08e78a5a2
--- /dev/null
+++ b/src/forge/quillForEditor/font.css
@@ -0,0 +1,66 @@
+@charset "utf-8";
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
+    content: "宋体";
+    font-family:SimSun !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
+    content: "黑体";
+    font-family:SimHei !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
+    content: "微软雅黑";
+    font-family:Microsoft YaHei !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
+    content: "楷体";
+    font-family:KaiTi !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
+    content: "仿宋";
+    font-family:FangSong !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
+    content: "Arial";
+    font-family:Arial !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
+    content: "Times New Roman";
+    font-family:Times New Roman !important;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
+    content: "sans-serif";
+    font-family:sans-serif !important;
+}
+
+.ql-font-SimSun {
+    font-family:SimSun !important;
+}
+.ql-font-SimHei {
+    font-family:SimHei !important;
+}
+.ql-font-Microsoft-YaHei {
+    font-family:Microsoft YaHei !important;
+}
+.ql-font-KaiTi {
+    font-family:KaiTi !important;
+}
+.ql-font-FangSong {
+    font-family:FangSong !important;
+}
+.ql-font-Arial {
+    font-family:Arial !important;
+}
+.ql-font-Times-New-Roman {
+    font-family:Times New Roman   !important;
+}
+.ql-font-sans-serif {
+    font-family:sans-serif  !important;
+}
diff --git a/src/forge/quillForEditor/index.js b/src/forge/quillForEditor/index.js
index 012743141..f90b58e24 100644
--- a/src/forge/quillForEditor/index.js
+++ b/src/forge/quillForEditor/index.js
@@ -11,6 +11,7 @@ import 'quill/dist/quill.core.css'; // 核心样式
 import 'quill/dist/quill.snow.css'; // 有工具栏
 import 'quill/dist/quill.bubble.css'; // 无工具栏
 import 'katex/dist/katex.min.css'; // katex 表达式样式
+import './font.css'
 import React, { useState, useRef, useEffect } from 'react';
 import Quill from 'quill';
 import katex from 'katex';
@@ -19,16 +20,17 @@ import { fetchUploadImage } from '../../services/ojService.js';
 import { getImageUrl } from 'educoder'
 import ImageBlot from './ImageBlot';
 import FillBlot from './FillBlot';
-const Size = Quill.import('attributors/style/size');
-const Font = Quill.import('formats/font');
-// 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'];
-
+import LinkBlot from './link-blot'
+var Size = Quill.import('attributors/style/size');
+Size.whitelist = ['14px', '16px', '18px', '20px', false];
+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({
@@ -37,7 +39,7 @@ Quill.register({
 // Quill.register(Color);
 
 
-function QuillForEditor ({
+function QuillForEditor({
   placeholder,
   readOnly,
   autoFocus = false,
@@ -50,16 +52,16 @@ function QuillForEditor ({
   onContentChange,
   addFill, // 点击填空成功的回调
   deleteFill // 删除填空，返回删除的下标
-  // getQuillContent
 }) {
   // toolbar 默认值
   const defaultConfig = [
     'bold', 'italic', 'underline',
-    {size: ['12px', '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': [] },
-    {header: [1,2,3,4,5,false]},
+    { 'font': [] },
+    { header: [1, 2, 3, 4, 5, false] },
     'blockquote', 'code-block',
     'link', 'image', 'video',
     'formula',
@@ -75,7 +77,6 @@ function QuillForEditor ({
 
   // 文本内容变化时
   const handleOnChange = content => {
-    // getQuillContent && getQuillContent(quill);
     onContentChange && onContentChange(content, quill);
   };
 
@@ -84,9 +85,7 @@ function QuillForEditor ({
   const bindings = {
     tab: {
       key: 9,
-      handler: function () {
-        console.log('调用了tab=====>>>>');
-      }
+      handler: function () { }
     },
     backspace: {
       key: 'Backspace',
@@ -99,14 +98,13 @@ function QuillForEditor ({
        */
       handler: function (range, context) {
         /**
-         * index: 删除元素的位置 
+         * 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) {
@@ -123,7 +121,7 @@ function QuillForEditor ({
             let delIndexs = [];
             // 获取删除元素的下标
             delArrs.forEach((item, i) => {
-              leaveLen === 0 ? delIndexs.push(i) : delIndexs.push(leaveLen + i); 
+              leaveLen === 0 ? delIndexs.push(i) : delIndexs.push(leaveLen + i);
             });
             deleteFill && deleteFill(delIndexs); // 调用删除回调, 返回删除的元素下标[]
             return true
@@ -177,7 +175,7 @@ function QuillForEditor ({
         const result = await fetchUploadImage(formData);
         // 获取上传图片的url
         if (result.data && result.data.id) {
-          fileUrl = getImageUrl(`api/attachments/${result.data.id}`);
+          fileUrl = (`http://123.59.135.93:56666/api/attachments/${result.data.id}`);
         }
         // 根据id获取文件路径
         const { width, height } = imgAttrs;
@@ -214,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) });
         }
       });
     }
@@ -223,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();
@@ -271,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/src/forge/quillForEditor/link-blot.js b/src/forge/quillForEditor/link-blot.js
new file mode 100644
index 000000000..8f508dd34
--- /dev/null
+++ b/src/forge/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
diff --git a/src/forge/quillForEditor/quill.core.css b/src/forge/quillForEditor/quill.core.css
new file mode 100644
index 000000000..516e388b6
--- /dev/null
+++ b/src/forge/quillForEditor/quill.core.css
@@ -0,0 +1,18 @@
+.ql-editor .ql-font-Microsoft-YaHei {
+    font-family: "Microsoft YaHei";
+}
+.ql-editor .ql-font-SimSun {
+    font-family: "SimSun";
+}
+.ql-editor .ql-font-SimHei {
+    font-family: "SimHei";
+}
+.ql-editor .ql-font-KaiTi {
+    font-family: "KaiTi";
+}
+.ql-editor .ql-font-Arial {
+    font-family: "Arial";
+}
+.ql-editor .Times-New-Roman {
+    font-family: "Times New Roman";
+}
diff --git a/src/forge/quillForEditor/quill.snow.css b/src/forge/quillForEditor/quill.snow.css
new file mode 100644
index 000000000..962b40f99
--- /dev/null
+++ b/src/forge/quillForEditor/quill.snow.css
@@ -0,0 +1,28 @@
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: '微软雅黑';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
+    content: "微软雅黑";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
+    content: "宋体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
+    content: "黑体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
+    content: "楷体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
+    content: "Arial";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
+    content: "Times New Roman";
+}