Project SW Test Forum 3. Vue.js CKEditor 5 - 1

</src/assets/plugins/ckeditor/ckeditor-init.js>

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'

import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'
import Code from '@ckeditor/ckeditor5-basic-styles/src/code'
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'

import Image from '@ckeditor/ckeditor5-image/src/image'
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage'


import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters'
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency'
import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/specialcharacterslatin'
import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical'

import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor'
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize'
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor'

import Link from '@ckeditor/ckeditor5-link/src/link'
import Linkimage from '@ckeditor/ckeditor5-link/src/linkimage'
import AutoLink from '@ckeditor/ckeditor5-link/src/autolink'

import Table from '@ckeditor/ckeditor5-table/src/table'
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'

import Heading from '@ckeditor/ckeditor5-heading/src/heading'
import Title from '@ckeditor/ckeditor5-heading/src/title'

import Indent from '@ckeditor/ckeditor5-indent/src/indent'
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'

import List from '@ckeditor/ckeditor5-list/src/list'
import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle'

import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount'
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
import Htmlembed from '@ckeditor/ckeditor5-html-embed/src/htmlembed'
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'

import { CustomUploadAdapterPlugin } from './ckeditor-upload-adapter.js'

const editor = ClassicEditor;

const editorData = '<p>Content of the editor.</p>';

const editorConfig = {
    plugins: [
        Essentials,
        Bold,
        Italic,
        Code,
        Strikethrough,
        Subscript,
        Superscript,
        Underline,

        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageResize,
        ImageInsert,
        ImageUpload,
        AutoImage,

        SpecialCharacters,
        SpecialCharactersCurrency,
        SpecialCharactersLatin,
        SpecialCharactersMathematical,

        FontBackgroundColor,
        FontFamily,
        FontSize,
        FontColor,

        Link,
        Linkimage,
        AutoLink,

        Table,
        TableToolbar,
        TableProperties,
        TableCellProperties,

        Heading,
        Title,

        Indent,
        IndentBlock,

        MediaEmbed,

        List,
        ListStyle,

        BlockQuote,
        RemoveFormat,
        WordCount,
        PasteFromOffice,
        TextTransformation,
        CKFinderUploadAdapter,
        CodeBlock,
        Highlight,
        HorizontalLine,
        Paragraph,
        Alignment,
        Htmlembed,
        UploadAdapter,
        Autoformat,
        EasyImage,
        CloudServices
    ],

    toolbar: {
        items: [
            'heading',
            '|',
            'fontFamily',
            'fontSize',
            'fontColor',
            'fontBackgroundColor',
            'highlight',
            '|',
            'blockQuote',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'removeFormat',
            '|',
            'alignment',
            '|',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'imageInsert',
            'insertTable',
            '|',
            'link',
            'horizontalLine',
            'specialCharacters',
            'superscript',
            'subscript',
            '|',
            'mediaEmbed',
            'codeBlock',
            'htmlEmbed',
            'code',
            '|',
            'undo',
            'redo'
        ]
    },

    language: 'en',

    image: {
        // Configure the available styles.
        styles: [
            'alignLeft', 'alignCenter', 'alignRight'
        ],

        // Configure the available image resize options.
        resizeOptions: [
            {
                name: 'imageResize:original',
                label: 'Original',
                value: null
            },
            {
                name: 'imageResize:75',
                label: '75%',
                value: '75'
            },
            {
                name: 'imageResize:50',
                label: '50%',
                value: '50'
            },
            {
                name: 'imageResize:25',
                label: '25%',
                value: '25'
            }
        ],

        // You need to configure the image toolbar, too, so it shows the new style
        // buttons as well as the resize buttons.
        toolbar: [
            'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
            '|',
            'imageResize',
            '|',
            'imageTextAlternative'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            'tableCellProperties',
            'tableProperties'
        ]
    },
    extraPlugins: [CustomUploadAdapterPlugin]
};

export { editor, editorData, editorConfig };

</src/assets/plugins/ckeditor/ckeditor-upload-adapter.js>

/* ckeditor custom image upload */
class CustomUploadAdapter {
    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', 'localhost' + '/api/attachedFiles/upload', true); // 이미지 파일을 업로드하는 파일 주소
        xhr.responseType = 'json';
    }

    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = 'Couldn\'t upload file.'

        xhr.addEventListener('error', () => {
            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("files", file)
        this.xhr.send(data)
    }
}

function CustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new CustomUploadAdapter(loader)
    }
}

export { CustomUploadAdapterPlugin }

</src/views/Board.vue>

<template>
    <div class="board" >
        <h1>This is an board page < /h1>
        <ckeditor : editor = "vueEditor" v - model="vueEditorData" : config = "vueEditorConfig"  @blur="validateEditor”> </ckeditor>
    </div>

    <button @click="writePost(vueEditorData)">작성</button>
</template>

 < style lang = "scss" >
@import '/assets/css/ckeditor.css';
</style>

< script >
import { editor, editorData, editorConfig } from '@/assets/plugins/ckeditor/ckeditor-init.js'
import CKEditor from '@ckeditor/ckeditor5-vue'
import axios from "axios";

export default {
    components: {
        ckeditor: CKEditor.component
    },
    setup() {
        const vueEditor = editor;
        const vueEditorData = editorData;
        const vueEditorConfig = editorConfig;

        // 비동기 통신을 위한 event 함수가 등록되어 있는 경우
        const writePost = async (vueEditorData) => {
            await axios.post("/api/board",
                {
                    content: vueEditorData,
                },
            )
                .then((response) => {

                })
                .catch((error) => {

                })
                .then(() => {

                });
        }

        const validateEditor = (event, editor) => {
            let size = getSize(editor.getData());

            // 16777215Bytes(16MB)
            if (size > 16777215) {
                alert(“size error!”);
                editor.editing.view.focus();
            }
         }


        return {
            vueEditor, vueEditorData, vueEditorConfig,
            writePost, validateEditor
        }
    }
};

</src/views/BoardRead.vue>

<template>
    <div v-html="notice.content"></div>
</template>


<script>
const unescapeHtml = (str) =>
   str.replace(
       /&amp;|&lt;|&gt;|&#39;|&quot;/g,
       tag =>
           ({
               '&amp;': '&',
               '&lt;': '<',
               '&gt;': '>',
               '&#39;': "'",
               '&quot;': '"'
           }[tag] || tag)
   );

// 생략...

// onBeforeMount, init data
onBeforeMount(async () => {
  await axios.get(process.env.VUE_APP_MODULE_APP_API_URL + "/api/notices/read?idx=" + idx,
      {},
  )
      .then(function (response) {
        notice.value = response.data;
        notice.value.content = unescapeHtml(notice.value.content);

        // 생략...
      })
      .catch(function (error) {

      })
      .then(function () {

      });
})
</script>