업로드시 파일로 저장하기 위해서는 사용자 어댑터를 추가해야 한다.
에디터 플러그인
/public/js/ck.upload.adapter.js
참조: https://jjong-factory.tistory.com/55
[code]
class UploadAdapter {
constructor(loader) {
this.loader = loader
}
upload() {
return this.loader.file.then(
(file) =>
new Promise((resolve, reject) => {
this._initRequest()
this._initListeners(resolve, reject, file)
this._sendRequest(file)
})
)
}
_initRequest() {
const xhr = (this.xhr = new XMLHttpRequest())
// 파일업로드를 처리할 경로를 작성해 준다.
xhr.open(‘POST’, ‘/editor/upload’, true)
// laravel 용 토큰을 함께 보내준다. (로그인 한 유저만 허용)
xhr.setRequestHeader(
‘X-CSRF-TOKEN’,
document.querySelector(‘meta[name=”csrf-token”]’).getAttribute(‘content’)
)
xhr.responseType = ‘json’
}
_initListeners(resolve, reject, file) {
const xhr = this.xhr
const loader = this.loader
const genericErrorText = ‘파일업로드 실패 – 관리자에게 문의하세요.’
xhr.addEventListener(‘error’, (err) => {
// console.log(err)
reject(genericErrorText)
})
xhr.addEventListener(‘abort’, () => reject())
xhr.addEventListener(‘load’, () => {
const response = xhr.response
if (!response || response.error) {
return reject(
response && response.error ? response.error.message : genericErrorText
)
}
resolve({
default: response.url, //업로드된 파일 주소
})
})
}
_sendRequest(file) {
const data = new FormData()
data.append(‘upload’, file)
this.xhr.send(data)
}
}
[/code]
전송된 파일 처리
App\Http\Controllers\EditorUploader.php
[code]
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class EditorUploader extends Controller
{
public function upload(Request $request)
{
if (!$request->hasFile(‘upload’)) {
return response()->json([
‘message’ => ‘파일이 정상적으로 업로드되지 않았습니다’
], 400);
}
$uploadFile = $request->file(‘upload’);
// 파일이 한개일때 배열에 담아줌 (아래 코드를 여러개일때도 같이 쓰게)
if (!is_array($uploadFile)) {
$uploadFile = [$uploadFile];
}
$urls = [];
foreach ($uploadFile as $file) {
$ext = $file->getClientOriginalExtension();
$file_name = uniqid(rand(), false).’.’.$ext;
$dirpath = ‘editor/’.date(‘Ym’);
Storage::put(‘public/’.$dirpath.’/’.$file_name, file_get_contents($file));
$urls[] = config(‘app.url’).’/storage/’.$dirpath.’/’.$file_name;
}
return response()->json([
‘url’ => $urls,
]);
}
}
[/code]
라우트 처리
: 로그인한 사람만 허용하려면 미들웨어를 추가한다.
routes/web.php
[code]
…
Route::post(‘editor/upload’, [EditorUploader::class, ‘upload’)
…
[/code]
사용방법
[code]
<html>
<head>
…
<style type=”text/css”>
/* 에디터 세로높이 (ckeditor5 에서는 높이 조절 핸들러를 제공하지 않는듯 한다 */
.ck-editor__editable_inline {
min-height: 400px;
}
</style>
<script src=”https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js”></script>
<script src=”{{ asset(‘js/ck.upload.adapter.js’) }}”></script>
</head>
<body>
…
<div>
<p>Here goes the initial content of the editor.</p>
</div>
…
<script>
ClassicEditor
.create(document.querySelector(‘#editor’), {
extraPlugins: [CkUploadAdapterPlugin],
})
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
[/code]
업로드 실행 결과
