富文本优化

src/components/ExplanatoryNoteDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :title="'编辑' + titleText"
+    :title="titleText === '气泡' ? titleText : '编辑' + titleText"
     :visible.sync="visible"
     width="680px"
     :close-on-click-modal="false"
@@ -41,7 +41,7 @@ export default {
     },
     titleText: {
       type: String,
-      default: '注释',
+      default: '气泡',
     },
   },
   data() {

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

@@ -115,8 +115,8 @@
         @confirm="confirmExplanatoryNote"
         @cancel="cancelExplanatoryNote"
       />
-      <el-table :data="noteList" style="width: 100%; margin-top: 30px" border>
-        <el-table-column prop="text" label="词" width="200" />
+      <el-table :data="noteList" style="width: 100%; margin-top: 30px" border empty-text="选择文字内容添加气泡">
+        <el-table-column prop="text" label="标记文字" width="200" />
         <el-table-column label="注释内容">
           <template #default="{ row }">
             <div v-html="row.content"></div>
@@ -159,6 +159,7 @@ export default {
       wordData: {},
       inited: false,
       paragraphVersion: 0,
+      tempNoteData: null,
     };
   },
   computed: {
@@ -473,15 +474,37 @@ export default {
     viewExplanatoryNote(val) {
       this.isViewExplanatoryNoteDialog = val.visible;
       let id = val.annota_id || val.noteId;
-      if (this.data.note_list.some((p) => p.id === id)) {
-        this.oldRichData = this.data.note_list.find((p) => p.id === id);
+      const existingNote = this.data.note_list.find((p) => p.id === id);
+
+      if (existingNote) {
+        this.oldRichData = { ...existingNote };
+        this.tempNoteData = null;
       } else {
         this.oldRichData = {};
+        this.tempNoteData = val;
       }
     },
     // 点击弹窗确认-保存
     confirmExplanatoryNote(text) {
       this.isViewExplanatoryNoteDialog = false;
+
+      if (this.tempNoteData) {
+        const noteData = {
+          ...this.tempNoteData,
+          dataStr: text.dataStr || text.note || '',
+          annota_id: this.tempNoteData.annota_id || this.tempNoteData.id,
+          id: this.tempNoteData.annota_id || this.tempNoteData.id,
+        };
+        this.selectContentSetMemo(noteData, null);
+        this.tempNoteData = null;
+      } else if (this.oldRichData && this.oldRichData.id) {
+        const updatedNote = {
+          ...this.oldRichData,
+          dataStr: text.dataStr || text.note || '',
+        };
+        this.selectContentSetMemo(updatedNote, null);
+      }
+
       try {
         let ele = this.findComponentWithRefAndMethod(this.$children, 'richText', 'setExplanatoryNote');
         if (ele) {
@@ -496,18 +519,29 @@ export default {
     cancelExplanatoryNote() {
       const noteId = this.oldRichData?.id;
       let richTextID = this.$refs.richText.id;
-      try {
-        // 1. 通知富文本子组件移除高亮标签
-        let ele = this.findComponentWithRefAndMethod(this.$children, 'richText', 'cancelExplanatoryNote');
-        if (ele && noteId && richTextID) {
-          ele.cancelExplanatoryNote(noteId, richTextID);
+
+      if (this.tempNoteData) {
+        try {
+          let ele = this.findComponentWithRefAndMethod(this.$children, 'richText', 'cancelExplanatoryNote');
+          if (ele && this.tempNoteData.annota_id && richTextID) {
+            ele.cancelExplanatoryNote(this.tempNoteData.annota_id, richTextID);
+          }
+        } catch (error) {
+          console.error('移除高亮失败:', error);
+        }
+        this.tempNoteData = null;
+      } else if (noteId) {
+        try {
+          let ele = this.findComponentWithRefAndMethod(this.$children, 'richText', 'cancelExplanatoryNote');
+          if (ele && noteId && richTextID) {
+            ele.cancelExplanatoryNote(noteId, richTextID);
+          }
+        } catch (error) {
+          console.error('移除高亮失败:', error);
         }
-      } catch (error) {
-        console.error('移除高亮失败:', error);
-      }
-      if (noteId) {
         this.data.note_list = this.data.note_list.filter((p) => p.id !== noteId);
       }
+
       this.oldRichData = {};
       this.isViewExplanatoryNoteDialog = false;
     },