|
| 1 | +<script setup lang="ts"> |
| 2 | +import type FluentEditor from '@opentiny/fluent-editor' |
| 3 | +import { onMounted, ref } from 'vue' |
| 4 | +import 'quill-table-up/index.css' |
| 5 | +import 'quill-table-up/table-creator.css' |
| 6 | +
|
| 7 | +let editorContextmenu: FluentEditor |
| 8 | +let editorSelect: FluentEditor |
| 9 | +const editorContextmenuRef = ref<HTMLElement>() |
| 10 | +
|
| 11 | +onMounted(async () => { |
| 12 | + // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook |
| 13 | + const [ |
| 14 | + { default: FluentEditor, DEFAULT_TOOLBAR, generateTableUp }, |
| 15 | + { defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp }, |
| 16 | + ] = await Promise.all([ |
| 17 | + import('@opentiny/fluent-editor'), |
| 18 | + import('quill-table-up'), |
| 19 | + ]) |
| 20 | +
|
| 21 | + FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true) |
| 22 | + if (editorContextmenuRef.value) { |
| 23 | + editorContextmenu = new FluentEditor(editorContextmenuRef.value, { |
| 24 | + theme: 'snow', |
| 25 | + modules: { |
| 26 | + 'toolbar': [ |
| 27 | + ...DEFAULT_TOOLBAR, |
| 28 | + [{ 'table-up': [] }], |
| 29 | + ], |
| 30 | + 'table-up': { |
| 31 | + customSelect: defaultCustomSelect, |
| 32 | + pasteStyleSheet: true, |
| 33 | + pasteDefaultTagStyle: false, |
| 34 | + modules: [ |
| 35 | + { module: TableSelection }, |
| 36 | + { module: TableMenuContextmenu }, |
| 37 | + ], |
| 38 | + }, |
| 39 | + }, |
| 40 | + }) |
| 41 | + } |
| 42 | +}) |
| 43 | +</script> |
| 44 | + |
| 45 | +<template> |
| 46 | + <div> |
| 47 | + <p> |
| 48 | + 主要针对从 Excel 粘贴内容时，quill-table-up从3.5.0版本新增的选项 pasteStyleSheet，配置为 true 会将粘贴的 html 中 style 标签的样式也进行解析。 |
| 49 | + 如果你希望保留粘贴 html 中通过标签选择器设置的样式，可以将 pasteDefaultTagStyle 也设置为 true。 |
| 50 | + </p> |
| 51 | + <p> 请注意：如果开启了配置 pasteStyleSheet，可能会对粘贴时的解析性能造成一定影响，因为会对整个粘贴的文档进行额外的解析。</p> |
| 52 | + <div ref="editorContextmenuRef" /> |
| 53 | + </div> |
| 54 | +</template> |
0 commit comments