ckeditor

// 파일명 : UploadAdapter.js

export default class UploadAdapter {
    constructor( loader ) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    // Starts the upload process.
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                this._initRequest();
                this._initListeners( resolve, reject, file );
                this._sendRequest( file );
            } ) );
    }

    // Aborts the upload process.
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        xhr.open( 'POST', '/board/ckeditor_image', true );
        xhr.responseType = 'json';
    }

    // Initializes XMLHttpRequest listeners.
    _initListeners( resolve, reject, file ) {
        console.log(resolve);
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${ file.name }.`;

        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;
            console.log(response); // res.send({status:200, url:'aaa'}); url이 오면 url로 나타남 생략하면 자동으로 표시

            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            resolve({
                default: response.url
            });
        } );

        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }

    // Prepares the data and sends the request.
    _sendRequest( file ) {
        // Prepare the form data.
        const data = new FormData();

        data.append( 'image', file );

        // Send the request.
        this.xhr.send( data );
    }
}

<template>
    <div style="padding:20px">
        {{state.editorData}}
        <input type="text" placeholder="제목" style="border:1px solid #cccccc"/>
        <ckeditor :editor="state.editor" v-model="state.editorData" @ready="onReady"></ckeditor>
    </div>
</template>

<script>

// CMD> npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import UploadAdapter from './UploadAdapter.js';
import CKEditor from '@ckeditor/ckeditor5-vue'
import { reactive } from '@vue/reactivity';

export default {
    components: { ckeditor: CKEditor.component },


    setup () {

      const state = reactive({
            editor       : ClassicEditor, // ckeditor종류
            editorData   : '<p>미리추가되는내용테스트</p>',
      })

      const onReady = ( editor ) => {
          console.log(editor);
          editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
                return new UploadAdapter( loader );
          };
          
          
          editor.editing.view.change( writer => {
            writer.setStyle( 'height', '600px', editor.editing.view.document.getRoot() );
          });
          
      }

      return {state, onReady}
    },

}
</script>

<style lang="css" scoped>

</style>