Skip to content

Commit 0d597cf

Browse files
kagolautofix-ci[bot]
kagol
and
autofix-ci[bot]
authored
docs: optimize i18n demo (#395)
* docs: optimize i18n demo * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 3c7a496 commit 0d597cf

2 files changed

Lines changed: 156 additions & 58 deletions

File tree

‎packages/docs/fluent-editor/demos/i18n-custom.vue‎

Lines changed: 84 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,105 @@
11
<script setup lang="ts">
2+
import type { EmojiMartData } from '@emoji-mart/data'
23
import type FluentEditor from '@opentiny/fluent-editor'
4+
35
import type { I18N } from '@opentiny/fluent-editor'
6+
// 这里实际导入的是一个 json 文件，包含了 emoji-mart 所需的所有表情数据，类型是 EmojiMartData
7+
import data from '@emoji-mart/data'
8+
// computePosition 函数用于计算 emoji picker显示的位置
9+
import { computePosition } from '@floating-ui/dom'
410
511
import QuillToolbarTip from 'quill-toolbar-tip'
612
import { onMounted, ref } from 'vue'
13+
714
import 'quill-toolbar-tip/dist/index.css'
15+
import 'quill-table-up/index.css'
16+
import 'quill-table-up/table-creator.css'
817
918
let editor: FluentEditor
1019
const editorRef = ref<HTMLElement>()
1120
const lang = ref('zh-CN')
1221
13-
onMounted(() => {
22+
const TOOLBAR_CONFIG = [
23+
['undo', 'redo', 'clean', 'format-painter'],
24+
[
25+
// 请保留默认值为 false
26+
{ header: [1, 2, 3, 4, 5, 6, false] },
27+
{ font: [false, '宋体', '微软雅黑', '楷体', '黑体', '隶书', 'andale mono', 'arial', 'arial black', 'comic sans ms', 'impact', 'times new roman'] },
28+
{ size: [false, '12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] },
29+
{ 'line-height': [false, '1.2', '1.5', '1.75', '2', '3', '4', '5'] },
30+
],
31+
['bold', 'italic', 'strike', 'underline', 'divider'],
32+
[{ color: [] }, { background: [] }],
33+
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
34+
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
35+
[{ script: 'sub' }, { script: 'super' }],
36+
[{ indent: '-1' }, { indent: '+1' }],
37+
[{ direction: 'rtl' }],
38+
['link', 'blockquote', 'code', 'code-block'],
39+
['image', 'file'],
40+
['emoji', 'video', 'formula', 'screenshot', 'fullscreen'],
41+
[{ 'table-up': [] }],
42+
]
43+
44+
onMounted(async () => {
1445
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
15-
import('@opentiny/fluent-editor').then(({ default: FluentEditor, I18N, generateToolbarTip }) => {
16-
if (!editorRef.value) return
17-
FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true)
18-
I18N.register(
19-
{
20-
'zh-CN': {
21-
'replace bold': '替换粗体文本',
22-
'replace italic': '替换斜体文本',
46+
const [
47+
{ default: FluentEditor, I18N, generateToolbarTip, generateTableUp },
48+
{ defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp },
49+
emojiMart,
50+
] = await Promise.all([
51+
import('@opentiny/fluent-editor'),
52+
import('quill-table-up'),
53+
import('emoji-mart'),
54+
])
55+
56+
if (!editorRef.value) return
57+
FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true)
58+
FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true)
59+
I18N.register(
60+
{
61+
'zh-CN': {
62+
'replace bold': '替换粗体文本',
63+
'replace italic': '替换斜体文本',
64+
},
65+
'en-US': {
66+
'replace bold': 'Replace bold text',
67+
'replace italic': 'Replace italic text',
68+
},
69+
},
70+
// set false to add text to the existing language
71+
false,
72+
)
73+
editor = new FluentEditor(editorRef.value, {
74+
theme: 'snow',
75+
modules: {
76+
'toolbar': TOOLBAR_CONFIG,
77+
'counter': true,
78+
'emoji': {
79+
emojiData: data as EmojiMartData,
80+
EmojiPicker: emojiMart.Picker,
81+
emojiPickerPosition: computePosition,
82+
},
83+
'i18n': {
84+
lang: lang.value,
85+
},
86+
'toolbar-tip': {
87+
tipTextMap: {
88+
bold: '_i18n"replace bold"',
89+
italic: '_i18n"replace italic"',
2390
},
24-
'en-US': {
25-
'replace bold': 'Replace bold text',
26-
'replace italic': 'Replace italic text',
91+
defaultTooltipOptions: {
92+
tipHoverable: false,
2793
},
2894
},
29-
// set false to add text to the existing language
30-
false,
31-
)
32-
editor = new FluentEditor(editorRef.value, {
33-
theme: 'snow',
34-
modules: {
35-
'toolbar': [
36-
['bold', 'italic', 'strike', 'underline'],
37-
['link', 'image'],
38-
[{ color: [] }, { background: [] }],
95+
'table-up': {
96+
customSelect: defaultCustomSelect,
97+
modules: [
98+
{ module: TableSelection },
99+
{ module: TableMenuContextmenu },
39100
],
40-
'counter': true,
41-
'i18n': {
42-
lang: lang.value,
43-
},
44-
'toolbar-tip': {
45-
tipTextMap: {
46-
bold: '_i18n"replace bold"',
47-
italic: '_i18n"replace italic"',
48-
},
49-
defaultTooltipOptions: {
50-
tipHoverable: false,
51-
},
52-
},
53101
},
54-
})
102+
},
55103
})
56104
})
57105
function switchLanguage() {

‎packages/docs/fluent-editor/demos/i18n.vue‎

Lines changed: 72 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,87 @@
11
<script setup lang="ts">
2+
import type { EmojiMartData } from '@emoji-mart/data'
23
import type FluentEditor from '@opentiny/fluent-editor'
34
import type { I18N } from '@opentiny/fluent-editor'
5+
6+
// 这里实际导入的是一个 json 文件，包含了 emoji-mart 所需的所有表情数据，类型是 EmojiMartData
7+
import data from '@emoji-mart/data'
8+
// computePosition 函数用于计算 emoji picker显示的位置
9+
import { computePosition } from '@floating-ui/dom'
10+
11+
import QuillToolbarTip from 'quill-toolbar-tip'
412
import { onMounted, ref } from 'vue'
513
14+
import 'quill-toolbar-tip/dist/index.css'
15+
import 'quill-table-up/index.css'
16+
import 'quill-table-up/table-creator.css'
17+
618
let editor: FluentEditor
719
const editorRef = ref<HTMLElement>()
820
const lang = ref('en-US')
921
10-
onMounted(() => {
22+
const TOOLBAR_CONFIG = [
23+
['undo', 'redo', 'clean', 'format-painter'],
24+
[
25+
// 请保留默认值为 false
26+
{ header: [1, 2, 3, 4, 5, 6, false] },
27+
{ font: [false, '宋体', '微软雅黑', '楷体', '黑体', '隶书', 'andale mono', 'arial', 'arial black', 'comic sans ms', 'impact', 'times new roman'] },
28+
{ size: [false, '12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] },
29+
{ 'line-height': [false, '1.2', '1.5', '1.75', '2', '3', '4', '5'] },
30+
],
31+
['bold', 'italic', 'strike', 'underline', 'divider'],
32+
[{ color: [] }, { background: [] }],
33+
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
34+
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
35+
[{ script: 'sub' }, { script: 'super' }],
36+
[{ indent: '-1' }, { indent: '+1' }],
37+
[{ direction: 'rtl' }],
38+
['link', 'blockquote', 'code', 'code-block'],
39+
['image', 'file'],
40+
['emoji', 'video', 'formula', 'screenshot', 'fullscreen'],
41+
[{ 'table-up': [] }],
42+
]
43+
44+
onMounted(async () => {
1145
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
12-
import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
13-
if (!editorRef.value) return
14-
editor = new FluentEditor(editorRef.value, {
15-
theme: 'snow',
16-
modules: {
17-
toolbar: [
18-
[
19-
{ header: [] },
20-
{ font: [] },
21-
{ size: [] },
22-
{ 'line-height': [] },
23-
],
24-
['bold', 'italic', 'strike', 'underline'],
25-
['link', 'image', 'emoji'],
26-
[{ color: [] }, { background: [] }],
27-
],
28-
counter: true,
29-
emoji: true,
30-
i18n: {
31-
lang: lang.value,
46+
const [
47+
{ default: FluentEditor, generateToolbarTip, generateTableUp },
48+
{ defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp },
49+
emojiMart,
50+
] = await Promise.all([
51+
import('@opentiny/fluent-editor'),
52+
import('quill-table-up'),
53+
import('emoji-mart'),
54+
])
55+
56+
if (!editorRef.value) return
57+
FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true)
58+
FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true)
59+
editor = new FluentEditor(editorRef.value, {
60+
theme: 'snow',
61+
modules: {
62+
'toolbar': TOOLBAR_CONFIG,
63+
'counter': true,
64+
'emoji': {
65+
emojiData: data as EmojiMartData,
66+
EmojiPicker: emojiMart.Picker,
67+
emojiPickerPosition: computePosition,
68+
},
69+
'i18n': {
70+
lang: lang.value,
71+
},
72+
'toolbar-tip': {
73+
defaultTooltipOptions: {
74+
tipHoverable: false,
3275
},
3376
},
34-
})
77+
'table-up': {
78+
customSelect: defaultCustomSelect,
79+
modules: [
80+
{ module: TableSelection },
81+
{ module: TableMenuContextmenu },
82+
],
83+
},
84+
},
3585
})
3686
})
3787
function switchLanguage() {

0 commit comments

Comments
 (0)