From 68d2adc533f017bf3816b379109c85709e747c69 Mon Sep 17 00:00:00 2001 From: Kagol Date: Wed, 18 Dec 2024 09:28:51 +0800 Subject: [PATCH 1/4] feat(fluent-editor): add before-editor-init props --- .../renderless/src/fluent-editor/index.ts | 26 ++++++++++--------- packages/vue/src/fluent-editor/src/index.ts | 4 +++ .../src/fluent-editor/src/mobile-first.vue | 3 ++- packages/vue/src/fluent-editor/src/pc.vue | 3 ++- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/renderless/src/fluent-editor/index.ts b/packages/renderless/src/fluent-editor/index.ts index 63bee50163..acaebbec5b 100644 --- a/packages/renderless/src/fluent-editor/index.ts +++ b/packages/renderless/src/fluent-editor/index.ts @@ -49,6 +49,8 @@ export const init = state.innerOptions.modules.toolbar = simpleToolbar } + props.beforeEditorInit?.(FluentEditor) + const quill = new FluentEditor(vm.$refs.editor, state.innerOptions) quill.emitter.on('file-change', api.fileOperationToSev) state.quill = Object.freeze(quill) @@ -194,8 +196,8 @@ export const handleCompositionend = state.quill.root.classList.add('ql-blank') } } else { - let data = state.quill.container.innerHTML, - range = state.quill.getSelection(true) + let data = state.quill.container.innerHTML + let range = state.quill.getSelection(true) const [mentionItem, offset] = state.quill.getLeaf(range.index) if (mentionItem.statics.blotName === 'break' || (mentionItem.statics.blotName === 'text' && offset === 0)) { @@ -204,8 +206,8 @@ export const handleCompositionend = if (mentionItem.statics.blotName === 'break') { state.quill.setSelection(range.index + event.data.length) } else { - let pattern = /[\u4E00-\u9FA5\uf900-\ufa2d]/, - flag + let pattern = /[\u4E00-\u9FA5\uF900-\uFA2D]/ + let flag if (pattern.test(event.data)) { flag = true @@ -298,8 +300,8 @@ export const inputFileHandler = fileInput.setAttribute('accept', mimeTypes) if ( - (UploaderDfls.enableMultiUpload['file'] && type === 'file') || - (UploaderDfls.enableMultiUpload['image'] && type === 'image') + (UploaderDfls.enableMultiUpload.file && type === 'file') || + (UploaderDfls.enableMultiUpload.image && type === 'image') ) { fileInput.setAttribute('multiple', '') } @@ -343,12 +345,12 @@ export const uploaderDflsHandler = export const handleUploadFile = ({ api, UploaderDfls }) => (range, files, hasRejectedFile) => { - const fileEnableMultiUpload = UploaderDfls.enableMultiUpload === true || UploaderDfls.enableMultiUpload['file'] + const fileEnableMultiUpload = UploaderDfls.enableMultiUpload === true || UploaderDfls.enableMultiUpload.file api.fileOperationToSev({ operation: 'upload', data: fileEnableMultiUpload ? { files } : { file: files[0] }, - hasRejectedFile: hasRejectedFile, + hasRejectedFile, callback: (res) => { if (!res) { return @@ -490,11 +492,11 @@ export const handleUploadImage = (range, { file, files }, hasRejectedImage) => { if (state.quill.options.uploadOption.imageUploadToServer) { const index = state.promisesData.length - const imageEnableMultiUpload = UploaderDfls.enableMultiUpload['image'] + const imageEnableMultiUpload = UploaderDfls.enableMultiUpload.image const result = { file, data: { files: [file] }, - hasRejectedImage: hasRejectedImage, + hasRejectedImage, callback: (res) => { if (!res) { return @@ -526,7 +528,7 @@ export const handleUploadImage = } if (imageEnableMultiUpload) { - result['data'] = { files } + result.data = { files } } state.promisesData.push({ @@ -863,7 +865,7 @@ export const handleDblclick = props.picPreview && e && e.type === 'dblclick' && - [...e.target.classList].indexOf('blot-formatter__overlay') > -1 && + [...e.target.classList].includes('blot-formatter__overlay') && e.target.dataset.image ) { api.doPreview(e.target) diff --git a/packages/vue/src/fluent-editor/src/index.ts b/packages/vue/src/fluent-editor/src/index.ts index 593e522f7b..c9c0b380fb 100644 --- a/packages/vue/src/fluent-editor/src/index.ts +++ b/packages/vue/src/fluent-editor/src/index.ts @@ -65,6 +65,10 @@ export const fluentEditorProps = { imagePasteFailCallback: { type: Function, default: () => {} + }, + beforeEditorInit: { + type: Function, + default: () => {} } } diff --git a/packages/vue/src/fluent-editor/src/mobile-first.vue b/packages/vue/src/fluent-editor/src/mobile-first.vue index 6480f1604d..a40344d3a2 100644 --- a/packages/vue/src/fluent-editor/src/mobile-first.vue +++ b/packages/vue/src/fluent-editor/src/mobile-first.vue @@ -102,7 +102,8 @@ export default defineComponent({ 'dataType', 'dataUpgrade', 'zIndex', - 'imagePasteFailCallback' + 'imagePasteFailCallback', + 'beforeEditorInit' ], setup(props, context) { return setup({ diff --git a/packages/vue/src/fluent-editor/src/pc.vue b/packages/vue/src/fluent-editor/src/pc.vue index 9dabc57064..c53ca27aa3 100644 --- a/packages/vue/src/fluent-editor/src/pc.vue +++ b/packages/vue/src/fluent-editor/src/pc.vue @@ -103,7 +103,8 @@ export default defineComponent({ 'dataType', 'dataUpgrade', 'zIndex', - 'imagePasteFailCallback' + 'imagePasteFailCallback', + 'beforeEditorInit' ], setup(props, context): any { return setup({ From 64e150c7678ef18b0d1f3d908fff79ecba927579 Mon Sep 17 00:00:00 2001 From: Kagol Date: Wed, 18 Dec 2024 11:29:49 +0800 Subject: [PATCH 2/4] docs(fluent-editor): add before-editor-init api/demo docs --- examples/sites/demos/apis/fluent-editor.js | 16 ++++- .../before-editor-init-composition-api.vue | 70 +++++++++++++++++++ .../app/fluent-editor/before-editor-init.vue | 22 ++++++ .../app/fluent-editor/webdoc/fluent-editor.js | 13 ++++ 4 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 examples/sites/demos/pc/app/fluent-editor/before-editor-init-composition-api.vue create mode 100644 examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue diff --git a/examples/sites/demos/apis/fluent-editor.js b/examples/sites/demos/apis/fluent-editor.js index 52b82aef95..cf4e8d6c6a 100644 --- a/examples/sites/demos/apis/fluent-editor.js +++ b/examples/sites/demos/apis/fluent-editor.js @@ -5,6 +5,16 @@ export default { name: 'fluent-editor', type: 'component', props: [ + { + name: 'before-editor-init', + type: '(FluentEditor) => void', + defaultValue: '', + desc: { + 'zh-CN': 'FluentEditor 初始化之前执行的钩子，用于注册自定义 FluentEditor 模块和格式。', + 'en-US': '' + }, + pcDemo: 'before-editor-init' + }, { name: 'data-type', type: 'boolean', @@ -64,7 +74,7 @@ export default { { name: 'options', type: 'object', - defaultValue: "", + defaultValue: '', desc: { 'zh-CN': '编辑器配置项，参考 Quill 文档：https://quilljs.com/docs/configuration#options', 'en-US': '' @@ -75,7 +85,7 @@ export default { { name: 'zIndex', type: 'number', - defaultValue: "", + defaultValue: '', desc: { 'zh-CN': '编辑器的 z-index', 'en-US': '' @@ -105,6 +115,6 @@ interface IImageUploadOptions { fail: (serverError: string) => void // 上传失败回调信息 } ` - }, + } ] } diff --git a/examples/sites/demos/pc/app/fluent-editor/before-editor-init-composition-api.vue b/examples/sites/demos/pc/app/fluent-editor/before-editor-init-composition-api.vue new file mode 100644 index 0000000000..283e6dffb2 --- /dev/null +++ b/examples/sites/demos/pc/app/fluent-editor/before-editor-init-composition-api.vue @@ -0,0 +1,70 @@ + + + diff --git a/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue b/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue new file mode 100644 index 0000000000..ac949c92c9 --- /dev/null +++ b/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js index 47aaa425ff..efaacf57e6 100644 --- a/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js +++ b/examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js @@ -63,6 +63,19 @@ export default { 'en-US': '' }, codeFiles: ['data-switch.vue'] + }, + { + demoId: 'before-editor-init', + name: { + 'zh-CN': '初始化前的钩子', + 'en-US': '' + }, + desc: { + 'zh-CN': + '

通过 before-editor-init 设置 FluentEditor 初始化前的钩子函数，主要用于注册 FluentEditor 自定义格式和模块。
这个示例增加了两个新的格式：good / bad，并在工具栏增加了对应的图标用于设置这两种格式。
选中一段文本，点击点赞图标，会将文本色设置成绿色；点击点踩图标，会将文本色设置成红色。

', + 'en-US': '' + }, + codeFiles: ['before-editor-init.vue'] } ] } From a4071b13774580be3de835393f148e90517ab692 Mon Sep 17 00:00:00 2001 From: Kagol Date: Wed, 18 Dec 2024 15:53:46 +0800 Subject: [PATCH 3/4] chore: add meta to before-editor-init --- examples/sites/demos/apis/fluent-editor.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/sites/demos/apis/fluent-editor.js b/examples/sites/demos/apis/fluent-editor.js index cf4e8d6c6a..664affc0af 100644 --- a/examples/sites/demos/apis/fluent-editor.js +++ b/examples/sites/demos/apis/fluent-editor.js @@ -9,6 +9,9 @@ export default { name: 'before-editor-init', type: '(FluentEditor) => void', defaultValue: '', + meta: { + stable: '3.21.0' + }, desc: { 'zh-CN': 'FluentEditor 初始化之前执行的钩子，用于注册自定义 FluentEditor 模块和格式。', 'en-US': '' From 7eb790ce7b9b6ed85ca1b21ba6116fd7eebd0593 Mon Sep 17 00:00:00 2001 From: Kagol Date: Wed, 18 Dec 2024 16:01:33 +0800 Subject: [PATCH 4/4] docs(fluent-editor): add options demo --- .../app/fluent-editor/before-editor-init.vue | 57 ++++++++++++++++++- 1 file changed, 55 insertions(+), 2 deletions(-) diff --git a/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue b/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue index ac949c92c9..4275ee70b1 100644 --- a/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue +++ b/examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue @@ -1,6 +1,11 @@