From 84afe73ec8934272bb75e5d4cd790b3863cda42e Mon Sep 17 00:00:00 2001
From: tangjiang <465264938@qq.com>
Date: Wed, 8 Jan 2020 16:28:08 +0800
Subject: [PATCH] add quill editor

---
 .../courses/exercise/new/SingleEditor.js      | 74 +++++++++++++++++--
 1 file changed, 68 insertions(+), 6 deletions(-)

diff --git a/public/react/src/modules/courses/exercise/new/SingleEditor.js b/public/react/src/modules/courses/exercise/new/SingleEditor.js
index 0b1b7599a..8585e0a82 100644
--- a/public/react/src/modules/courses/exercise/new/SingleEditor.js
+++ b/public/react/src/modules/courses/exercise/new/SingleEditor.js
@@ -8,8 +8,9 @@ import {
 import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
 import axios from 'axios'
 import update from 'immutability-helper'
-
 import {getUrl, ActionBtn, DMDEditor, ConditionToolTip} from 'educoder';
+import QuillForEditor from "../../../../common/quillForEditor";
+
 const { TextArea } = Input;
 const confirm = Modal.confirm;
 const $ = window.$
@@ -47,6 +48,9 @@ class SingleEditor extends Component{
       question_title: this.props.question_title || '',
       question_type: this.props.question_type || 0,
       question_score: this.props.question_score || this.props.init_question_score,
+      choice_editor: 'md',
+      quill_question_title: '',
+      quill_default_title: ''
     }
   }
   addOption = () => {
@@ -205,8 +209,33 @@ class SingleEditor extends Component{
   toShowMode = () => {
 
   }
+
+  // 切换编辑器
+  handleChangeEditor = (e) => {
+    const {quill_question_title} = this.state;
+    const value = e.target.value
+    if (value === 'quill') {
+      const _val = quill_question_title ? JSON.parse(quill_question_title) : '';
+      this.setState({
+        quill_default_title: _val
+      })
+    }
+    this.setState({
+      choice_editor: value
+    });
+  }
+
+  // quill编辑器内容变化时调用此接口
+  handleCtxChange = (ctx) => {
+    console.log('编辑器内容', ctx);
+    // 保存编辑器内容
+    this.setState({
+      quill_question_title: JSON.stringify(ctx)
+    });
+  }
+
   render() {
-    let { question_title, question_score, question_type, question_choices, standard_answers } = this.state;
+    let { question_title, question_score, question_type, question_choices, standard_answers, choice_editor, quill_default_title } = this.state;
     let { question_id, index, exerciseIsPublish,
       // question_title,
       // question_type,
@@ -245,18 +274,51 @@ class SingleEditor extends Component{
                 max-width: 1056px;
                 word-break:break-all;
               }
+              .editor_area{
+                display: inline-block;
+                float: right;
+                // line-height: 30px;
+                // height: 30px;
+              }
+              .editor_txt{
+                margin-right: 10px;
+                font-size: 12px;
+                color: #999;
+              }
+              .radio_style{
+                display: inline-block;
+                vertical: center;
+              }
             `}</style>
             <p className="mb10 clearfix">
               {/* {!question_id ? '新建' : '编辑'} */}
                 <span className="color-blue font-16 mr20 fl">选择题</span>
                 <span className="color-grey-9 font-12 fl">（客观题，由系统自动评分，请设置标准答案）</span>
+                {/* <Switch checkedChildren="MD" unCheckedChildren="Quill"></Switch> */}
+                {/* <div className="editor_area">
+                  <span className="editor_txt">切换编辑器:</span>
+                  <Radio.Group style={{ float: 'right' }} value={choice_editor} onChange={this.handleChangeEditor}>
+                    <Radio className="radio_style" value={'md'}>MD</Radio>
+                    <Radio className="radio_style" value={'quill'}>Quill</Radio>
+                  </Radio.Group>
+                </div> */}
             </p>
 
-            <TPMMDEditor mdID={qNumber} placeholder="请您输入题目" height={155} className="mb20"
-              initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
-              ref="titleEditor"
+            {choice_editor === 'md'
+              ? <TPMMDEditor mdID={qNumber} placeholder="请您输入题目" height={155} className="mb20"
+                  initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
+                  ref="titleEditor"
+                ></TPMMDEditor>
 
-            ></TPMMDEditor>
+              : <QuillForEditor
+                  wrapStyle={{ marginBottom: '35px' }}
+                  style={{ height: '109px' }}
+                  options={['code', 'image', 'formula']}
+                  placeholder="请您输入题目"
+                  value={quill_default_title}
+                  onContentChange={this.handleCtxChange}
+                ></QuillForEditor>
+            }
 
           {question_choices.map( (item, index) => {
               const bg = standard_answers[index] ? 'check-option-bg' : ''