eep_page/src/views/book/courseware/create/components/base/describe/Describe.vue

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <RichText
        ref="rich"
        v-model="data.content"
        :font-size="18"
        placeholder="输入描述"
        :is-view-pinyin="isEnable(data.property.view_pinyin)"
        @crateParsedTextInfoPinyin="crateParsedTextInfoPinyin"
      />
      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
      <PinyinText
        v-if="isEnable(data.property.view_pinyin)"
        :id="richId + '_pinyin_text'"
        :paragraph-list="data.paragraph_list"
        :pinyin-position="data.property.pinyin_position"
        @fillCorrectPinyin="fillCorrectPinyin"
      />
    </template>
  </ModuleBase>
</template>

<script>
import { getDescribeData } from '@/views/book/courseware/data/describe';
import { CrateParsedTextInfo_Pinyin } from '@/api/book';
import { isEnable } from '@/views/book/courseware/data/common';
import ModuleMixin from '../../common/ModuleMixin';
import RichText from '@/components/RichText.vue';
import PinyinText from '@/components/PinyinText.vue';
import DOMPurify from 'dompurify';

export default {
  name: 'DescribePage',
  components: { RichText, PinyinText },
  mixins: [ModuleMixin],
  data() {
    return {
      isEnable,
      data: getDescribeData(),
      selectContent: '',
      richId: '',
    };
  },
  watch: {
    'data.property': {
      handler(val) {
        let text = this.data.content.replace(/<[^>]+>/g, '');
        if (isEnable(val.view_pinyin) && text) {
          this.data.paragraph_list_parameter.text = text;
          this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
            val.is_first_sentence_first_hz_pinyin_first_char_upper_case;
          this.crateParsedTextInfoPinyin(text);
        }
      },
      deep: true,
    },
    'data.content': {
      handler: 'handlerMindMap',
      deep: true,
    },
  },
  methods: {
    showSetting() {
      this.richId = this.$refs.rich.id;
      this.$emit('showSetting', this.data.property, this.data.type, this.id, {
        richId: this.richId,
      });
    },
    // 获取拼音解析文本
    crateParsedTextInfoPinyin(text) {
      if (text === '') {
        this.data.paragraph_list_parameter.pinyin_proofread_word_list = [];
        return;
      }
      this.data.paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '');
      this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
        this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
      CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then((res) => {
        if (res.parsed_text) {
          this.data.paragraph_list = res.parsed_text.paragraph_list;
        }
      });
    },
    // 填充校对后的拼音
    fillCorrectPinyin(selectContent, tonePinyin, i, j, k) {
      this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
        paragraph_index: i,
        sentence_index: j,
        word_index: k,
        word: selectContent,
        pinyin: tonePinyin,
      });
      this.data.paragraph_list[i][j][k].pinyin = tonePinyin;
    },
    // 思维导图
    handlerMindMap() {
      this.$set(this.data.mind_map, 'node_list', [
        {
          name: `题干：${this.sanitizeHTML(this.data.content)}`,
        },
      ]);
    },
    /**
     * 过滤 html，防止 xss 攻击
     * @param {string} html 需要过滤的html
     * @returns {string} 过滤后的html
     */
    sanitizeHTML(html) {
      return DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
    },
  },
};
</script>