laravel 에서 CKEditor5 classic 적용방법 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

JavaScript | laravel 에서 CKEditor5 classic 적용방법

본문

업로드시 파일로 저장하기 위해서는 사용자 어댑터를 추가해야 한다.

 

에디터 플러그인

/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 id="editor">

        <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] 

 

업로드 실행 결과

 

1111.PNG

댓글 0개

등록된 댓글이 없습니다.

Menu