https://github.com/emagtechlabs/ckeditor5-file-upload
https://github.com/emagtechlabs/ckeditor5-file-upload
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/emagtechlabs/ckeditor5-file-upload
- Owner: eMAGTechLabs
- Created: 2020-07-23T11:07:03.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-06-29T07:48:01.000Z (almost 4 years ago)
- Last Synced: 2025-01-03T05:15:49.713Z (over 1 year ago)
- Language: JavaScript
- Size: 22.5 KB
- Stars: 15
- Watchers: 8
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# ckeditor5-file-upload
CKEditor5 File Upload Plugin
This plugin allows you to upload file that have mime type application/*.
# Installation
```
npm i @emagtechlabs/ckeditor5-file-upload
```
or
```
yarn add @emagtechlabs/ckeditor5-file-upload
```
# Usage
Update src/ckeditor.js with:
```javascript
import FileUpload from "@emagtechlabs/ckeditor5-file-upload/fileupload";
import SimpleFileUploadAdapter from "@emagtechlabs/ckeditor5-file-upload/src/simplefileuploadadapter";
Editor.builtinPlugins = [
// ...
FileUpload,
SimpleFileUploadAdapter,
// ...
];
Editor.defaultConfig = {
// ...
simpleFileUpload: {
url: 'http://my-custom-link.com',
withCredentials: true,
headers: {
'X-CSRF-TOKEN': 'CSRF_TOKEN',
Authorization: 'Bearer ',
},
fileTypes: [
'.pdf',
'.doc',
'.docx',
'.xls',
'.xlsx'
]
},
toolbar: {
items: [
// ...
'fileUpload',
// ...
]
},
// ...
};
```
Then
```
npm run build
```
or
```
yarn build
```
# How it works
The plugin creates a link entity inside editor content with an empty href attribute and when the upload process is completed the server response should contains an resourceUrl key which points to the uploaded file on the server. The value of the resourceUrl key will be added to the empty href attribute of the previously created link.
### Communication protocol
When the file upload process starts, the adapter sends a POST request to config.simpleFileUpload.url.
### Configuring allowed file types
Use the simpleFileUpload.url configuration option to define the allowed file MIME types that can be uploaded to CKEditor 5.
By default, users are allowed to upload pdf, doc, docx, xls, xlsx documents.
### Upload file
When the file upload process is initiated, in the editor content appears a link with href attribute empty and text link corresponds to the uploaded file name.
### Upload progress
This upload adapter will show users about the file upload progress with the help of a progress bar.
The progress bar has a button to cancel the file upload process.
### Upload complete
When the file has been successfully uploaded, the server should return an object containing the resourceUrl key which points to the uploaded file on the server. The value of the resourceUrl key will be added to the empty href attribute of the previously created link.
