富文本录入声调

src/components/common/RichText.vue

@@ -49,6 +49,7 @@ import 'tinymce/plugins/ax_wordlimit'; // 字数限制插件
 import { getRandomNumber } from '@/utils';
 import { isNodeType } from '@/utils/validate';
 import { fileUpload } from '@/api/app';
+import { addTone, handleToneValue } from '@/views/exercise_questions/data/common';
 
 export default {
   name: 'RichText',
@@ -130,6 +131,12 @@ export default {
             editor.getBody().style.fontSize = `${this.font_size}pt`; // 设置默认字体大小
             editor.getBody().style.fontFamily = 'Arial'; // 设置默认字体
           });
+
+          editor.on('click', () => {
+            if (editor.queryCommandState('ToggleToolbarDrawer')) {
+              editor.execCommand('ToggleToolbarDrawer');
+            }
+          });
         },
         font_formats:
           '楷体=楷体,微软雅黑;' +
@@ -358,6 +365,35 @@ export default {
     },
     handleRichTextBlur() {
       this.$emit('handleRichTextBlur');
+      let content = tinymce.get(this.id).getContent();
+      // 用标签分割富文本，保留标签
+      let reg = /(<[^>]+>)/g;
+      let text = content
+        .split(reg)
+        .filter((item) => item)
+        // 如果是标签，直接返回
+        // 如果是文本，将文本按空格分割为数组，如果是拼音，将拼音转为带音调的拼音
+        .map((item) => {
+          return reg.test(item) ? item : item.split(/\s+/).map((item) => handleToneValue(item));
+        })
+        // 如果是标签，直接返回
+        // 二维数组，转为拼音，并打平为一维数组
+        .map((item) => {
+          if (/<[^>]+>/g.test(item)) return item;
+          return item
+            .map((li) =>
+              li.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
+            )
+            .flat();
+        })
+        // 如果是数组，将数组字符串每两个之间加一个空格
+        .map((item) => {
+          if (typeof item === 'string') return item;
+          return item.join(' ');
+        })
+        .join('');
+      // 更新 v-model
+      this.$emit('input', text);
     },
     // 设置填空
     setFill() {