富文本组件拼音字体根据富文本第一个字样式来显示

src/components/PinyinText.vue

@@ -111,14 +111,38 @@ export default {
         left: '0',
         margin: '0',
       },
+      isAllSetting: false,
     };
   },
-  watch: {},
+  computed: {
+    styleWatch() {
+      return {
+        fontSize: this.fontSize,
+        fontFamily: this.fontFamily,
+      };
+    },
+  },
+  watch: {
+    styleWatch: {
+      handler(newVal, oldVal) {
+        this.isAllSetting = true;
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
   methods: {
     textStyle(item) {
       const styles = { ...item.activeTextStyle };
-      if (this.fontSize) styles['font-size'] = this.fontSize;
-      if (this.fontFamily) styles['font-family'] = this.fontFamily;
+      styles['font-size'] = styles.fontSize;
+      styles['font-family'] = styles.fontFamily;
+
+      // if (this.fontSize) styles['font-size'] = this.fontSize;
+      // if (this.fontFamily) styles['font-family'] = this.fontFamily;
+      if (this.isAllSetting || !styles.fontSize) styles['font-size'] = this.fontSize;
+      if (this.isAllSetting || !styles.fontFamily) styles['font-family'] = this.fontFamily;
+      this.isAllSetting = false;
       return styles;
     },
     // 校对拼音

src/components/RichText.vue

@@ -269,7 +269,7 @@ export default {
           'Arial=arial,helvetica,sans-serif;' +
           'Times New Roman=times new roman,times,serif;' +
           '拼音=League;',
-        fontsize_formats: '8pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt',
+        fontsize_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt',
         // 字数限制
         ax_wordlimit_num: this.wordlimitNum,
         ax_wordlimit_callback(editor) {
@@ -702,8 +702,9 @@ export default {
       return str.replace(/<span\b[^>]*>(.*?)<\/span>/gi, '$1');
     },
     createParsedTextInfoPinyin(content) {
+      var styles = this.getFirstCharStyles();
       let text = content.replace(/<[^>]+>/g, '');
-      this.$emit('createParsedTextInfoPinyin', text);
+      this.$emit('createParsedTextInfoPinyin', text, styles);
     },
     handleRichTextBlur() {
       this.$emit('handleRichTextBlur', this.itemIndex);
@@ -816,7 +817,7 @@ export default {
         if (eleMathArs.length === 0) return;
         await this.$nextTick();
         window.MathJax.typesetPromise(eleMathArs).catch((err) =>
-          /* eslint-disable */ console.error(...oo_tx(`483836707_818_65_818_101_11`, 'MathJax error:', err)),
+          /* eslint-disable */ console.error(...oo_tx(`483836707_818_65_818_101_11`, 'MathJax error:', err))
         );
         this.mathEleIsInit = true;
       }
@@ -904,6 +905,73 @@ export default {
         }
       }
     },
+
+    getFirstCharStyles() {
+      const editor = tinymce.activeEditor;
+      if (!editor) return {};
+
+      const firstTextNode = this.findFirstTextNode(editor.getBody());
+      if (!firstTextNode) return {};
+
+      const styles = {};
+      let element = firstTextNode.parentElement;
+
+      while (element && element !== editor.getBody().parentElement) {
+        const computed = window.getComputedStyle(element);
+
+        if (!styles.fontFamily && computed.fontFamily && computed.fontFamily !== 'inherit') {
+          styles.fontFamily = computed.fontFamily;
+        }
+
+        if (!styles.fontSize && computed.fontSize && computed.fontSize !== 'inherit') {
+          const fontSize = computed.fontSize;
+          const pxValue = parseFloat(fontSize);
+          if (!isNaN(pxValue)) {
+            // px转pt公式：pt = px * 3/4
+            const ptValue = Math.round(pxValue * 0.75 * 10) / 10;
+            styles.fontSize = ptValue + 'pt';
+          } else {
+            styles.fontSize = fontSize;
+          }
+        }
+
+        if (!styles.color && computed.color && computed.color !== 'inherit') {
+          styles.color = computed.color;
+        }
+
+        if (!styles.bold && (computed.fontWeight === 'bold' || computed.fontWeight === '700')) {
+          styles.bold = true;
+          styles.fontWeight = 'bold';
+        }
+
+        if (!styles.underline && computed.textDecoration.includes('underline')) {
+          styles.underline = true;
+          styles.textDecoration = 'underline';
+        }
+
+        if (!styles.strikethrough && computed.textDecoration.includes('line-through')) {
+          styles.strikethrough = true;
+          styles.textDecoration = 'line-through';
+        }
+
+        if (Object.keys(styles).length >= 6) break;
+
+        element = element.parentElement;
+      }
+      return styles;
+    },
+
+    findFirstTextNode(element) {
+      const walker = document.createTreeWalker(
+        element,
+        NodeFilter.SHOW_TEXT,
+        {
+          acceptNode: (node) => (node.textContent.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT),
+        },
+        false
+      );
+      return walker.nextNode();
+    },
   },
 };
 </script>

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

@@ -12,7 +12,7 @@
         <el-option v-for="item in fontFamilyOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
       <el-select v-model="dataContent.activeTextStyle.fontSize" placeholder="请选择">
-        <el-option v-for="item in fontSizeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-option v-for="size in fontSizeOptions" :key="size" :label="size" :value="size" />
       </el-select>
       <span class="picker-area">
         <el-color-picker
@@ -99,20 +99,25 @@ export default {
         },
       ],
       fontSizeOptions: [
-        { value: '12px', label: '12px' },
-        { value: '14px', label: '14px' },
-        { value: '16px', label: '16px' },
-        { value: '18px', label: '18px' },
-        { value: '20px', label: '20px' },
-        { value: '22px', label: '22px' },
-        { value: '24px', label: '24px' },
-        { value: '26px', label: '26px' },
-        { value: '28px', label: '28px' },
-        { value: '30px', label: '30px' },
+        '8pt',
+        '10pt',
+        '12pt',
+        '14pt',
+        '16pt',
+        '18pt',
+        '20pt',
+        '22pt',
+        '24pt',
+        '26pt',
+        '28pt',
+        '30pt',
+        '32pt',
+        '34pt',
+        '36pt',
       ],
       activeTextStyle: {
         fontFamily: 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif, alabo',
-        fontSize: '16px',
+        fontSize: '12pt',
         color: 'black',
         textDecoration: '',
         fontWeight: '',
@@ -136,7 +141,6 @@ export default {
           }
         }
         this.$set(this.dataContent, 'activeTextStyle', style);
-        // console.info(this.dataContent);
       },
       deep: true,
     },

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

@@ -117,15 +117,14 @@ export default {
       });
     },
     // 获取拼音解析文本
-    createParsedTextInfoPinyin(text) {
+    createParsedTextInfoPinyin(text, styles) {
       const data = this.data.paragraph_list_parameter;
       if (text === '') {
         data.pinyin_proofread_word_list = [];
         return;
       }
       data.text = text.replace(/<[^>]+>/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;
+      data.is_first_sentence_first_hz_pinyin_first_char_upper_case = this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
       CrateParsedTextInfo_Pinyin(data).then(({ parsed_text }) => {
         if (parsed_text) {
           const mergedData = parsed_text.paragraph_list.map((outerArr, i) =>
@@ -138,14 +137,19 @@ export default {
                   originalItem.hash === this.hashText(newItem.text) &&
                   originalItem.id === `p${i}-l${j}-i${k}`;
                 if (!newItem.pinyin) newItem.pinyin = newItem.text;
-                return {
+                var tmp = {
                   ...newItem,
                   id: `p${i}-l${j}-i${k}`,
                   hash: this.hashText(newItem.text),
                   ...(isSameItem && originalItem.activeTextStyle && { activeTextStyle: originalItem.activeTextStyle }),
                 };
-              }),
-            ),
+                if (styles) {
+                  if (!tmp.activeTextStyle) tmp.activeTextStyle = {};
+                  Object.assign(tmp.activeTextStyle, styles);
+                }
+                return tmp;
+              })
+            )
           );
           this.data.paragraph_list = mergedData; // 取出合并后的数组
         }