├── public
    ├── robots.txt
    ├── images
    │   ├── favicon.png
    │   ├── logo120.png
    │   ├── logo152.png
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── logo76.png
    │   └── logo96.png
    ├── browserconfig.xml
    ├── manifest.json
    ├── loading.css
    └── index.html
├── src
    ├── css
    │   └── main.css
    ├── index.js
    ├── api
    │   └── UploadAdapter.jsx
    ├── App.jsx
    └── sw.js
├── .gitignore
├── README.md
├── package.json
└── LICENSE


/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *


--------------------------------------------------------------------------------
/public/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/favicon.png


--------------------------------------------------------------------------------
/public/images/logo120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/logo120.png


--------------------------------------------------------------------------------
/public/images/logo152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/logo152.png


--------------------------------------------------------------------------------
/public/images/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/logo192.png


--------------------------------------------------------------------------------
/public/images/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/logo512.png


--------------------------------------------------------------------------------
/public/images/logo76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/logo76.png


--------------------------------------------------------------------------------
/public/images/logo96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raminr77/ckeditor-upload-image/HEAD/public/images/logo96.png


--------------------------------------------------------------------------------
/src/css/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: calibri;
 3 | }
 4 | a {
 5 |     color: #129ed6;
 6 |     text-decoration: none;
 7 | }
 8 | .box {
 9 |     width: 660px;
10 |     margin: 100px auto;
11 | }
12 | 
13 | /* Custom Style */
14 | .ck-content {
15 |     min-height: 300px !important;   
16 | }
17 | .ck-content p {
18 |     border-bottom: 0.5px solid #efefef;
19 | }


--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |   <msapplication>
 4 |     <tile>
 5 |       
 6 |       <square96x96logo src="/images/logo96.png"/>
 7 |       <square192x192logo src="/images/logo192.png"/>
 8 |       <square512x512logo src="/images/logo512.png"/>
 9 |       
10 |       <TileColor>#fff</TileColor>
11 |     </tile>
12 |   </msapplication>
13 | </browserconfig>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import * as serviceWorker from './sw';
 4 | 
 5 | // import css
 6 | import './css/main.css';
 7 | 
 8 | // import Component
 9 | import App from './App';
10 | 
11 | ReactDOM.render(
12 |   <React.StrictMode>
13 |     <App />
14 |   </React.StrictMode>,
15 |   document.getElementById('root')
16 | );
17 | 
18 | // If you want your app to work offline and load faster, you can change
19 | // unregister() to register() below. Note this comes with some pitfalls.
20 | // Learn more about service workers: https://bit.ly/CRA-PWA
21 | serviceWorker.unregister();
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Upload Image In CKEditor 5 With API
 2 | [![GitHub stars](https://img.shields.io/github/stars/raminr77/ckeditor-upload-image?style=social)](https://github.com/raminr77/ckeditor-upload-image/)
 3 | 
 4 | this React Project help you for how to **upload image in CKEditor 5 with API** URL and without use to any plugin
 5 | 
 6 | 
 7 | ##### First Install Axios
 8 | `npm i axios --save`
 9 | 
10 | ### Upload Request (POST)
11 | ```
12 | {
13 |     image: binary // form data
14 | }
15 | ```
16 | 
17 | ### Server Response
18 | ```
19 | {
20 |     uploaded: true,
21 |     fileName: 'example',
22 |     url: 'https://example.com'
23 | }
24 | ```
25 | 
26 | 
27 | #### License
28 | [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)


--------------------------------------------------------------------------------
/src/api/UploadAdapter.jsx:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default class UploadAdapter {
 4 | 	constructor(loader , url) {
 5 | 		this.url = url;
 6 | 		this.loader = loader;
 7 | 		this.loader.file.then(pic => (this.file = pic));
 8 | 
 9 | 		this.upload();
10 | 	}
11 | 
12 | 	// Starts the upload process.
13 | 	upload() {
14 | 		const fd = new FormData();
15 | 		fd.append("image", this.file); // your image
16 | 		// ...
17 | 
18 | 		return new Promise((resolve, reject) => {
19 | 			axios
20 | 				.post(this.url, fd, {
21 | 					onUploadProgress: e => {
22 | 						console.log(
23 | 							// show upload process
24 | 							Math.round((e.loaded / e.total) * 100) + " %"
25 | 						);
26 | 					}
27 | 				})
28 | 				.then(response => {
29 | 					resolve(response);
30 | 				})
31 | 				.catch(error => {
32 | 					reject("Server Error");
33 | 					console.log("Server Error : ", error);
34 | 				});
35 | 		});
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ckeditor-upload-image",
 3 |   "version": "0.4.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@ckeditor/ckeditor5-build-classic": "^18.0.0",
 7 |     "@ckeditor/ckeditor5-react": "^2.1.0",
 8 |     "@testing-library/jest-dom": "^4.2.4",
 9 |     "@testing-library/react": "^9.3.2",
10 |     "@testing-library/user-event": "^7.1.2",
11 |     "axios": "^0.19.2",
12 |     "react": "^16.13.1",
13 |     "react-dom": "^16.13.1",
14 |     "react-scripts": "3.4.1"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": "react-app"
24 |   },
25 |   "browserslist": {
26 |     "production": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not op_mini all"
30 |     ],
31 |     "development": [
32 |       "last 1 chrome version",
33 |       "last 1 firefox version",
34 |       "last 1 safari version"
35 |     ]
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Image Uploader",
 3 |   "short_name": "Image Uploader",
 4 |   "icons": [
 5 |     {
 6 |       "src": "images/logo76.png",
 7 |       "type": "image/png",
 8 |       "sizes": "76x76"
 9 |     },
10 |     {
11 |       "src": "images/logo96.png",
12 |       "type": "image/png",
13 |       "sizes": "96x96"
14 |     },
15 |     {
16 |       "src": "images/logo120.png",
17 |       "type": "image/png",
18 |       "sizes": "120x120"
19 |     },
20 |     {
21 |       "src": "images/logo152.png",
22 |       "type": "image/png",
23 |       "sizes": "152x152"
24 |     },
25 |     {
26 |       "src": "images/logo192.png",
27 |       "type": "image/png",
28 |       "sizes": "192x192"
29 |     },
30 |     {
31 |       "src": "images/logo512.png",
32 |       "type": "image/png",
33 |       "sizes": "512x512"
34 |     }
35 |   ],
36 |   "dir": "ltr",
37 |   "lang": "en-US",
38 |   "start_url": "/",
39 |   "theme_color": "#fff",
40 |   "permissions": ["fcm"],
41 |   "display": "standalone",
42 |   "orientation": "portrait",
43 |   "background_color": "#fff",
44 |   "description": "Upload Image In CKEditor 5 With API"
45 | }
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Ramin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/loading.css:
--------------------------------------------------------------------------------
 1 | .loading {
 2 |     width: 100%;
 3 |     margin-top: 40vh;
 4 |     text-align: center;
 5 | }
 6 | .lds-ellipsis {
 7 |     display: inline-block;
 8 |     position: relative;
 9 |     width: 64px;
10 |     height: 64px;
11 | }
12 | .lds-ellipsis div {
13 |     position: absolute;
14 |     top: 27px;
15 |     width: 11px;
16 |     height: 11px;
17 |     border-radius: 50%;
18 |     background: #21252b;
19 |     animation-timing-function: cubic-bezier(0, 1, 1, 0);
20 | }
21 | .lds-ellipsis div:nth-child(1) {
22 |     left: 6px;
23 |     animation: lds-ellipsis1 0.6s infinite;
24 | }
25 | .lds-ellipsis div:nth-child(2) {
26 |     left: 6px;
27 |     animation: lds-ellipsis2 0.6s infinite;
28 | }
29 | .lds-ellipsis div:nth-child(3) {
30 |     left: 26px;
31 |     animation: lds-ellipsis2 0.6s infinite;
32 | }
33 | .lds-ellipsis div:nth-child(4) {
34 |     left: 45px;
35 |     animation: lds-ellipsis3 0.6s infinite;
36 | }
37 | @keyframes lds-ellipsis1 {
38 |     0% {
39 |       transform: scale(0);
40 |     }
41 |     100% {
42 |       transform: scale(1);
43 |     }
44 | }
45 | @keyframes lds-ellipsis3 {
46 |     0% {
47 |       transform: scale(1);
48 |     }
49 |     100% {
50 |       transform: scale(0);
51 |     }
52 | }
53 | @keyframes lds-ellipsis2 {
54 |     0% {
55 |       transform: translate(0, 0);
56 |     }
57 |     100% {
58 |       transform: translate(19px, 0);
59 |     }
60 | }


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | // import CKEditor
 4 | import CKEditor from "@ckeditor/ckeditor5-react";
 5 | import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 6 | 
 7 | // import Upload Adapter
 8 | import UploadAdapter from "./api/UploadAdapter";
 9 | 
10 | // Server URL
11 | const URL = "http://localhost:8000/api/v1/upload/"; // for example
12 | 
13 | // Custom Upload Adapter Plugin function
14 | function CustomUploadAdapterPlugin(editor) {
15 | 	editor.plugins.get("FileRepository").createUploadAdapter = loader => {
16 | 		// Create new object and pass server url
17 | 		return new UploadAdapter(loader, URL);
18 | 	};
19 | }
20 | 
21 | export default class App extends Component {
22 | 	state = {
23 | 		data: ""
24 | 	};
25 | 
26 | 	render() {
27 | 		// CKEditor Config
28 | 		const config = {
29 | 			language: "en", // fa - for persian language ( rtl )
30 | 			extraPlugins: [CustomUploadAdapterPlugin]
31 | 		};
32 | 
33 | 		return (
34 | 			<div className="box">
35 | 				<h2>Custom Upload Adapter Plugin For CKEditor 5</h2>
36 | 				<p>Upload Image With API In React Project</p>
37 | 
38 | 				<CKEditor
39 | 					config={config}
40 | 					editor={ClassicEditor}
41 | 					data={this.state.data}
42 | 					onChange={(event, editor) => {
43 | 						const data = editor.getData();
44 | 						this.setState({ data });
45 | 					}}
46 | 				/>
47 | 
48 | 				<br/>
49 | 				<a href="https://github.com/raminr77">Github</a>
50 | 			</div>
51 | 		);
52 | 	}
53 | }
54 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <!-- General -->
 5 |     <meta charset="utf-8" />
 6 |     <title>Upload Image In CKEditor 5 With API</title>
 7 |     <meta name="theme-color" content="#fff" />
 8 |     <meta name="mobile-web-app-capable" content="yes" />
 9 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
10 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
11 |     <link rel="icon" type="images/png" href="%PUBLIC_URL%/images/favicon.png" />
12 |     <meta name="description" content="Upload Image In CKEditor 5 With API - Ramin Rezaei" />
13 |     <meta name="keywords" content="Ramin Rezaei, Upload Image In CKEditor 5 With API" />
14 |     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no" />
15 |     <!-- iOS -->
16 |     <meta name="apple-mobile-web-app-title" content="Panel" />
17 |     <meta name="apple-mobile-web-app-capable" content="yes" />
18 |     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
19 |     <link href="%PUBLIC_URL%/images/logo76.png" rel="apple-touch-icon" sizes="76x76">
20 |     <link href="%PUBLIC_URL%/images/logo120.png" rel="apple-touch-icon" sizes="120x120">
21 |     <link href="%PUBLIC_URL%/images/logo152.png" rel="apple-touch-icon" sizes="152x152">
22 |     <link href="%PUBLIC_URL%/images/logo192.png" rel="apple-touch-icon" sizes="192x192" />
23 |     <!-- Pinned Sites -->
24 |     <meta name="application-name" content="Panel" />
25 |     <meta name="msapplication-starturl" content="/" />
26 |     <meta name="msapplication-tooltip" content="Control Panel" />
27 |     <!-- Windows -->
28 |     <meta name="msapplication-TileColor" content="#fff" />
29 |     <meta name="msapplication-navbutton-color" content="#fff" />
30 |     <meta name="msapplication-config" content="browserconfig.xml" />
31 |     <meta name="msapplication-TileImage" content="%PUBLIC_URL%/images/logo192.png" />
32 |     <!-- Loading -->
33 |     <link href="%PUBLIC_URL%/loading.css" rel="stylesheet" type="text/css" />
34 |     <!-- -------------- -->
35 |   </head>
36 |   <body>
37 |     <noscript>Enable JS</noscript>
38 |     <div id="root">
39 |         <div class="loading">
40 |             <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
41 |         </div>
42 |     </div>
43 |   </body>
44 | </html>


--------------------------------------------------------------------------------
/src/sw.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------