简答题增加文本操作：剪切、粘贴、上标、下标

src/features/OnlineExam/Examing/TextQuestionView.vue

@@ -5,15 +5,29 @@
       <div class="score">({{examQuestion.questionScore}}分)</div>
     </div>
     <div class="option">
-      <textarea v-model="studentAnswer" maxlength="5000" class="stu-answer" type="text" />
+      <!-- <textarea v-model="studentAnswer" maxlength="5000" type="text" /> -->
+
+      <div>
+        <div class="menu">
+          <i-button type="info" class="text-ops" size="small" @click="textCopy">复制</i-button>
+          <i-button type="info" class="text-ops" size="small" @click="textCut">剪切</i-button>
+          <i-button type="info" class="text-ops" size="small" @click="textPaste">粘贴</i-button>
+          <i-button type="info" class="text-ops" size="small" @click="textSup">上标</i-button>
+          <i-button type="info" class="text-ops" size="small" @click="undoTextSup">取消上标</i-button>
+          <i-button type="info" class="text-ops" size="small" @click="textSub">下标</i-button>
+          <i-button type="info" class="text-ops" size="small" @click="undoTextSup">取消下标</i-button>
+        </div>
+        <div ref="answerDiv" :contenteditable="true" v-html="studentAnswer" @blur="($event) => textInput($event)" class="stu-answer">
+        </div>
       </div>
-    <div class="reset">
-      <i-button type="warning" size="large" @click="studentAnswer=null">重置答案</i-button>
-      <span v-if="examShouldShowAnswer()">
-        &nbsp;&nbsp;&nbsp;<i-button type="info" size="large" @click="showAnswer">显示答案</i-button>
-      </span>
-      <div v-if="examShouldShowAnswer() && isShowAnswer">
-        正确答案：<div v-html="rightAnswerTransform"></div>
+      <div class="reset" style="padding-top: 20px">
+        <i-button type="warning" size="large" @click="studentAnswer=null">重置答案</i-button>
+        <span v-if="examShouldShowAnswer()">
+          &nbsp;&nbsp;&nbsp;<i-button type="info" size="large" @click="showAnswer">显示答案</i-button>
+        </span>
+        <div v-if="examShouldShowAnswer() && isShowAnswer">
+          正确答案：<div v-html="rightAnswerTransform"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -41,6 +55,48 @@ export default {
   methods: {
     ...mapMutations(["updateExamQuestion"]),
     ...mapGetters(["examShouldShowAnswer"]),
+    textCopy() {
+      var selElm = getSelection();
+      var selRange = selElm.getRangeAt(0);
+      this.copyNode = selRange.cloneContents();
+    },
+    textCut() {
+      var selElm = getSelection();
+      var selRange = selElm.getRangeAt(0);
+      this.copyNode = selRange.extractContents();
+      this.studentAnswer = this.$refs.answerDiv.innerHTML;
+    },
+    textPaste() {
+      var selElm = getSelection();
+      var selRange = selElm.getRangeAt(0);
+      selRange.deleteContents();
+      selRange.insertNode(this.copyNode.cloneNode(true));
+      this.studentAnswer = this.$refs.answerDiv.innerHTML;
+    },
+    textSup() {
+      getSelection()
+        .getRangeAt(0)
+        .surroundContents(document.createElement("sup"));
+      this.studentAnswer = this.$refs.answerDiv.innerHTML;
+    },
+    undoTextSup() {
+      getSelection().modify("extend", "left", "character");
+      let selRange = getSelection().getRangeAt(0);
+      var documentFragment = selRange.extractContents();
+      var text = new Text(documentFragment.textContent);
+      selRange.insertNode(text);
+      this.studentAnswer = this.$refs.answerDiv.innerHTML;
+    },
+    textSub() {
+      getSelection()
+        .getRangeAt(0)
+        .surroundContents(document.createElement("sub"));
+      this.studentAnswer = this.$refs.answerDiv.innerHTML;
+    },
+    textInput($event) {
+      console.log($event.target.innerHTML);
+      this.studentAnswer = $event.target.innerHTML;
+    },
     showAnswer() {
       this.isShowAnswer = !this.isShowAnswer;
     }
@@ -55,6 +111,8 @@ export default {
       if (this.studentAnswer) {
         // 如果有实际内容
         realAnswer = this.studentAnswer
+          .replace(/<sup><\/sup>/gi, "")
+          .replace(/<sub><\/sub>/gi, "")
           .replace(/<script/gi, "&lt;script")
           .replace(/script>/gi, "script&gt;");
       }
@@ -96,16 +154,14 @@ export default {
   align-items: flex-end;
 }
 
+.text-ops {
+  margin: 0 5px 5px 0;
+}
+
 .stu-answer {
   width: 100%;
   max-width: 500px;
   min-height: 300px;
-}
-
-.option {
-  display: flex;
-}
-.question-options {
-  text-align: left;
+  border: 1px solid grey;
 }
 </style>