docs: add image-upload-to-server demo #52
Conversation
WalkthroughThis pull request introduces a new Vue component for image uploading within the Fluent Editor, enhancing the editor's functionality. It includes a demo for this feature in the documentation and modifies existing classes to support image insertion and clipboard handling. The changes streamline the upload process and improve configurability, addressing user needs for clearer documentation on image upload capabilities. Changes
Possibly related issues
Possibly related PRs
Tip New featuresWalkthrough comment now includes:
Notes:
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (1)
packages/docs/fluent-editor/docs/image-upload.md (1)
8-11: Approve the new section and suggest a language correction.The new section "上传到服务器" and its demo reference are correctly added and enhance the documentation. However, consider replacing "server" with "servidor" to align with language best practices.
Tools
LanguageTool
[locale-violation] ~10-~10: 'server' é un xenismo. É preferíbel dicir "servidor"
Context: ...到服务器 :::demo src=demos/image-upload-to-server.vue :::(GL_BARBARISM_REPLACE)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- packages/docs/fluent-editor/demos/image-upload-to-server.vue (1 hunks)
- packages/docs/fluent-editor/docs/image-upload.md (1 hunks)
- packages/fluent-editor/src/custom-clipboard.ts (1 hunks)
- packages/fluent-editor/src/custom-uploader.ts (2 hunks)
Additional context used
LanguageTool
packages/docs/fluent-editor/docs/image-upload.md
[locale-violation] ~10-~10: 'server' é un xenismo. É preferíbel dicir "servidor"
Context: ...到服务器 :::demo src=demos/image-upload-to-server.vue :::(GL_BARBARISM_REPLACE)
Additional comments not posted (1)
packages/fluent-editor/src/custom-uploader.ts (1)
Line range hint
116-161: Approve the new method and suggest verification for backward compatibility.The new method
insertImageToEditoris correctly implemented and enhances the editor's functionality by allowing for dynamic image insertion based on upload results. However, ensure that the modifications tohandleUploadImagedo not affect existing functionality and that they are backward compatible.Consider running tests or checking usage in different configurations to ensure compatibility.
| <script setup lang="ts"> | ||
| import { onMounted } from 'vue' | ||
| import FluentEditor from '@opentiny/fluent-editor' | ||
|
|
||
| let editor | ||
|
|
||
| const TOOLBAR_CONFIG = [ | ||
| [{ header: [] }], | ||
| ['bold', 'italic', 'underline', 'link'], | ||
| [{ list: 'ordered' }, { list: 'bullet' }], | ||
| ['clean'], | ||
| ['image'], | ||
| ] | ||
|
|
||
| // 这里需要换成你自己的图片上传服务地址 | ||
| const IMG_API_URL = 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be' | ||
|
|
||
| /** | ||
| * 上传图片到服务器 | ||
| * @param image File 格式的图片 | ||
| * @param callback 回调函数，用来处理服务器返回的图片 URL | ||
| * 除了 XMLHttpRequest，也可以使用 fetch / axios 等工具实现图片上传。 | ||
| */ | ||
| function imageHandler(image, callback) { | ||
| const data = new FormData() | ||
| data.append('image', image) | ||
| const xhr = new XMLHttpRequest() | ||
| xhr.open('POST', IMG_API_URL, true) | ||
| xhr.onreadystatechange = function () { | ||
| if (xhr.readyState === 4) { | ||
| // 这里需要换成实际的接口返回值，比如：JSON.parse(xhr.responseText) | ||
| const response = { | ||
| status: 200, | ||
| success: 'Upload success!', | ||
| data: { | ||
| link: 'https://res.hc-cdn.com/tiny-vue-web-doc/3.18.9.20240902190525/static/images/mountain.png', | ||
| }, | ||
| } | ||
| if (response.status === 200 && response.success) { | ||
| callback(response.data.link) | ||
| } | ||
| else { | ||
| // 图片上传失败了，就转成 Base64 格式 | ||
| var reader = new FileReader() | ||
| reader.onload = function (e) { | ||
| callback(e.target.result) | ||
| } | ||
| reader.readAsDataURL(image) | ||
| } | ||
| } | ||
| } | ||
| xhr.send(data) | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook | ||
| import('@opentiny/fluent-editor').then((module) => { | ||
| const FluentEditor = module.default | ||
|
|
||
| editor = new FluentEditor('#editor-image-upload-to-server', { | ||
| theme: 'snow', | ||
| modules: { | ||
| toolbar: TOOLBAR_CONFIG, | ||
| }, | ||
| uploadOption: { | ||
| imageUpload: ({ file, callback }) => { | ||
| imageHandler(file, (imageUrl) => { | ||
| // 调用 callback，传入 imageUrl 即可实现图片渲染 | ||
| callback({ | ||
| code: 0, | ||
| message: 'Upload success!', | ||
| data: { | ||
| imageUrl, | ||
| }, | ||
| }) | ||
| }) | ||
| }, | ||
| }, | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| </script> | ||
|
|
||
| <template> | ||
| <div id="editor-image-upload-to-server" /> | ||
| </template> |
There was a problem hiding this comment.
Approve the script setup and suggest improvements for error handling.
The script setup in this Vue component is well-organized and uses modern Vue features effectively. However, consider enhancing the error handling in the imageHandler function to provide more detailed feedback to the user in case of upload failures.
| @@ -117,7 +117,7 @@ class CustomClipboard extends Clipboard { | |||
| const files = Array.from(e.clipboardData.files || []) | |||
| const msExcelCheck = /<meta.*?Microsoft Excel\s[\d].*?>/ | |||
|
|
|||
| if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption?.imageUploadToServer && files.length > 0) { | |||
| if (html.search(msExcelCheck) === -1 && files.length > 0) { | |||
There was a problem hiding this comment.
Potential Security Risk: Simplified File Upload Condition
The change in the conditional logic at line 120 removes the check for the image upload option, which simplifies the process but could potentially allow unintended file uploads. This could lead to security risks or functional issues if not handled properly.
Please ensure that this change aligns with the intended use cases and consider adding safeguards or additional checks to prevent unwanted file uploads.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Refactor