|
|
@@ -31,8 +31,11 @@
|
|
|
<el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
|
|
|
</el-select>
|
|
|
</span>
|
|
|
-
|
|
|
- <span v-if="!type" class="link" @click="useTemplate">使用模板</span>
|
|
|
+ <template v-if="!type">
|
|
|
+ <span class="link" @click="copyFormat">复制格式</span>
|
|
|
+ <span :class="['link', { disabled: !format.isCopy }]" @click="pasteFormat">粘贴格式</span>
|
|
|
+ <span class="link" @click="useTemplate">使用模板</span>
|
|
|
+ </template>
|
|
|
<span class="link" @click="showSetBackground">背景图</span>
|
|
|
<span class="link" @click="saveCoursewareContent('quit')">退出编辑</span>
|
|
|
<span class="link" @click="saveCoursewareContent">保存</span>
|
|
|
@@ -53,6 +56,7 @@ import CreatePage from '@/views/book/courseware/create/index.vue';
|
|
|
import MenuPage from '@/views/personal_workbench/common/menu.vue';
|
|
|
import UseTemplate from './UseTemplate.vue';
|
|
|
|
|
|
+import tinymce from 'tinymce';
|
|
|
import * as OpenCC from 'opencc-js';
|
|
|
import { GetBookCoursewareInfo, GetMyBookCoursewareTaskList } from '@/api/project';
|
|
|
import { GetLanguageTypeList } from '@/api/book';
|
|
|
@@ -87,6 +91,15 @@ export default {
|
|
|
chinese: 'zh-Hans',
|
|
|
visibleTemplate: false,
|
|
|
temporaryCoursewareID: '',
|
|
|
+ format: {
|
|
|
+ isCopy: false, // 是否已复制格式
|
|
|
+ font_size: 12, // 字体大小
|
|
|
+ font_family: 'Arial', // 字体
|
|
|
+ weight: 400, // 字体粗细
|
|
|
+ color: '#000000', // 文字颜色
|
|
|
+ text_decoration: 'none', // 装饰线样式
|
|
|
+ font_style: 'normal', // 字体样式
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -105,6 +118,65 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 复制格式
|
|
|
+ copyFormat() {
|
|
|
+ const selection = tinymce.activeEditor.selection.getNode();
|
|
|
+ let content = tinymce.activeEditor.selection.getContent({ format: 'text' });
|
|
|
+ if (!content || content.trim() === '') {
|
|
|
+ this.$message.warning('请先选中需要复制格式的文本');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 向下找找到第一个字的父节点,获取样式
|
|
|
+ let node = selection;
|
|
|
+
|
|
|
+ // 如果选中了文本节点,使用它的父元素;如果选中了元素,查找第一个非空文本子节点并使用它的父元素,
|
|
|
+ // 以保证获取到应用样式的元素而不是直接的文本节点,避免丢失样式
|
|
|
+ if (node && node.nodeType === 3) {
|
|
|
+ node = node.parentElement || node.parentNode;
|
|
|
+ } else if (node && node.nodeType === 1) {
|
|
|
+ const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
|
|
|
+ acceptNode(n) {
|
|
|
+ return n.nodeValue && n.nodeValue.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const textNode = walker.nextNode();
|
|
|
+ if (textNode && textNode.parentElement) {
|
|
|
+ node = textNode.parentElement;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const style = window.getComputedStyle(node);
|
|
|
+
|
|
|
+ // 将字体大小转为 pt
|
|
|
+ const pxSize = style.fontSize ? parseFloat(style.fontSize) : 12;
|
|
|
+ // px -> pt (1pt = 1.3333px => pt = px * 0.75)
|
|
|
+ this.format.font_size = Math.round(pxSize * 0.75);
|
|
|
+ this.format.font_family = style.fontFamily || 'Arial';
|
|
|
+ this.format.weight = style.fontWeight ? parseInt(style.fontWeight) : 400;
|
|
|
+ this.format.color = style.color || '#000000';
|
|
|
+ this.format.text_decoration = style.textDecoration || 'none';
|
|
|
+ this.format.font_style = style.fontStyle || 'normal';
|
|
|
+ this.format.isCopy = true;
|
|
|
+ },
|
|
|
+ // 粘贴格式
|
|
|
+ pasteFormat() {
|
|
|
+ if (!this.format.isCopy) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const activeEditor = tinymce.activeEditor;
|
|
|
+ // 格式刷到tinymce 选中的文字上
|
|
|
+ activeEditor.formatter.register('customFormat', {
|
|
|
+ inline: 'span',
|
|
|
+ styles: {
|
|
|
+ 'font-size': `${this.format.font_size}pt`,
|
|
|
+ 'font-family': this.format.font_family,
|
|
|
+ 'font-weight': this.format.weight,
|
|
|
+ color: this.format.color,
|
|
|
+ 'text-decoration': this.format.text_decoration,
|
|
|
+ 'font-style': this.format.font_style,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ activeEditor.formatter.apply('customFormat');
|
|
|
+ },
|
|
|
/**
|
|
|
* 得到教材课件信息
|
|
|
*/
|