Browse Source

富文本加上字体、字号全文设置初始化的值

dsy 2 months ago
parent
commit
c8d7001fe1
21 changed files with 126 additions and 37 deletions
  1. 2 2
      package-lock.json
  2. 35 10
      src/components/RichText.vue
  3. 3 0
      src/views/book/courseware/create/components/CreateCanvas.vue
  4. 4 13
      src/views/book/courseware/create/components/FullTextSettings.vue
  5. 1 1
      src/views/book/courseware/create/components/base/rich_text/RichText.vue
  6. 2 1
      src/views/book/courseware/create/components/base/stem/Stem.vue
  7. 1 1
      src/views/book/courseware/create/components/question/article/NewWord.vue
  8. 2 0
      src/views/book/courseware/create/components/question/dialogue_article/Article.vue
  9. 2 0
      src/views/book/courseware/create/components/question/fill/Fill.vue
  10. 2 1
      src/views/book/courseware/create/components/question/input/Input.vue
  11. 8 1
      src/views/book/courseware/create/components/question/judge/Judge.vue
  12. 2 0
      src/views/book/courseware/create/components/question/matching/Matching.vue
  13. 10 0
      src/views/book/courseware/create/components/question/new_word/NewWord.vue
  14. 12 2
      src/views/book/courseware/create/components/question/notes/Notes.vue
  15. 12 0
      src/views/book/courseware/create/components/question/other_word/OtherWord.vue
  16. 9 1
      src/views/book/courseware/create/components/question/select/Select.vue
  17. 8 1
      src/views/book/courseware/create/components/question/sort/Sort.vue
  18. 2 0
      src/views/book/courseware/create/components/question/table/Table.vue
  19. 6 2
      src/views/book/courseware/create/components/question/video_interaction/ExerciseAdd.vue
  20. 2 0
      src/views/book/courseware/create/components/question/voice_matrix/VoiceMatrix.vue
  21. 1 1
      src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

+ 2 - 2
package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eep_page",
-  "version": "1.0.0",
+  "version": "2025.10.20",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eep_page",
-      "version": "1.0.0",
+      "version": "2025.10.20",
       "hasInstallScript": true,
       "dependencies": {
         "@tinymce/tinymce-vue": "^3.2.8",

+ 35 - 10
src/components/RichText.vue

@@ -65,6 +65,7 @@ export default {
     Editor,
     MathDialog,
   },
+  inject: ['getBookUnifiedAttr'],
   inheritAttrs: false,
   props: {
     inline: {
@@ -102,8 +103,12 @@ export default {
       default: false,
     },
     fontSize: {
-      type: Number,
-      default: 16,
+      type: String,
+      default: '12pt',
+    },
+    fontFamily: {
+      type: String,
+      default: 'Arial',
     },
     isHasSpace: {
       type: Boolean,
@@ -137,6 +142,7 @@ export default {
         left: 0,
       },
       id: getRandomNumber(),
+      bookUnifiedAttr: this.getBookUnifiedAttr(),
       init: {
         content_style: `
           mjx-container, mjx-container * {
@@ -148,6 +154,7 @@ export default {
         extended_valid_elements: 'span[*],mjx-container[*],svg[*],path[*]', // 明确允许 MathJax 标签
         inline: this.inline,
         font_size: this.fontSize,
+        font_family: this.fontFamily,
         language_url: `${process.env.BASE_URL}tinymce/langs/zh_CN.js`,
         placeholder: this.placeholder,
         language: 'zh_CN',
@@ -168,11 +175,11 @@ export default {
           let isRendered = false; // 标记是否已渲染
           let that = this;
           editor.on('init', () => {
-            editor.getBody().style.fontSize = `${this.font_size}pt`; // 设置默认字体大小
-            editor.getBody().style.fontFamily = 'Arial'; // 设置默认字体
+            editor.getBody().style.fontSize = this.init.font_size; // 设置默认字体大小
+            editor.getBody().style.fontFamily = this.init.font_family; // 设置默认字体
           });
 
-          editor.on('click', (e) => {
+          editor.on('click', () => {
             if (editor?.queryCommandState('ToggleToolbarDrawer')) {
               editor.execCommand('ToggleToolbarDrawer');
             }
@@ -194,19 +201,19 @@ export default {
           // 内容变化时重新渲染公式
           editor.on('change', () => this.renderMath());
 
-          editor.on('KeyDown', function (e) {
+          editor.on('KeyDown', (e) => {
             // 检测删除或退格键
             if (e.keyCode === 8 || e.keyCode === 46) {
               // 延迟执行以确保删除已完成
-              setTimeout(function () {
+              setTimeout(() => {
                 that.cleanupRemovedAnnotations(editor);
               }, 500);
             }
           });
 
           // 也可以监听剪切操作
-          editor.on('Cut', function () {
-            setTimeout(function () {
+          editor.on('Cut', () => {
+            setTimeout(() => {
               that.cleanupRemovedAnnotations(editor);
             }, 500);
           });
@@ -257,7 +264,7 @@ export default {
   },
   watch: {
     isViewNote: {
-      handler(newVal, oldVal) {
+      handler(newVal) {
         if (newVal) {
           let editor = tinymce.get(this.id);
           if (editor) {
@@ -267,6 +274,24 @@ export default {
         }
       },
     },
+    fontSize: {
+      handler(newVal) {
+        let editor = tinymce.get(this.id);
+        if (editor) {
+          editor.getBody().style.fontSize = newVal;
+          editor.execCommand('FontSize', false, newVal);
+        }
+      },
+    },
+    fontFamily: {
+      handler(newVal) {
+        let editor = tinymce.get(this.id);
+        if (editor) {
+          editor.getBody().style.fontFamily = newVal;
+          editor.execCommand('FontName', false, newVal);
+        }
+      },
+    },
   },
   created() {
     if (this.pageFrom !== 'audit') {

+ 3 - 0
src/views/book/courseware/create/components/CreateCanvas.vue

@@ -369,6 +369,9 @@ export default {
         item.setUnifiedAttr(data);
       });
       this.data.unified_attrib = data;
+      this.$nextTick(() => {
+        this.saveCoursewareContent();
+      });
     },
     getBookUnifiedAttr() {
       GetBookUnifiedAttrib({ book_id: this.project_id }).then(({ content }) => {

+ 4 - 13
src/views/book/courseware/create/components/FullTextSettings.vue

@@ -71,6 +71,7 @@
 import { pinyinPositionList, isEnable } from '@/views/book/courseware/data/common';
 
 import { GetBookUnifiedAttrib } from '@/api/book';
+import { unified_attrib } from '@/common/data';
 
 export default {
   name: 'FullTextSettings',
@@ -90,17 +91,7 @@ export default {
   },
   data() {
     return {
-      unified_attrib: {
-        topic_color: '#FFBBCC', // 主题色
-        font: '宋体,微软雅黑', // 字体
-        font_size: '12pt', // 字号
-        pinyin_size: '12pt', // 拼音字号
-        line_height: 1.5, // 行距
-        text_color: '#1d2129', // 文字颜色
-        align: 'LEFT', // 对齐方式 LEFT:左对齐 MIDDLE:居中 RIGHT:右对齐
-        view_pinyin: 'true', // 启用拼音
-        pinyin_position: 'top', // 拼音位置
-      },
+      unified_attrib,
       fontSizeList: [
         '8pt',
         '10pt',
@@ -125,7 +116,7 @@ export default {
   watch: {
     visible(val) {
       if (val) {
-        this.unified_attrib = { ...this.settings };
+        this.$set(this, 'unified_attrib', { ...this.unified_attrib, ...this.settings });
       }
     },
   },
@@ -135,7 +126,7 @@ export default {
   methods: {
     getBookUnifiedAttr() {
       GetBookUnifiedAttrib({ book_id: this.bookId }).then(({ content }) => {
-        if (content && (this.settings === null || Object.keys(this.settings).length > 0)) {
+        if (content && (this.settings === null || Object.keys(this.settings).length <= 0)) {
           this.unified_attrib = JSON.parse(content);
         }
       });

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

@@ -5,7 +5,7 @@
         <RichText
           ref="richText"
           v-model="data.content"
-          :font-size="18"
+          font-size="18pt"
           :is-view-note="true"
           placeholder="输入内容"
           :is-view-pinyin="isEnable(data.property.view_pinyin)"

+ 2 - 1
src/views/book/courseware/create/components/base/stem/Stem.vue

@@ -4,9 +4,10 @@
       <RichText
         ref="richText"
         v-model="data.content"
-        :font-size="18"
         placeholder="输入题干"
         :is-view-pinyin="isEnable(data.property.view_pinyin)"
+        :font-size="data?.unified_attrib?.font_size"
+        :font-family="data?.unified_attrib?.font"
         @createParsedTextInfoPinyin="createParsedTextInfoPinyin"
       />
       <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>

+ 1 - 1
src/views/book/courseware/create/components/question/article/NewWord.vue

@@ -195,8 +195,8 @@
       label="生词音频"
       type="audio"
       width="500px"
-      @uploadSuccess="uploadAudioSuccess"
       :style="{ marginBottom: data.audio_data.url.length === 0 ? '5px' : '' }"
+      @uploadSuccess="uploadAudioSuccess"
     />
     <div v-if="data.audio_data.url.length > 0" class="upload-file">
       <div class="file-name">

+ 2 - 0
src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -168,6 +168,8 @@
               v-model="remark.en"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
               :wordlimit-num="200"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
             />
           </div>
           <div v-if="remark.img_list && remark.img_list.length == 0" class="adult-book-input-item">

+ 2 - 0
src/views/book/courseware/create/components/question/fill/Fill.vue

@@ -9,6 +9,8 @@
           :is-fill="true"
           toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
           :wordlimit-num="false"
+          :font-size="data?.unified_attrib?.font_size"
+          :font-family="data?.unified_attrib?.font"
         />
         <el-input
           v-if="data.property.fill_type === fillTypeList[1].value"

+ 2 - 1
src/views/book/courseware/create/components/question/input/Input.vue

@@ -5,7 +5,8 @@
         ref="richText"
         v-model="data.content"
         toolbar="fontselect fontsizeselect alignleft aligncenter alignright forecolor backcolor"
-        :font-size="18"
+        :font-size="data?.unified_attrib?.font_size"
+        :font-family="data?.unified_attrib?.font"
         placeholder="请输入内容"
       />
 

+ 8 - 1
src/views/book/courseware/create/components/question/judge/Judge.vue

@@ -5,7 +5,14 @@
         <li v-for="(item, i) in data.option_list" :key="i" class="option-item">
           <span class="serial-number">{{ convertNumberToLetter(i) }}.</span>
           <div class="option-content">
-            <RichText ref="richText" v-model="item.content" placeholder="输入内容" :inline="true" />
+            <RichText
+              ref="richText"
+              v-model="item.content"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
+              placeholder="输入内容"
+              :inline="true"
+            />
           </div>
 
           <div

+ 2 - 0
src/views/book/courseware/create/components/question/matching/Matching.vue

@@ -12,6 +12,8 @@
                 placeholder="请输入"
                 :inline="true"
                 :height="32"
+                :font-size="data?.unified_attrib?.font_size"
+                :font-family="data?.unified_attrib?.font"
                 :is-view-pinyin="isEnable(data.property.view_pinyin)"
                 @createParsedTextInfoPinyin="handleParsedTextPinyin($event, i, j)"
               />

+ 10 - 0
src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -7,6 +7,8 @@
           ref="richText"
           v-model="data.title_con"
           :inline="true"
+          :font-size="data?.unified_attrib?.font_size"
+          :font-family="data?.unified_attrib?.font"
           :placeholder="'输入标题'"
           toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
           class="title-box"
@@ -254,6 +256,8 @@
               ref="richText"
               v-model="item.cixing"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </div>
@@ -271,6 +275,8 @@
               ref="richText"
               v-model="item.definition_list"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :placeholder="'多个释义用;隔开'"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
@@ -280,6 +286,8 @@
               ref="richText"
               v-model="item.collocation"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </div>
@@ -287,6 +295,8 @@
             <RichText
               ref="richText"
               v-model="item.liju_list"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :inline="true"
               :placeholder="'多条例句用回车'"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"

+ 12 - 2
src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -7,10 +7,12 @@
         v-model="data.title_con"
         :inline="true"
         :placeholder="'输入标题'"
+        :font-size="data?.unified_attrib?.font_size"
+        :font-family="data?.unified_attrib?.font"
         toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
         class="title-box"
       />
-      <el-table :data="data.option" :key="refreshKey" border style="width: 100%">
+      <el-table :key="refreshKey" :data="data.option" border style="width: 100%">
         <el-table-column fixed prop="number" label="序号" width="70">
           <template slot-scope="scope">
             <el-input v-model="scope.row.number" />
@@ -23,17 +25,21 @@
               v-model="scope.row.con"
               :inline="true"
               :item-index="scope.$index"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               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)">
+        <el-table-column v-if="isEnable(data.property.view_pinyin)" prop="con" label="拼音" width="150">
           <template slot-scope="scope">
             <RichText
               ref="richText"
               v-model="scope.row.pinyin"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </template>
@@ -44,6 +50,8 @@
               ref="richText"
               v-model="scope.row.interpret"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </template>
@@ -54,6 +62,8 @@
               ref="richText"
               v-model="scope.row.note"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </template>

+ 12 - 0
src/views/book/courseware/create/components/question/other_word/OtherWord.vue

@@ -13,6 +13,8 @@
               ref="richText"
               v-model="scope.row.new_word"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </template>
@@ -52,6 +54,8 @@
               ref="richText"
               v-model="scope.row.pinyin"
               :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
           </template>
@@ -61,6 +65,8 @@
             <RichText
               ref="richText"
               v-model="scope.row.cixing"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :inline="true"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
@@ -71,6 +77,8 @@
             <RichText
               ref="richText"
               v-model="scope.row.definition_list"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :inline="true"
               :placeholder="'多个释义用;隔开'"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
@@ -82,6 +90,8 @@
             <RichText
               ref="richText"
               v-model="scope.row.collocation"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :inline="true"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
             />
@@ -92,6 +102,8 @@
             <RichText
               ref="richText"
               v-model="scope.row.liju_list"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :inline="true"
               :placeholder="'多条例句用回车'"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"

+ 9 - 1
src/views/book/courseware/create/components/question/select/Select.vue

@@ -8,7 +8,15 @@
             <span :class="['checkbox', { active: isAnswer(item.mark) }]" @click="selectAnswer(item.mark)">
               <SvgIcon icon-class="check-mark" width="10" height="7" />
             </span>
-            <RichText ref="richText" v-model="item.content" placeholder="输入内容" :inline="true" :height="32" />
+            <RichText
+              ref="richText"
+              v-model="item.content"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
+              placeholder="输入内容"
+              :inline="true"
+              :height="32"
+            />
           </div>
           <span class="multilingual" @click="openMultilingual(i)">
             <SvgIcon icon-class="multilingual" class-name="multilingual" width="12" height="12" />

+ 8 - 1
src/views/book/courseware/create/components/question/sort/Sort.vue

@@ -10,7 +10,14 @@
               gridArea: `rich-${i}`,
             }"
           >
-            <RichText ref="richText" v-model="item.content" :inline="true" placeholder="输入内容" />
+            <RichText
+              ref="richText"
+              v-model="item.content"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
+              :inline="true"
+              placeholder="输入内容"
+            />
             <span class="multilingual" @click="openMultilingual(i)">
               <SvgIcon icon-class="multilingual" class-name="multilingual" width="12" height="12" />
             </span>

+ 2 - 0
src/views/book/courseware/create/components/question/table/Table.vue

@@ -68,6 +68,8 @@
               v-if="data.mode === 'normal'"
               ref="richText"
               v-model="li.content"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
               :inline="true"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
               @handleRichTextBlur="handleBlurCon"

+ 6 - 2
src/views/book/courseware/create/components/question/video_interaction/ExerciseAdd.vue

@@ -16,11 +16,11 @@
       <div class="type-content-inner">
         <component
           :is="getViewCom"
+          id="1"
+          ref="component"
           type="interaction"
           :content="content"
-          ref="component"
           :border-color="''"
-          id="1"
           :component-move="componentMove"
         />
         <!-- <component :is="getSettingCom" ref="setting" /> -->
@@ -70,6 +70,8 @@ export default {
           return SelectPage;
         case 'judge':
           return Judge;
+        default:
+          return SelectPage;
       }
     },
     getSettingCom() {
@@ -78,6 +80,8 @@ export default {
           return SelectSetting;
         case 'judge':
           return JudgeSetting;
+        default:
+          return SelectSetting;
       }
     },
   },

+ 2 - 0
src/views/book/courseware/create/components/question/voice_matrix/VoiceMatrix.vue

@@ -16,6 +16,8 @@
               <RichText
                 ref="richText"
                 v-model="li.content"
+                :font-size="data?.unified_attrib?.font_size"
+                :font-family="data?.unified_attrib?.font"
                 :inline="true"
                 toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
               />

+ 1 - 1
src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

@@ -7,13 +7,13 @@
         type="primary"
         :class="[full_type ? 'exit-btn' : '']"
         style="margin-bottom: 10px"
-        @click="toggleFullScreen"
         :style="{
           background:
             data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
           borderColor:
             data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
         }"
+        @click="toggleFullScreen"
         >{{ full_type ? '退出全屏' : '进入全屏' }}</el-button
       >
       <iframe :src="games_url" width="100%" :height="full_type ? '100%' : '580px'" style="border: none"></iframe>