Browse Source

课文和对话课文统一设置样式

natasha 1 week ago
parent
commit
533b98da84

+ 249 - 12
src/views/book/courseware/create/components/question/article/Article.vue

@@ -3,6 +3,65 @@
     <template #content>
     <template #content>
       <!-- eslint-disable max-len -->
       <!-- eslint-disable max-len -->
       <div v-loading="loading" class="article-wrapper">
       <div v-loading="loading" class="article-wrapper">
+        <div class="table-rich-toolbar" v-if="articleAttrib">
+          <el-select
+            v-model="articleAttrib.font"
+            placeholder="请选择"
+            style="width: 130px"
+            @change="handleChangeStyles"
+          >
+            <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
+          </el-select>
+          <el-select v-model="articleAttrib.font_size" placeholder="请选择" style="width: 130px">
+            <el-option
+              v-for="(value, index) in 16"
+              :key="index"
+              :label="6 + value * 2 + 'pt'"
+              :value="6 + value * 2 + 'pt'"
+            />
+          </el-select>
+          <el-form :model="articleAttrib" inline>
+            <el-form-item label="文字颜色">
+              <el-color-picker v-model="articleAttrib.text_color" @change="handleChangeStyles" />
+            </el-form-item>
+          </el-form>
+          <span :class="[data.other_attrib.isUnderline ? 'active' : '']" @click="setActiveTextStyle('underline')">
+            <SvgIcon icon-class="underline" size="20" />
+          </span>
+          <span :class="[data.other_attrib.isBold ? 'active' : '']" @click="setActiveTextStyle('bold')">
+            <SvgIcon icon-class="font-bold" size="20" />
+          </span>
+          <!-- <span
+            :class="[data.other_attrib.isItalic ? 'active' : '']"
+            @click="data.other_attrib.isItalic = !data.other_attrib.isItalic"
+          >
+            <SvgIcon icon-class="font-italic" size="20" />
+          </span> -->
+          <span
+            :class="[data.other_attrib.isStrikethrough ? 'active' : '']"
+            @click="setActiveTextStyle('line-through')"
+          >
+            <SvgIcon icon-class="strikethrough" size="20" />
+          </span>
+          <span :class="[data.other_attrib.border === 'dotted' ? 'active' : '']">
+            <SvgIcon icon-class="borderDotted" title="下划虚线" size="16" @click="setActiveTextStyle('border')" />
+          </span>
+          <span :class="[articleAttrib.align === 'LEFT' ? 'active' : '']" @click="setActiveTextStyle('align', 'LEFT')">
+            <SvgIcon icon-class="align-left" size="20" />
+          </span>
+          <span
+            :class="[articleAttrib.align === 'MIDDLE' ? 'active' : '']"
+            @click="setActiveTextStyle('align', 'MIDDLE')"
+          >
+            <SvgIcon icon-class="align-center" size="20" />
+          </span>
+          <span
+            :class="[articleAttrib.align === 'RIGHT' ? 'active' : '']"
+            @click="setActiveTextStyle('align', 'RIGHT')"
+          >
+            <SvgIcon icon-class="align-right" size="20" />
+          </span>
+        </div>
         <el-input v-model="data.content" placeholder="输入" type="textarea" />
         <el-input v-model="data.content" placeholder="输入" type="textarea" />
         <div class="btn-box">
         <div class="btn-box">
           <SelectUpload label="课文音频" type="audio" @uploadSuccess="uploadAudioSuccess" />
           <SelectUpload label="课文音频" type="audio" @uploadSuccess="uploadAudioSuccess" />
@@ -232,6 +291,7 @@ import CheckSubtitles from '@/views/book/courseware/create/components/question/v
 import ResourcesOperate from '../../common/ResourcesOperate.vue';
 import ResourcesOperate from '../../common/ResourcesOperate.vue';
 
 
 import { getArticleData } from '@/views/book/courseware/data/article';
 import { getArticleData } from '@/views/book/courseware/data/article';
+import { fontFamilyList } from '@/views/book/courseware/data/table';
 import { TextToAudioFile } from '@/api/app';
 import { TextToAudioFile } from '@/api/app';
 import { isEnable } from '@/views/book/courseware/data/common';
 import { isEnable } from '@/views/book/courseware/data/common';
 import {
 import {
@@ -261,6 +321,7 @@ export default {
   mixins: [ModuleMixin],
   mixins: [ModuleMixin],
   data() {
   data() {
     return {
     return {
+      fontFamilyList,
       isEnable,
       isEnable,
       data: getArticleData(),
       data: getArticleData(),
       showArticleFlag: false, // 校对文章
       showArticleFlag: false, // 校对文章
@@ -299,13 +360,79 @@ export default {
         ['m̄', 'ḿ', 'm', 'm̀', 'm'],
         ['m̄', 'ḿ', 'm', 'm̀', 'm'],
       ],
       ],
       pinyinList: [], // 拼音校正列表
       pinyinList: [], // 拼音校正列表
+      articleAttrib: null,
     };
     };
   },
   },
   watch: {
   watch: {
     'data.content': 'handleMindMap',
     'data.content': 'handleMindMap',
+    'data.unified_attrib': {
+      handler(val) {
+        if (val) {
+          this.articleAttrib = JSON.parse(JSON.stringify(val));
+          this.handleChangeStyles();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    // 'data.unified_attrib.font': {
+    //   handler(val) {
+    //     if (val) {
+    //       this.handleChangeStyles();
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+    // 'data.unified_attrib.text_color': {
+    //   handler(val) {
+    //     if (val) {
+    //       this.handleChangeStyles();
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+    // 'data.unified_attrib.align': {
+    //   handler(val) {
+    //     if (val) {
+    //       this.handleChangeStyles();
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
   },
   },
   created() {},
   created() {},
   methods: {
   methods: {
+    // 全局样式变化
+    handleChangeStyles() {
+      if (this.articleAttrib.font !== this.data.other_attrib.oldFont) {
+        this.data.other_attrib.oldFont = this.articleAttrib.font;
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.fontFamily = this.articleAttrib.font;
+            });
+          });
+        });
+      } else if (this.articleAttrib.text_color !== this.data.other_attrib.oldColor) {
+        this.data.other_attrib.oldColor = this.articleAttrib.text_color;
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.color = this.articleAttrib.text_color;
+            });
+          });
+        });
+      } else if (this.articleAttrib.align !== this.data.other_attrib.oldAlign) {
+        this.data.other_attrib.oldAlign = this.articleAttrib.align;
+        this.data.detail.forEach((item) => {
+          item.paraAlign =
+            this.articleAttrib.align === 'RIGHT' ? 'right' : this.articleAttrib.align === 'MIDDLE' ? 'center' : 'left';
+        });
+      }
+    },
     // 解析输入内容
     // 解析输入内容
     handleChangeContent() {
     handleChangeContent() {
       this.loading = true;
       this.loading = true;
@@ -323,7 +450,13 @@ export default {
           timeList: [],
           timeList: [],
           isTitle: false,
           isTitle: false,
           sentencesEn: [],
           sentencesEn: [],
-          paraAlign: 'left',
+          paraAlign: this.articleAttrib
+            ? this.articleAttrib.align === 'RIGHT'
+              ? 'right'
+              : this.articleAttrib.align === 'MIDDLE'
+                ? 'center'
+                : 'left'
+            : 'left',
           remark: {
           remark: {
             chs: '',
             chs: '',
             en: '',
             en: '',
@@ -456,11 +589,17 @@ export default {
             pinyin: sItem.pinyin,
             pinyin: sItem.pinyin,
             pinyin_up: sItem.pinyin_up,
             pinyin_up: sItem.pinyin_up,
             pinyin_tone: sItem.pinyin_tone,
             pinyin_tone: sItem.pinyin_tone,
-            fontFamily: '楷体',
-            textDecoration: '',
-            fontWeight: '',
-            border: '',
-            color: '',
+            fontFamily: this.articleAttrib ? this.articleAttrib.font : '楷体',
+            textDecoration: this.data.other_attrib
+              ? this.data.other_attrib.isUnderline
+                ? this.data.other_attrib.isUnderline
+                : this.data.other_attrib.isStrikethrough
+                  ? this.data.other_attrib.isStrikethrough
+                  : ''
+              : '',
+            fontWeight: this.data.other_attrib ? this.data.other_attrib.isBold : '',
+            border: this.data.other_attrib ? this.data.other_attrib.border : '',
+            color: this.articleAttrib ? this.articleAttrib.text_color : '',
             matchWords: '',
             matchWords: '',
             matchNotes: '',
             matchNotes: '',
             notesColor: '',
             notesColor: '',
@@ -543,11 +682,17 @@ export default {
                   pinyin: sItem.pinyin,
                   pinyin: sItem.pinyin,
                   pinyin_up: sItem.pinyin_up,
                   pinyin_up: sItem.pinyin_up,
                   pinyin_tone: sItem.pinyin_tone,
                   pinyin_tone: sItem.pinyin_tone,
-                  fontFamily: '楷体',
-                  textDecoration: '',
-                  fontWeight: '',
-                  border: '',
-                  color: '',
+                  fontFamily: this.articleAttrib ? this.articleAttrib.font : '楷体',
+                  textDecoration: this.data.other_attrib
+                    ? this.data.other_attrib.isUnderline
+                      ? this.data.other_attrib.isUnderline
+                      : this.data.other_attrib.isStrikethrough
+                        ? this.data.other_attrib.isStrikethrough
+                        : ''
+                    : '',
+                  fontWeight: this.data.other_attrib ? this.data.other_attrib.isBold : '',
+                  border: this.data.other_attrib ? this.data.other_attrib.border : '',
+                  color: this.articleAttrib ? this.articleAttrib.text_color : '',
                   matchWords: '',
                   matchWords: '',
                   matchNotes: '',
                   matchNotes: '',
                   notesColor: '',
                   notesColor: '',
@@ -576,7 +721,13 @@ export default {
                 isTitle: false,
                 isTitle: false,
                 sentencesEn: [],
                 sentencesEn: [],
                 sentenceStr,
                 sentenceStr,
-                paraAlign: 'left',
+                paraAlign: this.articleAttrib
+                  ? this.articleAttrib.align === 'RIGHT'
+                    ? 'right'
+                    : this.articleAttrib.align === 'MIDDLE'
+                      ? 'center'
+                      : 'left'
+                  : 'left',
                 remark: {
                 remark: {
                   chs: '',
                   chs: '',
                   en: '',
                   en: '',
@@ -1034,6 +1185,60 @@ export default {
       }
       }
       return con;
       return con;
     },
     },
+    // 设置样式
+    setActiveTextStyle(type, val) {
+      let style = this.data.other_attrib;
+      if (type === 'underline') {
+        style.isUnderline = style.isUnderline === 'underline' ? '' : 'underline';
+        if (style.isUnderline === 'underline') {
+          style.isStrikethrough = '';
+        }
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.textDecoration = style.isUnderline;
+            });
+          });
+        });
+      } else if (type === 'bold') {
+        style.isBold = style.isBold === 'bold' ? '' : 'bold';
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.fontWeight = style.isBold;
+            });
+          });
+        });
+      } else if (type === 'line-through') {
+        style.isStrikethrough = style.isStrikethrough === 'line-through' ? '' : 'line-through';
+        if (style.isStrikethrough === 'line-through') {
+          style.isUnderline = '';
+        }
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.textDecoration = style.isStrikethrough;
+            });
+          });
+        });
+      } else if (type === 'border') {
+        style.border = style.border === 'dotted' ? '' : 'dotted';
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.border = style.border;
+            });
+          });
+        });
+      } else if (type === 'align') {
+        style.align = val;
+        this.articleAttrib.align = val;
+        this.data.detail.forEach((item) => {
+          item.paraAlign =
+            this.articleAttrib.align === 'RIGHT' ? 'right' : this.articleAttrib.align === 'MIDDLE' ? 'center' : 'left';
+        });
+      }
+    },
   },
   },
 };
 };
 </script>
 </script>
@@ -1140,6 +1345,38 @@ export default {
     display: block;
     display: block;
   }
   }
 }
 }
+
+.table-rich-toolbar {
+  display: flex;
+  gap: 5px;
+  padding: 5px 0;
+
+  /* align-items: center; */
+
+  :deep .el-form-item--small.el-form-item {
+    margin: 0 5px 0 0;
+  }
+
+  :deep .el-form-item__label {
+    padding-right: 3px;
+  }
+
+  > span {
+    height: 30px;
+    padding: 5px 6px;
+    color: #222f3e;
+    cursor: pointer;
+    border-radius: 5px;
+
+    &:hover {
+      background: #cce2fa;
+    }
+
+    &.active {
+      background: #a6ccf7;
+    }
+  }
+}
 </style>
 </style>
 <style lang="scss">
 <style lang="scss">
 .article-checkpinyin-dialog {
 .article-checkpinyin-dialog {

+ 5 - 5
src/views/book/courseware/create/components/question/article/CheckStyle.vue

@@ -150,23 +150,23 @@ export default {
       toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
       toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
       fontFamilyList: [
       fontFamilyList: [
         {
         {
-          value: '楷体, 微软雅黑',
+          value: '楷体,微软雅黑',
           name: '楷体',
           name: '楷体',
         },
         },
         {
         {
-          value: '黑体, 微软雅黑',
+          value: '黑体,微软雅黑',
           name: '黑体',
           name: '黑体',
         },
         },
         {
         {
-          value: '宋体, 微软雅黑',
+          value: '宋体,微软雅黑',
           name: '宋体',
           name: '宋体',
         },
         },
         {
         {
-          value: 'arial, helvetica, sans-serif',
+          value: 'Arial,Helvetica,sans-serif',
           name: 'Arial',
           name: 'Arial',
         },
         },
         {
         {
-          value: 'times new roman, times, serif',
+          value: 'Times New Roman,times,serif',
           name: 'Times New Roman',
           name: 'Times New Roman',
         },
         },
         {
         {

+ 218 - 10
src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -3,6 +3,50 @@
     <template #content>
     <template #content>
       <!-- eslint-disable max-len -->
       <!-- eslint-disable max-len -->
       <div v-loading="loading" class="article-wrapper">
       <div v-loading="loading" class="article-wrapper">
+        <div class="table-rich-toolbar" v-if="articleAttrib">
+          <el-select
+            v-model="articleAttrib.font"
+            placeholder="请选择"
+            style="width: 130px"
+            @change="handleChangeStyles"
+          >
+            <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
+          </el-select>
+          <el-select v-model="articleAttrib.font_size" placeholder="请选择" style="width: 130px">
+            <el-option
+              v-for="(value, index) in 16"
+              :key="index"
+              :label="6 + value * 2 + 'pt'"
+              :value="6 + value * 2 + 'pt'"
+            />
+          </el-select>
+          <el-form :model="articleAttrib" inline>
+            <el-form-item label="文字颜色">
+              <el-color-picker v-model="articleAttrib.text_color" @change="handleChangeStyles" />
+            </el-form-item>
+          </el-form>
+          <span :class="[data.other_attrib.isUnderline ? 'active' : '']" @click="setActiveTextStyle('underline')">
+            <SvgIcon icon-class="underline" size="20" />
+          </span>
+          <span :class="[data.other_attrib.isBold ? 'active' : '']" @click="setActiveTextStyle('bold')">
+            <SvgIcon icon-class="font-bold" size="20" />
+          </span>
+          <!-- <span
+            :class="[data.other_attrib.isItalic ? 'active' : '']"
+            @click="data.other_attrib.isItalic = !data.other_attrib.isItalic"
+          >
+            <SvgIcon icon-class="font-italic" size="20" />
+          </span> -->
+          <span
+            :class="[data.other_attrib.isStrikethrough ? 'active' : '']"
+            @click="setActiveTextStyle('line-through')"
+          >
+            <SvgIcon icon-class="strikethrough" size="20" />
+          </span>
+          <span :class="[data.other_attrib.border === 'dotted' ? 'active' : '']">
+            <SvgIcon icon-class="borderDotted" title="下划虚线" size="16" @click="setActiveTextStyle('border')" />
+          </span>
+        </div>
         <div class="content">
         <div class="content">
           <div v-for="(item, index) in data.detail" :key="index" class="content-list">
           <div v-for="(item, index) in data.detail" :key="index" class="content-list">
             <div v-if="item.type === 'notice'" class="content-item">
             <div v-if="item.type === 'notice'" class="content-item">
@@ -450,6 +494,7 @@ import { fileUpload, TextToAudioFile } from '@/api/app';
 import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
 import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
 import { getRandomNumber } from '@/utils';
 import { getRandomNumber } from '@/utils';
 import { BatchSegContent, getWordTime, prepareTranscribe, fileToBase64Text, getWordTimes } from '@/api/article';
 import { BatchSegContent, getWordTime, prepareTranscribe, fileToBase64Text, getWordTimes } from '@/api/article';
+import { fontFamilyList } from '@/views/book/courseware/data/table';
 
 
 export default {
 export default {
   name: 'DialogueArticlePage',
   name: 'DialogueArticlePage',
@@ -507,6 +552,8 @@ export default {
         ['m̄', 'ḿ', 'm', 'm̀', 'm'],
         ['m̄', 'ḿ', 'm', 'm̀', 'm'],
       ],
       ],
       pinyinList: [], // 拼音校正列表
       pinyinList: [], // 拼音校正列表
+      fontFamilyList,
+      articleAttrib: null,
     };
     };
   },
   },
   watch: {
   watch: {
@@ -519,9 +566,74 @@ export default {
       },
       },
       immediate: true,
       immediate: true,
     },
     },
+    'data.unified_attrib': {
+      handler(val) {
+        if (val) {
+          this.articleAttrib = JSON.parse(JSON.stringify(val));
+          this.handleChangeStyles();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    // 'data.unified_attrib.font': {
+    //   handler(val) {
+    //     if (val) {
+    //       this.handleChangeStyles();
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+    // 'data.unified_attrib.text_color': {
+    //   handler(val) {
+    //     if (val) {
+    //       this.handleChangeStyles();
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+    // 'data.unified_attrib.align': {
+    //   handler(val) {
+    //     if (val) {
+    //       this.handleChangeStyles();
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
   },
   },
   created() {},
   created() {},
   methods: {
   methods: {
+    // 全局样式变化
+    handleChangeStyles() {
+      if (this.articleAttrib.font !== this.data.other_attrib.oldFont) {
+        this.data.other_attrib.oldFont = this.articleAttrib.font;
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.fontFamily = this.articleAttrib.font;
+            });
+          });
+        });
+      } else if (this.articleAttrib.text_color !== this.data.other_attrib.oldColor) {
+        this.data.other_attrib.oldColor = this.articleAttrib.text_color;
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.color = this.articleAttrib.text_color;
+            });
+          });
+        });
+      } else if (this.articleAttrib.align !== this.data.other_attrib.oldAlign) {
+        this.data.other_attrib.oldAlign = this.articleAttrib.align;
+        this.data.detail.forEach((item) => {
+          item.paraAlign =
+            this.articleAttrib.align === 'RIGHT' ? 'right' : this.articleAttrib.align === 'MIDDLE' ? 'center' : 'left';
+        });
+      }
+    },
     // 切换角色
     // 切换角色
     changeRole(item, ritem) {
     changeRole(item, ritem) {
       item.roleIndex = ritem.id;
       item.roleIndex = ritem.id;
@@ -895,11 +1007,17 @@ export default {
             pinyin: sItem.pinyin,
             pinyin: sItem.pinyin,
             pinyin_up: sItem.pinyin_up,
             pinyin_up: sItem.pinyin_up,
             pinyin_tone: sItem.pinyin_tone,
             pinyin_tone: sItem.pinyin_tone,
-            fontFamily: type === 'text' ? '楷体' : '',
-            textDecoration: '',
-            fontWeight: '',
-            border: '',
-            color: '',
+            fontFamily: type === 'text' ? (this.articleAttrib ? this.articleAttrib.font : '楷体') : '',
+            textDecoration: this.data.other_attrib
+              ? this.data.other_attrib.isUnderline
+                ? this.data.other_attrib.isUnderline
+                : this.data.other_attrib.isStrikethrough
+                  ? this.data.other_attrib.isStrikethrough
+                  : ''
+              : '',
+            fontWeight: this.data.other_attrib ? this.data.other_attrib.isBold : '',
+            border: this.data.other_attrib ? this.data.other_attrib.border : '',
+            color: this.articleAttrib ? this.articleAttrib.text_color : '',
             matchWords: '',
             matchWords: '',
             matchNotes: '',
             matchNotes: '',
             notesColor: '',
             notesColor: '',
@@ -985,11 +1103,22 @@ export default {
                   pinyin: sItem.pinyin,
                   pinyin: sItem.pinyin,
                   pinyin_up: sItem.pinyin_up,
                   pinyin_up: sItem.pinyin_up,
                   pinyin_tone: sItem.pinyin_tone,
                   pinyin_tone: sItem.pinyin_tone,
-                  fontFamily: this.data.detail[index] && this.data.detail[index].type === 'notice' ? '' : '楷体',
-                  textDecoration: '',
-                  fontWeight: '',
-                  border: '',
-                  color: '',
+                  fontFamily:
+                    this.data.detail[index] && this.data.detail[index].type === 'notice'
+                      ? ''
+                      : this.articleAttrib
+                        ? this.articleAttrib.font
+                        : '楷体',
+                  textDecoration: this.data.other_attrib
+                    ? this.data.other_attrib.isUnderline
+                      ? this.data.other_attrib.isUnderline
+                      : this.data.other_attrib.isStrikethrough
+                        ? this.data.other_attrib.isStrikethrough
+                        : ''
+                    : '',
+                  fontWeight: this.data.other_attrib ? this.data.other_attrib.isBold : '',
+                  border: this.data.other_attrib ? this.data.other_attrib.border : '',
+                  color: this.articleAttrib ? this.articleAttrib.text_color : '',
                   matchWords: '',
                   matchWords: '',
                   matchNotes: '',
                   matchNotes: '',
                   notesColor: '',
                   notesColor: '',
@@ -1502,6 +1631,53 @@ export default {
       }
       }
       return con;
       return con;
     },
     },
+    // 设置样式
+    setActiveTextStyle(type) {
+      let style = this.data.other_attrib;
+      if (type === 'underline') {
+        style.isUnderline = style.isUnderline === 'underline' ? '' : 'underline';
+        if (style.isUnderline === 'underline') {
+          style.isStrikethrough = '';
+        }
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.textDecoration = style.isUnderline;
+            });
+          });
+        });
+      } else if (type === 'bold') {
+        style.isBold = style.isBold === 'bold' ? '' : 'bold';
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.fontWeight = style.isBold;
+            });
+          });
+        });
+      } else if (type === 'line-through') {
+        style.isStrikethrough = style.isStrikethrough === 'line-through' ? '' : 'line-through';
+        if (style.isStrikethrough === 'line-through') {
+          style.isUnderline = '';
+        }
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.textDecoration = style.isStrikethrough;
+            });
+          });
+        });
+      } else if (type === 'border') {
+        style.border = style.border === 'dotted' ? '' : 'dotted';
+        this.data.detail.forEach((item) => {
+          item.wordsList.forEach((items) => {
+            items.forEach((itemss) => {
+              itemss.border = style.border;
+            });
+          });
+        });
+      }
+    },
   },
   },
 };
 };
 </script>
 </script>
@@ -1729,6 +1905,38 @@ export default {
     }
     }
   }
   }
 }
 }
+
+.table-rich-toolbar {
+  display: flex;
+  gap: 5px;
+  padding: 5px 0;
+
+  /* align-items: center; */
+
+  :deep .el-form-item--small.el-form-item {
+    margin: 0 5px 0 0;
+  }
+
+  :deep .el-form-item__label {
+    padding-right: 3px;
+  }
+
+  > span {
+    height: 30px;
+    padding: 5px 6px;
+    color: #222f3e;
+    cursor: pointer;
+    border-radius: 5px;
+
+    &:hover {
+      background: #cce2fa;
+    }
+
+    &.active {
+      background: #a6ccf7;
+    }
+  }
+}
 </style>
 </style>
 <style lang="scss">
 <style lang="scss">
 .role-popper {
 .role-popper {

+ 5 - 5
src/views/book/courseware/create/components/question/dialogue_article/ArticleSetting.vue

@@ -214,23 +214,23 @@ export default {
           name: '请选择',
           name: '请选择',
         },
         },
         {
         {
-          value: '楷体, 微软雅黑',
+          value: '楷体,微软雅黑',
           name: '楷体',
           name: '楷体',
         },
         },
         {
         {
-          value: '黑体, 微软雅黑',
+          value: '黑体,微软雅黑',
           name: '黑体',
           name: '黑体',
         },
         },
         {
         {
-          value: '宋体, 微软雅黑',
+          value: '宋体,微软雅黑',
           name: '宋体',
           name: '宋体',
         },
         },
         {
         {
-          value: 'arial,helvetica,sans-serif',
+          value: 'Arial,Helvetica,sans-serif',
           name: 'Arial',
           name: 'Arial',
         },
         },
         {
         {
-          value: 'times new roman,times,serif',
+          value: 'Times New Roman,times,serif',
           name: 'Times New Roman',
           name: 'Times New Roman',
         },
         },
         {
         {

+ 5 - 5
src/views/book/courseware/create/components/question/image_text/CheckStyle.vue

@@ -118,23 +118,23 @@ export default {
       toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
       toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
       fontFamilyList: [
       fontFamilyList: [
         {
         {
-          value: '楷体, 微软雅黑',
+          value: '楷体,微软雅黑',
           name: '楷体',
           name: '楷体',
         },
         },
         {
         {
-          value: '黑体, 微软雅黑',
+          value: '黑体,微软雅黑',
           name: '黑体',
           name: '黑体',
         },
         },
         {
         {
-          value: '宋体, 微软雅黑',
+          value: '宋体,微软雅黑',
           name: '宋体',
           name: '宋体',
         },
         },
         {
         {
-          value: 'arial,helvetica,sans-serif',
+          value: 'Arial,Helvetica,sans-serif',
           name: 'Arial',
           name: 'Arial',
         },
         },
         {
         {
-          value: 'times new roman,times,serif',
+          value: 'Times New Roman,times,serif',
           name: 'Times New Roman',
           name: 'Times New Roman',
         },
         },
         {
         {

+ 13 - 0
src/views/book/courseware/data/article.js

@@ -223,5 +223,18 @@ export function getArticleData() {
       node_list: [{ name: '课文组件' }], // 思维导图数据
       node_list: [{ name: '课文组件' }], // 思维导图数据
     },
     },
     multilingual: [], // 多语言
     multilingual: [], // 多语言
+    other_attrib: {
+      isUnderline: '',
+      isBold: '',
+      isItalic: '',
+      isStrikethrough: '',
+      border: '',
+      oldFont: '',
+      oldColor: '',
+      oldUnderline: '',
+      oldBold: '',
+      oldBorder: '',
+      oldAlign: '',
+    }, // 文章其他一些整体样式设置
   };
   };
 }
 }

+ 13 - 0
src/views/book/courseware/data/dialogueArticle.js

@@ -263,5 +263,18 @@ export function getArticleData() {
     sentence_list_mp: [], // 句子+分词数组
     sentence_list_mp: [], // 句子+分词数组
     pinyin_type: 'pinyin', // 拼音类型
     pinyin_type: 'pinyin', // 拼音类型
     multilingual: [], // 多语言
     multilingual: [], // 多语言
+    other_attrib: {
+      isUnderline: '',
+      isBold: '',
+      isItalic: '',
+      isStrikethrough: '',
+      border: '',
+      oldFont: '',
+      oldColor: '',
+      oldUnderline: '',
+      oldBold: '',
+      oldBorder: '',
+      oldAlign: '',
+    }, // 文章其他一些整体样式设置
   };
   };
 }
 }

+ 6 - 6
src/views/book/courseware/data/table.js

@@ -15,12 +15,12 @@ export const tableTypeList = [
 ];
 ];
 
 
 export const fontFamilyList = [
 export const fontFamilyList = [
-  { value: '楷体,微软雅黑', label: '楷体' },
-  { value: '黑体,微软雅黑', label: '黑体' },
-  { value: '宋体,微软雅黑', label: '宋体' },
-  { value: 'arial,helvetica,sans-serif', label: 'Arial' },
-  { value: 'times new roman,times,serif', label: 'Times New Roman' },
-  { value: 'League', label: '拼音' },
+  { label: '楷体', value: '楷体,微软雅黑' },
+  { label: '黑体', value: '黑体,微软雅黑' },
+  { label: '宋体', value: '宋体,微软雅黑' },
+  { label: 'Arial', value: 'Arial,Helvetica,sans-serif' },
+  { label: 'Times New Roman', value: 'Times New Roman,times,serif' },
+  { label: '拼音', value: 'League' },
 ];
 ];
 
 
 // 填空方式
 // 填空方式