student-client/src/features/OnlineExam/Examing/TextQuestionView.vue

<template>
  <div v-if="isSyncState" class="question-view">
    <question-body
      :questionBody="question.body"
      :examQuestion="examQuestion"
    ></question-body>
    <div class="ops">
      <div class="score">({{ examQuestion.questionScore }}分)</div>
    </div>
    <div class="option">
      <!-- <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"
          @keydown="disableCtrl"
          :contenteditable="true"
          v-html="studentAnswer"
          v-once
          @input="$event => textInput($event)"
          @blur="$event => textInput($event)"
          class="stu-answer"
        ></div>
      </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>
</template>

<script>
import QuestionBody from "./QuestionBody";
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapGetters } = createNamespacedHelpers(
  "examingHomeModule"
);

export default {
  name: "TextQuestionView",
  data() {
    return {
      studentAnswer: this.examQuestion.studentAnswer,
      isShowAnswer: false
    };
  },
  props: {
    question: Object,
    examQuestion: Object
  },
  methods: {
    ...mapMutations(["updateExamQuestion"]),
    ...mapGetters(["examShouldShowAnswer"]),
    disableCtrl(e) {
      if (e.ctrlKey || e.metaKey || e.altKey) {
        // .ctrlKey tells that ctrl key was pressed.
        e.preventDefault();
        return false;
      }
      return true;
    },
    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;
    }
  },
  watch: {
    examQuestion() {
      // console.log(this.examQuestion.studentAnswer);
      this.studentAnswer = this.examQuestion.studentAnswer;
    },
    studentAnswer() {
      let realAnswer = null;
      if (this.studentAnswer) {
        // 如果有实际内容
        realAnswer = this.studentAnswer
          .replace(/<sup><\/sup>/gi, "")
          .replace(/<sub><\/sub>/gi, "")
          .replace(/<script/gi, "&lt;script")
          .replace(/script>/gi, "script&gt;");
        // .replace(/</gi, "&lt;")
        // .replace(/>/gi, "&gt;")
        // .replace(/&lt;div&gt;&lt;br&gt;&lt;\/div&gt;/gi, "<div><br></div>");
      }
      if (realAnswer !== this.examQuestion.studentAnswer) {
        this.updateExamQuestion({
          order: this.examQuestion.order,
          studentAnswer: realAnswer
        });
      }
    }
  },
  computed: {
    isSyncState() {
      return this.examQuestion.order == this.$route.params.order;
    },
    rightAnswerTransform() {
      return this.question.rightAnswer.join("");
    }
  },
  components: {
    QuestionBody
  }
};
</script>

<style scoped>
.question-view {
  display: grid;
  grid-row-gap: 10px;
}

.question-body {
  font-size: 18px;
  margin-bottom: 10px;
}

.ops {
  display: flex;
  align-items: flex-end;
}

.text-ops {
  margin: 0 5px 5px 0;
}

.stu-answer {
  width: 100%;
  max-width: 500px;
  min-height: 300px;
  border: 1px solid grey;
}
</style>