|
|
@@ -3,6 +3,65 @@
|
|
|
<template #content>
|
|
|
<!-- eslint-disable max-len -->
|
|
|
<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" />
|
|
|
<div class="btn-box">
|
|
|
<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 { getArticleData } from '@/views/book/courseware/data/article';
|
|
|
+import { fontFamilyList } from '@/views/book/courseware/data/table';
|
|
|
import { TextToAudioFile } from '@/api/app';
|
|
|
import { isEnable } from '@/views/book/courseware/data/common';
|
|
|
import {
|
|
|
@@ -261,6 +321,7 @@ export default {
|
|
|
mixins: [ModuleMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
+ fontFamilyList,
|
|
|
isEnable,
|
|
|
data: getArticleData(),
|
|
|
showArticleFlag: false, // 校对文章
|
|
|
@@ -299,13 +360,79 @@ export default {
|
|
|
['m̄', 'ḿ', 'm', 'm̀', 'm'],
|
|
|
],
|
|
|
pinyinList: [], // 拼音校正列表
|
|
|
+ articleAttrib: null,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
'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() {},
|
|
|
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() {
|
|
|
this.loading = true;
|
|
|
@@ -323,7 +450,13 @@ export default {
|
|
|
timeList: [],
|
|
|
isTitle: false,
|
|
|
sentencesEn: [],
|
|
|
- paraAlign: 'left',
|
|
|
+ paraAlign: this.articleAttrib
|
|
|
+ ? this.articleAttrib.align === 'RIGHT'
|
|
|
+ ? 'right'
|
|
|
+ : this.articleAttrib.align === 'MIDDLE'
|
|
|
+ ? 'center'
|
|
|
+ : 'left'
|
|
|
+ : 'left',
|
|
|
remark: {
|
|
|
chs: '',
|
|
|
en: '',
|
|
|
@@ -456,11 +589,17 @@ export default {
|
|
|
pinyin: sItem.pinyin,
|
|
|
pinyin_up: sItem.pinyin_up,
|
|
|
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: '',
|
|
|
matchNotes: '',
|
|
|
notesColor: '',
|
|
|
@@ -543,11 +682,17 @@ export default {
|
|
|
pinyin: sItem.pinyin,
|
|
|
pinyin_up: sItem.pinyin_up,
|
|
|
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: '',
|
|
|
matchNotes: '',
|
|
|
notesColor: '',
|
|
|
@@ -576,7 +721,13 @@ export default {
|
|
|
isTitle: false,
|
|
|
sentencesEn: [],
|
|
|
sentenceStr,
|
|
|
- paraAlign: 'left',
|
|
|
+ paraAlign: this.articleAttrib
|
|
|
+ ? this.articleAttrib.align === 'RIGHT'
|
|
|
+ ? 'right'
|
|
|
+ : this.articleAttrib.align === 'MIDDLE'
|
|
|
+ ? 'center'
|
|
|
+ : 'left'
|
|
|
+ : 'left',
|
|
|
remark: {
|
|
|
chs: '',
|
|
|
en: '',
|
|
|
@@ -1034,6 +1185,60 @@ export default {
|
|
|
}
|
|
|
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>
|
|
|
@@ -1140,6 +1345,38 @@ export default {
|
|
|
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 lang="scss">
|
|
|
.article-checkpinyin-dialog {
|