Skip to content

Commit daca734

Browse files
kagolkagol
authored
feat: export DEFAULT_TOOLBAR and FULL_TOOLBAR (#397)
* feat: export DEFAULT_TOOLBAR and FULL_TOOLBAR * docs: replace TOOLBAR_CONFIG with DEFAULT_TOOLBAR and FULL_TOOLBAR
1 parent 3c4dc2b commit daca734

5 files changed

Lines changed: 110 additions & 89 deletions

File tree

‎packages/docs/fluent-editor/demos/add-toolbar-item.vue‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,9 @@ import { onMounted } from 'vue'
44
55
let editor: FluentEditor
66
7-
const TOOLBAR_CONFIG = [
8-
[{ header: [] }],
9-
['bold', 'italic', 'underline', 'link'],
10-
[{ list: 'ordered' }, { list: 'bullet' }],
11-
['clean'],
12-
13-
// 配置自定义工具栏
14-
['good', 'bad'],
15-
]
16-
177
onMounted(() => {
188
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
19-
import('@opentiny/fluent-editor').then((module) => {
20-
const FluentEditor = module.default
21-
9+
import('@opentiny/fluent-editor').then(({default: FluentEditor, DEFAULT_TOOLBAR}) => {
2210
// 增加工具栏图标
2311
const goodIcon = `<svg t="1734490908682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5918" width="200" height="200"><path d="M881.066667 394.666667c-21.333333-23.466667-51.2-36.266667-81.066667-36.266667H618.666667v-117.333333c0-44.8-29.866667-85.333333-87.466667-117.333334-17.066667-10.666667-38.4-12.8-57.6-8.533333-19.2 4.266667-36.266667 17.066667-46.933333 34.133333-2.133333 2.133333-2.133333 4.266667-4.266667 6.4l-125.866667 281.6H204.8c-59.733333 0-108.8 46.933333-108.8 106.666667v258.133333c0 57.6 49.066667 106.666667 108.8 106.666667h544c53.333333 0 98.133333-38.4 106.666667-89.6l51.2-337.066667c4.266667-34.133333-6.4-64-25.6-87.466666z m-593.066667 448H204.8c-25.6 0-44.8-19.2-44.8-42.666667v-256c0-23.466667 19.2-42.666667 44.8-42.666667h83.2v341.333334z m554.666667-373.333334L789.333333 806.4c-4.266667 21.333333-21.333333 36.266667-42.666666 36.266667H352V471.466667l130.133333-290.133334c2.133333-4.266667 4.266667-4.266667 6.4-4.266666 2.133333 0 4.266667 0 8.533334 2.133333 25.6 14.933333 55.466667 38.4 55.466666 64v149.333333c0 17.066667 14.933333 32 32 32h213.333334c12.8 0 25.6 4.266667 34.133333 14.933334 8.533333 6.4 12.8 19.2 10.666667 29.866666z" fill="#666666" p-id="5919"></path></svg>`
2412
const badIcon = `<svg t="1734491308472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3380" width="200" height="200"><path d="M904.533333 522.666667L853.333333 185.6c-8.533333-51.2-55.466667-89.6-106.666666-89.6H204.8c-59.733333 0-108.8 46.933333-108.8 106.666667v258.133333c0 57.6 49.066667 106.666667 108.8 106.666667h91.733333l125.866667 281.6c2.133333 2.133333 2.133333 4.266667 4.266667 6.4 14.933333 23.466667 38.4 36.266667 64 36.266666 12.8 0 25.6-4.266667 38.4-10.666666 57.6-34.133333 87.466667-72.533333 87.466666-117.333334v-117.333333h183.466667c32 0 59.733333-12.8 81.066667-36.266667 19.2-25.6 29.866667-55.466667 23.466666-87.466666z m-616.533333-21.333334H204.8c-25.6 0-44.8-19.2-44.8-42.666666v-256c0-23.466667 19.2-42.666667 44.8-42.666667h83.2v341.333333zM832 567.466667c-8.533333 8.533333-21.333333 14.933333-34.133333 14.933333h-213.333334c-17.066667 0-32 14.933333-32 32v149.333333c0 25.6-29.866667 49.066667-55.466666 64-4.266667 2.133333-10.666667 2.133333-14.933334-4.266666L352 533.333333V160H746.666667c21.333333 0 40.533333 14.933333 42.666666 36.266667L842.666667 533.333333c2.133333 10.666667-2.133333 23.466667-10.666667 34.133334z" fill="#666666" p-id="3381"></path></svg>`
@@ -41,7 +29,11 @@ onMounted(() => {
4129
theme: 'snow',
4230
modules: {
4331
toolbar: {
44-
container: TOOLBAR_CONFIG,
32+
container: [
33+
...DEFAULT_TOOLBAR,
34+
// 配置自定义工具栏
35+
['good', 'bad'],
36+
],
4537
handlers: {
4638
good(value: boolean) {
4739
// 给选中的内容设置格式

‎packages/docs/fluent-editor/demos/get-content-delta.vue‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import { onMounted, ref } from 'vue'
1212
import 'highlight.js/styles/atom-one-dark.css'
1313
import 'katex/dist/katex.min.css'
1414
15+
import 'quill-table-up/index.css'
16+
import 'quill-table-up/table-creator.css'
17+
1518
window.hljs = hljs
1619
window.katex = katex
1720
window.Html2Canvas = Html2Canvas
@@ -33,56 +36,54 @@ const mentionList = [
3336
},
3437
]
3538
36-
const TOOLBAR_CONFIG = [
37-
['undo', 'redo', 'clean', 'format-painter'],
38-
[{ header: [1, 2, 3, 4, 5, 6, false] }, { font: [] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }],
39-
['bold', 'italic', 'strike', 'underline'],
40-
[{ color: [] }, { background: [] }],
41-
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
42-
[{ script: 'sub' }, { script: 'super' }],
43-
[{ indent: '-1' }, { indent: '+1' }],
44-
[{ direction: 'rtl' }],
45-
['link', 'blockquote', 'code', 'code-block'],
46-
['image', 'file'],
47-
['emoji', 'video', 'formula', 'screenshot'],
48-
]
49-
5039
const articleRef = ref<HTMLElement>()
5140
function updateDeltaStr(deltaStr: string) {
5241
if (articleRef.value) {
5342
articleRef.value.innerHTML = deltaStr
5443
}
5544
}
5645
57-
onMounted(() => {
46+
onMounted(async () => {
5847
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
59-
import('@opentiny/fluent-editor').then((module) => {
60-
const FluentEditor = module.default
48+
const [
49+
{ default: FluentEditor, generateTableUp, FULL_TOOLBAR },
50+
{ defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp },
51+
] = await Promise.all([
52+
import('@opentiny/fluent-editor'),
53+
import('quill-table-up'),
54+
])
6155
62-
editor = new FluentEditor('#editor-get-content-delta', {
63-
theme: 'snow',
64-
modules: {
65-
toolbar: TOOLBAR_CONFIG,
66-
syntax: { hljs },
67-
emoji: true,
68-
file: true,
69-
mention: {
70-
itemKey: 'cn',
71-
searchKey,
72-
search(term) {
73-
return mentionList.filter((item) => {
74-
return item[searchKey] && String(item[searchKey]).includes(term)
75-
})
76-
},
56+
FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true)
57+
editor = new FluentEditor('#editor-get-content-delta', {
58+
theme: 'snow',
59+
modules: {
60+
toolbar: FULL_TOOLBAR,
61+
syntax: { hljs },
62+
emoji: true,
63+
file: true,
64+
mention: {
65+
itemKey: 'cn',
66+
searchKey,
67+
search(term) {
68+
return mentionList.filter((item) => {
69+
return item[searchKey] && String(item[searchKey]).includes(term)
70+
})
7771
},
7872
},
79-
})
73+
'table-up': {
74+
customSelect: defaultCustomSelect,
75+
modules: [
76+
{ module: TableSelection },
77+
{ module: TableMenuContextmenu },
78+
],
79+
},
80+
},
81+
})
8082
81-
updateDeltaStr(JSON.stringify(editor.getContents()))
83+
updateDeltaStr(JSON.stringify(editor.getContents()))
8284
83-
editor.on('text-change', () => {
84-
updateDeltaStr(JSON.stringify(editor.getContents()))
85-
})
85+
editor.on('text-change', () => {
86+
updateDeltaStr(JSON.stringify(editor.getContents()))
8687
})
8788
})
8889
</script>

‎packages/docs/fluent-editor/demos/get-content-html.vue‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { onMounted, ref } from 'vue'
1111
import 'highlight.js/styles/atom-one-dark.css'
1212
import 'katex/dist/katex.min.css'
1313
14+
import 'quill-table-up/index.css'
15+
import 'quill-table-up/table-creator.css'
16+
1417
window.hljs = hljs
1518
window.katex = katex
1619
window.Html2Canvas = Html2Canvas
@@ -32,56 +35,54 @@ const mentionList = [
3235
},
3336
]
3437
35-
const TOOLBAR_CONFIG = [
36-
['undo', 'redo', 'clean', 'format-painter'],
37-
[{ header: [1, 2, 3, 4, 5, 6, false] }, { font: [] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }],
38-
['bold', 'italic', 'strike', 'underline'],
39-
[{ color: [] }, { background: [] }],
40-
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
41-
[{ script: 'sub' }, { script: 'super' }],
42-
[{ indent: '-1' }, { indent: '+1' }],
43-
[{ direction: 'rtl' }],
44-
['link', 'blockquote', 'code', 'code-block'],
45-
['image', 'file'],
46-
['emoji', 'video', 'formula', 'screenshot'],
47-
]
48-
4938
const articleRef = ref<HTMLElement>()
5039
function updateHTML(html: string) {
5140
if (articleRef.value) {
5241
articleRef.value.innerHTML = html
5342
}
5443
}
5544
56-
onMounted(() => {
45+
onMounted(async () => {
5746
// ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
58-
import('@opentiny/fluent-editor').then((module) => {
59-
const FluentEditor = module.default
47+
const [
48+
{ default: FluentEditor, generateTableUp, FULL_TOOLBAR },
49+
{ defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp },
50+
] = await Promise.all([
51+
import('@opentiny/fluent-editor'),
52+
import('quill-table-up'),
53+
])
6054
61-
editor = new FluentEditor('#editor-get-content-html', {
62-
theme: 'snow',
63-
modules: {
64-
toolbar: TOOLBAR_CONFIG,
65-
syntax: { hljs },
66-
emoji: true,
67-
file: true,
68-
mention: {
69-
itemKey: 'cn',
70-
searchKey,
71-
search(term) {
72-
return mentionList.filter((item) => {
73-
return item[searchKey] && String(item[searchKey]).includes(term)
74-
})
75-
},
55+
FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true)
56+
editor = new FluentEditor('#editor-get-content-html', {
57+
theme: 'snow',
58+
modules: {
59+
toolbar: FULL_TOOLBAR,
60+
syntax: { hljs },
61+
emoji: true,
62+
file: true,
63+
mention: {
64+
itemKey: 'cn',
65+
searchKey,
66+
search(term) {
67+
return mentionList.filter((item) => {
68+
return item[searchKey] && String(item[searchKey]).includes(term)
69+
})
7670
},
7771
},
78-
})
72+
'table-up': {
73+
customSelect: defaultCustomSelect,
74+
modules: [
75+
{ module: TableSelection },
76+
{ module: TableMenuContextmenu },
77+
],
78+
},
79+
},
80+
})
7981
80-
updateHTML(editor.root.innerHTML)
82+
updateHTML(editor.root.innerHTML)
8183
82-
editor.on('text-change', () => {
83-
updateHTML(editor.root.innerHTML)
84-
})
84+
editor.on('text-change', () => {
85+
updateHTML(editor.root.innerHTML)
8586
})
8687
})
8788
</script>

‎packages/fluent-editor/src/config/editor.config.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,30 @@ export const FILE_UPLOADER_MIME_TYPES = [
8484
...PPT_UPLOADER_MIME_TYPES,
8585
...COMPRESSED_UPLOADER_MIME_TYPES,
8686
]
87+
88+
export const DEFAULT_TOOLBAR = [
89+
[{ header: [] }],
90+
['bold', 'italic', 'underline', 'link'],
91+
[{ list: 'ordered' }, { list: 'bullet' }],
92+
['clean'],
93+
]
94+
95+
export const FULL_TOOLBAR = [
96+
['undo', 'redo', 'clean', 'format-painter'],
97+
[
98+
{ header: [1, 2, 3, 4, 5, 6, false] },
99+
{ font: [false, '宋体', '微软雅黑', '楷体', '黑体', '隶书', 'andale mono', 'arial', 'arial black', 'comic sans ms', 'impact', 'times new roman'] },
100+
{ size: [false, '12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] },
101+
{ 'line-height': [false, '1.2', '1.5', '1.75', '2', '3', '4', '5'] },
102+
],
103+
['bold', 'italic', 'strike', 'underline', 'divider'],
104+
[{ color: [] }, { background: [] }],
105+
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
106+
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
107+
[{ script: 'sub' }, { script: 'super' }],
108+
[{ indent: '-1' }, { indent: '+1' }],
109+
[{ direction: 'rtl' }],
110+
['link', 'blockquote', 'code', 'code-block'],
111+
['image', 'file', { 'table-up': [] }],
112+
['emoji', 'video', 'formula', 'screenshot', 'fullscreen'],
113+
]

‎packages/fluent-editor/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import FluentEditor from './fluent-editor'
22

33
export * from './attributors'
4-
export * from './config/types'
4+
export * from './config'
55
export * from './formats'
66
export * from './modules'
77
export { generateTableUpShortKeyMenu } from 'quill-shortcut-key'

0 commit comments

Comments
 (0)