富文本组件 拼音效果显示注释

src/components/PinyinText.vue

@@ -25,7 +25,12 @@
       </span>
     </div>
 
-    <CorrectPinyin :visible.sync="visible" :select-content="selectContent" @fillTonePinyin="fillTonePinyin" />
+    <CorrectPinyin
+      :visible.sync="visible"
+      :select-content="selectContent"
+      :component-type="componentType"
+      @fillTonePinyin="fillTonePinyin"
+    />
 
     <el-dialog
       ref="optimizedDialog"
@@ -64,6 +69,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    componentType: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {

src/views/book/courseware/create/components/base/common/CorrectPinyin.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     :visible="visible"
-    width="550px"
+    :width="componentType === 'richtext' ? '550px' : '400px'"
     top="20vh"
     :show-close="false"
     :close-on-click-modal="false"
@@ -37,6 +37,7 @@
     <el-input v-model="numberPinyin" autocomplete="off" placeholder="请输入正确的拼音" @blur="convertTonePinyin" />
     <span class="tips">一到四声分别用数字1-4表示，轻声用0表示,拼音间用空格隔开。</span>
     <RichText
+      v-if="componentType === 'richtext'"
       v-model="dataContent.note"
       toolbar="fontselect fontsizeselect forecolor backcolor|underline|bold italic strikethrough alignleft aligncenter alignright"
       :wordlimit-num="false"
@@ -70,6 +71,10 @@ export default {
       type: Object,
       required: true,
     },
+    componentType: {
+      type: String,
+      default: '',
+    },
   },
 
   data() {

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

@@ -30,6 +30,7 @@
           ref="PinyinText"
           :paragraph-list="data.paragraph_list"
           :pinyin-position="data.property.pinyin_position"
+          :component-type="data.type"
           @fillCorrectPinyin="fillCorrectPinyin"
         />
       </div>