1.1.0 • Published 4 years ago
zoroeditor5-simple-upload v1.1.0
standard image upload button
build integration
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/development/custom-builds.html
npm install zoroeditor5-simple-upload
add this plugin and remove the ckfinder and easyimage plugins
// src/ckeditor.js
import UploadAdapter from '@soszoro/zoroeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@soszoro/zoroeditor5-autoformat/src/autoformat';
import Bold from '@soszoro/zoroeditor5-basic-styles/src/bold';
import Italic from '@soszoro/zoroeditor5-basic-styles/src/italic';
import BlockQuote from '@soszoro/zoroeditor5-block-quote/src/blockquote';
//import CKFinder from '@soszoro/zoroeditor5-ckfinder/src/ckfinder';
//import EasyImage from '@soszoro/zoroeditor5-easy-image/src/easyimage';
import SimpleuploadPlugin from 'zoroeditor5-simple-upload/src/simpleupload'
// ...
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	Essentials,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
//	CKFinder,
//	EasyImage,
	Heading,
    Image,
    SimpleuploadPlugin
    // ...
]
ClassicEditor.defaultConfig = {
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'imageUpload',
			'blockQuote',
			'insertTable',
			'mediaEmbed',
			'undo',
			'redo'
		]
    },
    
    // ...
}
### configuration
```javascript
ClassicEditor.create(document.querySelector( '#editor' ), {
    simpleUpload: {
        uploadUrl: 'http://127.0.0.1/my-upload-endpoint'
    }
})var cb = function() { return (new Date()).getTime() }
ClassicEditor.create(document.querySelector( '#editor' ), {
    simpleUpload: {
        uploadUrl: {url:'http://127.0.0.1/my-upload-endpoint', headers:{ 'x-header':'myhead', 'x-header-cb': cb } }
    }
})backend
the endpoint will receive a file named upload and should return the image url
success response :
{
    "uploaded": true,
    "url": "http://127.0.0.1/uploaded-image.jpeg"
}failure response :
{
    "uploaded": false,
    "error": {
        "message": "could not upload this image"
    }
}