试题选项修改

public/static/ueditorPlus/ueditor.config.js

@@ -59,7 +59,7 @@
       ".gif",
       ".bmp"
     ],
-
+    fontfamily: [],
     //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
     toolbars: [
       ["fullscreen", "source", "|", "bold", "italic", "underline", "forecolor", "fontfamily", "fontsize", "|", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "|", "insertimage", "inserttable", 'formula', "gapfilling", 'combox']
@@ -101,7 +101,7 @@
       // 禁止本地上传
       disableUpload: false,
     }
-    , zIndex: 2000
+    , zIndex: 2500
     , fullscreen: false
 
     , rgb2Hex: true,

src/pages/ques/detail/index.vue

@@ -57,7 +57,12 @@
               <el-radio v-else v-model="item.answerIsCorrect" :true-label="1" :label="1" @change="correctChange(i)">选项{{
                 numToLetter(i)
               }}</el-radio>
-              <el-input placeholder="请输入" v-model="item.optionText"></el-input>
+              <div v-if="!item.focus" class="opt-input" @click="optFocus(item)">
+                <div v-if="item.optionText" v-html="item.optionText"></div>
+                <p v-else class="default">请输入</p>
+              </div>
+              <UeditorPlus v-else class="opt-editor" :ref="'opt' + item.optionNumber" v-model="item.optionText"
+                @ready="editor => optReady(editor, item)" />
               <template v-if="form.questionType !== 'judgement'">
                 <i class="icon el-icon-circle-plus-outline" @click="addOpt(i)"></i>
                 <i class="icon el-icon-remove-outline" @click="delOpt(i)"></i>
@@ -66,7 +71,6 @@
           </div>
         </el-form-item>
 
-
         <!-- 填空题特有 -->
         <template v-if="form.questionType === 'fill_blank'">
           <el-form-item label="正确答案" required>
@@ -228,6 +232,7 @@ export default {
         answerIsCorrect: '',
         optionNumber: '',
         optionText: '',
+        focus: 0,
       },
       answerAnalysis: '',
       originFillBlank: {},
@@ -331,6 +336,7 @@ export default {
             // this.questionBankCategory = r.questionBankCategory
           }
 
+          opts.map(e => e.focus = 0)
           this.form = {
             questionId: r.questionId,
             questionType: r.questionType,
@@ -477,6 +483,20 @@ export default {
     delOpt (i) {
       this.form.questionAnswerVersions.length > 2 && this.form.questionAnswerVersions.splice(i, 1)
     },
+    // 移除选项
+    optFocus (e) {
+      const opts = this.form.questionAnswerVersions
+      opts.map(n => n.focus = 0)
+      e.focus = 1
+    },
+    // 选项富文本加载完毕回调
+    optReady (editor, opt) {
+      editor.setContent(opt.optionText)
+      editor.addListener('blur', () => {
+        opt.optionText = editor.getContent()
+      })
+      editor.focus()
+    },
 
     editorReady (instance) {
       console.log("🚀 ~ editorReady ~ instance:", instance)
@@ -721,6 +741,24 @@ export default {
       margin-right: 15px;
     }
 
+    .opt-input {
+      width: 100%;
+      min-height: 32px;
+      padding: 0 15px;
+      font-size: 13px;
+      border: 1px solid #DCDEE0;
+      border-radius: 2px;
+      cursor: text;
+    }
+
+    .default {
+      color: #8f8f8f;
+    }
+
+    .opt-editor {
+      width: calc(100% - 132px);
+    }
+
     .icon {
       margin-left: 10px;
       font-size: 18px;

src/pages/testPaper/detail/template.vue

@@ -240,6 +240,7 @@ export default {
     // 使用模板
     async useTemplate (row) {
       const data = await this.getDetail(row.templateId)
+      data.paperOutline.map(e => e.examQuestions = [])
       this.$parent.form.paperOutline = data.paperOutline
       this.listVisible = false
     },