quill

public/react/src/Loading.js

@@ -1,15 +1,12 @@
 import React, { Component } from 'react';
-
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-
 import { Spin } from 'antd';
 
 class Loading extends Component {
   componentDidUpdate(prevProps, prevState) {
-	if (!prevProps.error && this.props.error) {
-		console.log(this.props.error)
-		window.location.reload()
-	}
+		if (!prevProps.error && this.props.error) {
+			console.log(this.props.error)
+			window.location.reload()
+		}
   }
   
   render() {

public/react/src/forge/Order/Detail.js

@@ -9,10 +9,17 @@ import {Modal, Col, Form, Input, Tooltip, Popconfirm, Pagination  , Spin} from '
 import NoneData from '../../modules/courses/coursesPublic/NoneData';
 import Attachments from '../Upload/attachment';
 import QuillForEditor from '../quillForEditor';
+import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'
 
 
 const TextArea = Input.TextArea;
-
+const options = [
+  ['bold', 'italic', 'underline'],
+  [{header: [1,2,3,false]}],
+  ['blockquote', 'code-block'],
+  ['link', 'image'],
+  ['formula']
+];
 
 class Detail extends Component{
   constructor(props){
@@ -33,7 +40,9 @@ class Detail extends Component{
       page:1,
       search_count:undefined,
       isSpin:false,
-      showFiles: true
+      showFiles: true,
+      quillValue:'',
+      quillFlag:false
     }
   }
   
@@ -75,12 +84,26 @@ class Detail extends Component{
 
     //添加评论 
     addjournals=()=>{
+      const { quillValue } = this.state;
+      if(!quillValue){
+        this.setState({
+          quillFlag:true
+        })
+        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,
             issue_id:data.id,
             attachment_ids:fileList
           }).then(result=>{
@@ -89,7 +112,8 @@ class Detail extends Component{
                 content: ""
               });
               this.setState({
-                showFiles: false
+                showFiles: false,
+                quillValue:''
               })
               this.getjournalslist(page, limit);
               this.props.showNotification("评论成功！");
@@ -216,7 +240,7 @@ class Detail extends Component{
     }
 
   renderJournalList=(list)=>{
-    console.log(list);
+    // console.log(list);
     if(list && list.length >0){
       return(
         list.map((item,key)=>{
@@ -281,10 +305,16 @@ class Detail extends Component{
       showFiles:flag
     })
   }
+  onContentChange=(value)=>{
+    
+    this.setState({
+      quillValue:value
+    })
+  }
 
   render(){
     const { projectsId,orderId} = this.props.match.params;
-    const { data,journalsdata, page, limit, search_count, isSpin, isedit, showFiles } = this.state;
+    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 = (
@@ -326,7 +356,10 @@ class Detail extends Component{
                       <div style={{display: (isedit && isedit === item.id) ? "none" : "block"}} >
                         {
                           item.content ?
-                            <div>{item.content}</div>
+                            <QuillForEditor 
+                              readOnly={true}
+                              value={item.content}
+                            />
                             :
                             <div>
                               {this.renderJournalList(item.journal_details)}
@@ -371,6 +404,8 @@ class Detail extends Component{
      }
    }
 
+   
+
     return(
       <div className="main">
       <div className="topWrapper">
@@ -436,28 +471,26 @@ class Detail extends Component{
             <div className="df">
               <Link to={``}><img className="user_img" src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt=""/></Link>
               <div className="new_context">
-                <Form.Item>
-                  {getFieldDecorator('content', {
-                    rules: [{
-                      required: true, message: '请输入内容'
-                    }],
-                  })(
-                    <QuillForEditor
-                      imgAttrs={{ width: '60px', height: '30px' }}
-                      wrapStyle={{
-                        height: '200px',
-                        opacity:1,
-                      }}
-                      autoFocus={true}
-                      style={{ height: '150px' }}
-                      placeholder="添加评论..."
-                      // options={options}
-                      value={'ctx'}
-                      // showUploadImage={handleShowImage}
-                      // onContentChange={handleContentChange}
-                    />
-                  )}
-                </Form.Item>
+                <div className="quillContent">
+                  <QuillForEditor
+                    imgAttrs={{ width: '60px', height: '30px' }}
+                    wrapStyle={{
+                      height: '200px',
+                      opacity:1,
+                    }}
+                    autoFocus={true}
+                    style={{ height: '150px' }}
+                    placeholder="添加评论..."
+                    options={options}
+                    value={quillValue}
+                    onContentChange={this.onContentChange}
+                    // showUploadImage={handleShowImage}
+                    // onContentChange={handleContentChange}
+                  />
+                  <p className="quillFlag">
+                    { quillFlag && <span className="">请输入评论内容</span>}
+                  </p>
+                </div>
                 <UploadComponent load={this.UploadFunc} isComplete={showFiles} changeIsComplete={this.changeIsComplete}></UploadComponent>
                 <p className="clearfix mt15">
                   <a className="topWrapper_btn fr" type="submit" onClick={this.addjournals}>评论</a>

public/react/src/forge/Order/New.js

@@ -12,22 +12,8 @@ import axios from 'axios';
 
 const Option = Select.Option;
 const TextArea = Input.TextArea;
-{/* <QuillForEditor
-  imgAttrs={{ width: '60px', height: '30px' }}
-  wrapStyle={{
-    height: showQuill ? 'auto' : '0px',
-    opacity: showQuill ? 1 : 0,
-    overflow: showQuill ? 'none' : 'none',
-    transition: 'all 0.3s'
-  }}
-  autoFocus={focus}
-  style={{ height: '150px' }}
-  placeholder="说点儿什么~"
-  options={options}
-  value={ctx}
-  showUploadImage={handleShowImage}
-  onContentChange={handleContentChange}
-/> */}
+
+
 class New extends Component{
   constructor(props){
     super(props);

public/react/src/forge/Order/order.css

@@ -6,7 +6,18 @@
   border-bottom: 1px solid #EEEEEE;
   flex-wrap: wrap;
 }
-
+.quillContent{
+  position: relative;
+  margin-bottom: 4px;
+}
+.quillFlag{
+  position: absolute;
+  bottom:0px;
+  left:6px;
+  height: 20px;
+  line-height: 18px;
+  color: red;
+}
 .topmilepost{
   padding: 20px 0;
   box-sizing: border-box;
@@ -354,9 +365,9 @@
   width: 80%;
   padding-left: 80px;
 }
-.detail_ptitlecount{
+/* .detail_ptitlecount{
   padding: 15px;
-}
+} */
 
 .tagList > div:last-child{
   border-bottom: none;

public/react/src/forge/quillForEditor/index.js

@@ -177,7 +177,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;

public/react/src/forge/quillForEditor/index.scss

@@ -14,6 +14,9 @@
       content: '12px';
       font-size: 12px;
   }
+  .ql-toolbar.ql-snow{
+    padding:0px 8px;
+  }
   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
       content: '14px';