富文本组件拼音模式添加分词校对

src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -23,6 +23,26 @@
           :translations="data.multilingual"
           @SubmitTranslation="handleMultilingualTranslation"
         />
+        <el-button
+          style="margin-left: 10px"
+          v-show="isEnable(data.property.view_pinyin)"
+          class="btn"
+          @click.native="showWordFlag = true"
+          >分词校对</el-button
+        >
+        <el-dialog
+          v-if="showWordFlag"
+          :visible.sync="showWordFlag"
+          :show-close="true"
+          :close-on-click-modal="true"
+          :modal-append-to-body="true"
+          :append-to-body="true"
+          :lock-scroll="true"
+          width="80%"
+          class="practiceBox"
+        >
+          <CheckWord :data="wordData" @saveWord="saveWord" />
+        </el-dialog>
 
         <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
         <PinyinText
@@ -59,10 +79,11 @@ import ModuleMixin from '../../common/ModuleMixin';
 import PinyinText from '@/components/PinyinText.vue';
 import DOMPurify from 'dompurify';
 import ExplanatoryNoteDialog from '@/components/ExplanatoryNoteDialog.vue';
+import CheckWord from '@/views/book/courseware/create/components/question/article/CheckWord.vue';
 
 export default {
   name: 'RichTextPage',
-  components: { PinyinText, ExplanatoryNoteDialog },
+  components: { PinyinText, ExplanatoryNoteDialog, CheckWord },
   mixins: [ModuleMixin],
   inject: ['getBookUnifiedTitleList'],
   data() {
@@ -74,6 +95,9 @@ export default {
       isViewExplanatoryNoteDialog: false,
       oldRichData: {},
       titleStyleList: [],
+      showWordFlag: false,
+      wordData: {},
+      inited: false,
     };
   },
   watch: {
@@ -115,11 +139,22 @@ export default {
       immediate: true,
     },
     'data.content': {
-      handler: 'handlerMindMap',
+      handler(newVal, oldVal) {
+        this.handlerMindMap();
+        if (!this.inited && newVal) {
+          this.parseFClist();
+        }
+      },
       deep: true,
     },
   },
   methods: {
+    async saveWord(saveArr) {
+      console.info('saveArr', saveArr);
+      const text = this.data.content.replace(/<[^>]+>/g, '');
+      await this.createParsedTextInfoPinyin(text, null, saveArr);
+      this.showWordFlag = false;
+    },
     handlePinyinDisplay(property) {
       const text = this.data.content.replace(/<[^>]+>/g, '');
       if (!isEnable(property.view_pinyin)) {
@@ -145,16 +180,20 @@ export default {
       });
     },
     // 获取拼音解析文本
-    createParsedTextInfoPinyin(text, styles) {
+    async createParsedTextInfoPinyin(text, styles, fc_list) {
       const data = this.data.paragraph_list_parameter;
       if (text === '') {
         data.pinyin_proofread_word_list = [];
         return;
       }
       data.text = text.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
-      data.is_first_sentence_first_hz_pinyin_first_char_upper_case =
-        this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
-      PinyinBuild_OldFormat(data).then(({ parsed_text }) => {
+      data.is_first_sentence_first_hz_pinyin_first_char_upper_case = this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+
+      fc_list = fc_list || [];
+      data.is_custom_fc = fc_list.length > 0;
+      data.fc_paragraph_list = fc_list;
+
+      await PinyinBuild_OldFormat(data).then(({ parsed_text }) => {
         if (parsed_text) {
           const mergedData = parsed_text.paragraph_list.map((outerArr, i) =>
             outerArr.map((innerArr, j) =>
@@ -177,13 +216,32 @@ export default {
                   Object.assign(tmp.activeTextStyle, styles);
                 }
                 return tmp;
-              }),
-            ),
+              })
+            )
           );
           this.data.paragraph_list = mergedData; // 取出合并后的数组
+          this.parseFClist();
         }
       });
     },
+    parseFClist() {
+      this.wordData = { detail: [] };
+      this.data.paragraph_list.forEach((item, index) => {
+        let sentenceList = []; // 句子按段数组
+        let segList = []; // 句子分词结果
+        item.forEach((items) => {
+          let sentence = items.reduce((acc, itemss) => `${acc + itemss.text}`, '');
+          let seg = items.map((itemss) => itemss.text);
+          sentenceList.push(sentence);
+          segList.push(seg);
+        });
+        let _tmp = this.wordData.detail[index] || {};
+        _tmp.sentences = sentenceList;
+        _tmp.segList = segList;
+        this.wordData.detail[index] = _tmp;
+      });
+      this.inited = true;
+    },
     // 文本哈希函数
     hashText(text) {
       if (!text) return '0';