注释添加拼音

src/components/RichText.vue

@@ -121,6 +121,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    itemIndex: {
+      type: Number,
+      default: null,
+    },
   },
   data() {
     return {
@@ -551,7 +555,7 @@ export default {
       this.$emit('createParsedTextInfoPinyin', text);
     },
     handleRichTextBlur() {
-      this.$emit('handleRichTextBlur');
+      this.$emit('handleRichTextBlur', this.itemIndex);
       let content = tinymce.get(this.id).getContent();
       if (this.isViewPinyin) {
         this.createParsedTextInfoPinyin(content);

src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -11,22 +11,33 @@
         class="title-box"
       />
       <el-table :data="data.option" :key="refreshKey" border style="width: 100%">
-        <el-table-column prop="number" label="序号" width="70">
+        <el-table-column fixed prop="number" label="序号" width="70">
           <template slot-scope="scope">
             <el-input v-model="scope.row.number" />
           </template>
         </el-table-column>
-        <el-table-column prop="con" label="内容" width="200">
+        <el-table-column fixed prop="con" label="内容" width="200">
           <template slot-scope="scope">
             <RichText
               ref="richText"
               v-model="scope.row.con"
               :inline="true"
+              :item-index="scope.$index"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
               @handleRichTextBlur="handleBlurCon"
             />
           </template>
         </el-table-column>
+        <el-table-column prop="con" label="拼音" width="150" v-if="isEnable(data.property.view_pinyin)">
+          <template slot-scope="scope">
+            <RichText
+              ref="richText"
+              v-model="scope.row.pinyin"
+              :inline="true"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </template>
+        </el-table-column>
         <el-table-column prop="interpret" label="翻译" width="200">
           <template slot-scope="scope">
             <RichText
@@ -37,7 +48,7 @@
             />
           </template>
         </el-table-column>
-        <el-table-column prop="note" label="注释">
+        <el-table-column prop="note" label="注释" width="200">
           <template slot-scope="scope">
             <RichText
               ref="richText"
@@ -47,7 +58,7 @@
             />
           </template>
         </el-table-column>
-        <el-table-column prop="img_list" label="图片">
+        <el-table-column prop="img_list" label="图片" width="300">
           <template slot-scope="scope">
             <UploadPicture
               :file-id="scope.row.file_list[0]"
@@ -75,15 +86,6 @@
         :translations="data.multilingual"
         @SubmitTranslation="handleMultilingualTranslation"
       />
-      <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
-      <PinyinText
-        v-if="isEnable(data.property.view_pinyin)"
-        :id="'table_pinyin_text'"
-        ref="PinyinText"
-        :paragraph-list="data.paragraph_list"
-        :pinyin-position="data.property.pinyin_position"
-        @fillCorrectPinyin="fillCorrectPinyin"
-      />
     </template>
   </ModuleBase>
 </template>
@@ -92,14 +94,13 @@
 import { isEnable } from '@/views/book/courseware/data/common';
 import ModuleMixin from '../../common/ModuleMixin';
 import { CrateParsedTextInfo_Pinyin } from '@/api/book';
-import PinyinText from '@/components/PinyinText.vue';
 import UploadPicture from '../new_word/components/UploadPicture.vue';
 
 import { getNotesData, getOption } from '@/views/book/courseware/data/notes';
-
+import cnchar from 'cnchar';
 export default {
   name: 'NotesPage',
-  components: { PinyinText, UploadPicture },
+  components: { UploadPicture },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -111,40 +112,13 @@ export default {
   },
   watch: {
     'data.option': 'handleMindMap',
-    'data.property.view_pinyin': {
-      handler(val) {
-        let text = '';
-        this.data.option.forEach((item) => {
-          text += `${item.con.replace(/<[^>]+>/g, '')}\n`;
-        });
-        if (!isEnable(val)) {
-          this.data.paragraph_list = [];
-          return;
-        }
-        if (isEnable(val) && text && this.data.paragraph_list.length <= 0) {
-          this.data.paragraph_list_parameter.text = text;
-          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;
-          this.createParsedTextInfoPinyin(text);
-        }
-      },
-      deep: true,
-    },
+
     'data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case': {
       handler(val, oldVal) {
         if (val === oldVal) return;
-        let text = '';
-        this.data.option.forEach((item) => {
-          text += `${item.con.replace(/<[^>]+>/g, '')}\n`;
-        });
-        if (!isEnable(this.data.property.view_pinyin)) {
-          this.data.paragraph_list = [];
-          return;
-        }
-        if (text && isEnable(this.data.property.view_pinyin)) {
-          this.data.paragraph_list_parameter.text = text;
-          this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case = val;
-          this.createParsedTextInfoPinyin(text);
+
+        if (isEnable(this.data.property.view_pinyin)) {
+          this.handlePinyin();
         }
       },
       deep: true,
@@ -181,9 +155,32 @@ export default {
       });
       this.data.mind_map.node_list = node_list;
     },
-    handleBlurCon() {
+    handleBlurCon(i) {
+      let text = this.data.option[i].con.replace(/<[^>]+>/g, '');
+      this.data.option[i].pinyin = cnchar
+        .spell(
+          text,
+          'array',
+          this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' ? 'high' : 'low',
+          'tone',
+        )
+        .join(' ');
+
       this.handleMindMap();
     },
+    handlePinyin() {
+      this.data.option.forEach((item) => {
+        let text = item.con.replace(/<[^>]+>/g, '');
+        item.pinyin = cnchar
+          .spell(
+            text,
+            'array',
+            this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' ? 'high' : 'low',
+            'tone',
+          )
+          .join(' ');
+      });
+    },
     handleMultilingual() {
       this.multilingualText = this.data.title_con ? this.data.title_con : '<p>&nbsp;</p>';
       this.data.option.forEach((item) => {
@@ -207,7 +204,7 @@ export default {
             outerArr.map((innerArr, j) =>
               innerArr.map((newItem, k) => {
                 // 从 originalData 中找到对应的项
-                const originalItem = this.data.paragraph_list[i]?.[j];
+                const originalItem = this.data.paragraph_list[i]?.[j]?.[k];
 
                 // 如果 originalItem 有 activeTextStyle，就合并到 newItem
                 if (originalItem?.activeTextStyle) {
@@ -236,7 +233,7 @@ export default {
       });
     },
     // 填充校对后的拼音
-    fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j }) {
+    fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j, k }) {
       this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({
         paragraph_index: i,
         sentence_index: j,
@@ -244,8 +241,8 @@ export default {
         word: text,
         pinyin,
       });
-      if (pinyin) this.data.paragraph_list[i][j].pinyin = pinyin;
-      if (activeTextStyle) this.data.paragraph_list[i][j].activeTextStyle = activeTextStyle;
+      if (pinyin) this.data.paragraph_list[i][j][k].pinyin = pinyin;
+      if (activeTextStyle) this.data.paragraph_list[i][j][k].activeTextStyle = activeTextStyle;
     },
     uploadPic(file_id, index) {
       this.data.option[index].file_list[0] = file_id;

src/views/book/courseware/data/notes.js

@@ -26,6 +26,7 @@ export function getOption() {
   return {
     number: '',
     con: '',
+    pinyin:'',
     interpret: '', // 翻译
     note: '', // 注释
     file_list: [''], // 图片

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -23,16 +23,42 @@
             <div v-for="(item, index) in data.option" :key="'NPC-notes' + index" class="NPC-notes">
               <div class="NPC-notes-con">
                 <span class="NPC-notes-con-number" v-html="item.number"></span>
-                <span class="NPC-notes-con-text" v-html="item.con"></span>
-                <span class="multilingual" v-if="showLang">
-                  {{
-                    multilingualTextList[getLang()] &&
-                    multilingualTextList[getLang()][index] &&
-                    multilingualTextList[getLang()][index][0]
-                      ? multilingualTextList[getLang()][index][0]
-                      : ''
-                  }}
-                </span>
+                <div class="NPC-notes-con-box">
+                  <template v-if="isEnable(data.property.view_pinyin)">
+                    <p class="pinyin-text">
+                      <span v-if="data.property.pinyin_position === 'top'" class="pinyin" v-html="item.pinyin"> </span>
+                      <span>
+                        <span
+                          v-if="data.property.pinyin_position === 'front'"
+                          v-html="item.pinyin"
+                          class="pinyin pinyin-front"
+                        ></span
+                        ><span class="NPC-notes-con-text" v-html="item.con"></span
+                        ><span
+                          v-if="data.property.pinyin_position === 'back'"
+                          v-html="item.pinyin"
+                          class="pinyin pinyin-back"
+                        ></span>
+                      </span>
+                      <span
+                        v-if="data.property.pinyin_position === 'bottom'"
+                        class="pinyin"
+                        v-html="item.pinyin"
+                      ></span>
+                    </p>
+                  </template>
+
+                  <span class="NPC-notes-con-text" v-html="item.con" v-else></span>
+                  <span class="multilingual" v-if="showLang">
+                    {{
+                      multilingualTextList[getLang()] &&
+                      multilingualTextList[getLang()][index] &&
+                      multilingualTextList[getLang()][index][0]
+                        ? multilingualTextList[getLang()][index][0]
+                        : ''
+                    }}
+                  </span>
+                </div>
               </div>
               <div class="NPC-notes-trans" v-html="item.interpret"></div>
 
@@ -211,20 +237,46 @@ export default {
           justify-content: flex-start;
           margin-bottom: 12px;
 
-          > span {
+          .NPC-notes-con-box {
+            flex: 1;
+            margin-left: 5px;
+          }
+
+          .NPC-notes-con-number {
+            font-family: 'robot';
             font-size: 14px;
             font-style: normal;
             font-weight: normal;
             line-height: 150%;
             color: #e35454;
+          }
+
+          .NPC-notes-con-text {
+            width: max-content;
+            margin: 0 5px;
+
+            // font-size: 14px;
+            font-style: normal;
+            font-weight: normal;
+            line-height: 1;
+            color: #e35454;
 
-            &.NPC-notes-con-number {
-              font-family: 'robot';
+            :deep p {
+              // line-height: 150%;
+              display: inline;
             }
+          }
+        }
+
+        .pinyin {
+          font-family: 'League';
+          font-size: 14px;
 
-            &.NPC-notes-con-text {
-              // flex: 1;
-              margin: 0 5px;
+          &-front,
+          &-back {
+            :deep p {
+              // line-height: 150%;
+              display: inline;
             }
           }
         }