diff --git a/src/components/Yys.vue b/src/components/Yys.vue index 8cbdb4b..66a0bbc 100644 --- a/src/components/Yys.vue +++ b/src/components/Yys.vue @@ -37,13 +37,11 @@ - +
+
-
+
+
{{ t('Copy') }} {{ t('Paste') }}
- +
+
@@ -116,7 +118,8 @@ import ShikigamiSelect from './ShikigamiSelect.vue'; import ShikigamiProperty from './ShikigamiProperty.vue'; import html2canvas from 'html2canvas'; import {useI18n} from 'vue-i18n' -import {QuillEditor} from '@vueup/vue-quill' +import { Quill, QuillEditor } from '@vueup/vue-quill' +import '@vueup/vue-quill/dist/vue-quill.bubble.css' import '@vueup/vue-quill/dist/vue-quill.snow.css' // 引入样式文件 import * as ElementPlusIconsVue from '@element-plus/icons-vue' import shikigamiData from '../data/Shikigami.json'; @@ -151,30 +154,48 @@ const copy = (str) => { } const paste = (groupIndex, type) => { + console.log("paste", groupIndex, type, clipboard.value) if ('shortDescription' == type) props.groups[groupIndex].shortDescription = clipboard.value else if ('details' == type) props.groups[groupIndex].details = clipboard.value } -// 定义工具栏选项 -const toolbarOptions = [ +// 自定义字体注册 +const registerFonts = () => { + const Font = Quill.import('attributors/style/font') + Font.whitelist = ['SimSun', 'SimHei', 'KaiTi', 'FangSong', 'Microsoft YaHei', 'PingFang SC'] + Quill.register(Font, true) +} + +// 自定义字号注册 +const registerSizes = () => { + const Size = Quill.import('attributors/style/size') + Size.whitelist = ['12px', '14px', '16px', '18px', '21px', '29px', '32px', '34px'] + Quill.register(Size, true) +} + +// 执行注册 +registerFonts() +registerSizes() - [{'color': []}, {'background': []}], +// 工具栏配置 +const toolbarOptions = ref([ ['bold', 'italic', 'underline', 'strike'], // ['blockquote', 'code-block'], - // ['link', 'image', 'video', 'formula'], - [{'header': 1}, {'header': 2}], - [{'list': 'ordered'}, {'list': 'bullet'}, {'list': 'check'}], - // [{ 'script': 'sub'}, { 'script': 'super' }], - [{'indent': '-1'}, {'indent': '+1'}], - // [{ 'size': ['small', false, 'large', 'huge'] }], - // [{ 'header': [1, 2, 3, 4, 5, 6, false] }], - // [{ 'font': [] }], - [{'align': []}], - [{'direction': 'rtl'}], - // ['clean'] -]; + [{ header: 1 }, { header: 2 }], + [{ list: 'ordered' }, { list: 'bullet' }, {'list': 'check'}], + [{ script: 'sub' }, { script: 'super' }], + [{ indent: '-1' }, { indent: '+1' }], + [{ direction: 'rtl' }], + [{ color: [] }, { background: [] }], + // [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ size: ['12px', '14px', '16px', '18px', '21px', '29px', '32px', '34px'] }], + [{ font: ['SimSun', 'SimHei', 'KaiTi', 'FangSong', 'Microsoft YaHei', 'PingFang SC'] }], + [{ align: [] }], + // ['link', 'image', 'video'], + ['clean'] +] as const) // 定义方法 const closeSelectShikigami = () => { @@ -331,8 +352,30 @@ const importGroups = (file) => { reader.readAsText(file); }; +// 定义 QuillEditor 的 ref +const shortDescriptionEditor = ref>() +const detailsEditor = ref>() + +// 保存方法 +const saveQuillDesc = async (): Promise => { + if (!shortDescriptionEditor.value) { + throw new Error('Quill editor instance not found') + } + return shortDescriptionEditor.value.getHTML() +} + +// 保存方法 +const saveQuillDetail = async (): Promise => { + if (!detailsEditor.value) { + throw new Error('Quill detailsEditor instance not found') + } + return detailsEditor.value.getHTML() +} + // 暴露方法给父组件 defineExpose({ + saveQuillDesc, + saveQuillDetail, exportGroups, importGroups }); @@ -388,6 +431,10 @@ defineExpose({ justify-content: space-between; } +.group-item { + width: 100%; +} + .group-body { padding: 20px; width: 80%; @@ -450,3 +497,132 @@ defineExpose({ } + + \ No newline at end of file