WYSIWYG 에디터 - CKEditor

•

위지윅 에디터란?

•

React 에 CKEditor 설치

•

샘플코드

◦

import

◦

컴포넌트

위지윅 에디터란?

WYSIWYG (What You See Is What You Get) : 작성하는 내용을 그대로 보면서 편집할 수 있는 에디터

위지윅(What You See Is What You Get) 에디터는 사용자가 결과물을 보면서 콘텐츠를 편집할 수 있는 도구입니다. 사용자는 텍스트 형식, 이미지, 표 등을 직접 조작하여 웹 콘텐츠를 만들 수 있습니다. 이러한 에디터는 사용자가 HTML이나 CSS 같은 마크업 언어를 몰라도 웹 콘텐츠를 쉽게 만들 수 있게 해줍니다.

웹에서는 HTML 형식으로 컨텐츠가 보여지는데, 일반 텍스트를 작성하면, 제목, 문단, 이미지 등을 그대로 볼 수가 없다. 그런데 위지윅 에디터를 이용하면, 작성하는 컨텐츠를 그대로 HTML 로 변환하여 보여주기 때문에, 있는 그대로 작성하면서 볼 수 있다.

React 에 CKEditor 설치

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
Bash
복사

npm install --save @ckeditor/ckeditor5-alignment
Bash
복사

샘플코드

import

// ckeditor5
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
JavaScript
복사

컴포넌트

<CKEditor
	editor={ ClassicEditor }
	config={{
	    placeholder: "내용을 입력하세요.",
	    toolbar: {
	        items: [
	            'undo', 'redo',
	            '|', 'heading',
	            '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
	            '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
	            '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
	            '|', 'link', 'uploadImage', 'blockQuote', 'codeBlock',
	            '|', 'mediaEmbed',
	        ],
	        shouldNotGroupWhenFull: false
	    },
	    editorConfig: {
	        height: 500, // Set the desired height in pixels
	    },
	    alignment: {
	        options: ['left', 'center', 'right', 'justify'],
	    },
	    
	    // extraPlugins: [uploadPlugin]            // 업로드 플러그인
	}}
	data=""         // ⭐ 기존 컨텐츠 내용 입력 (HTML)
	onReady={ editor => {
	    // You can store the "editor" and use when it is needed.
	    console.log( 'Editor is ready to use!', editor );
	} }
	onChange={ ( event, editor ) => {
	    const data = editor.getData();
	    console.log( { event, editor, data } );
	    setContent(data);
	} }
	onBlur={ ( event, editor ) => {
	    console.log( 'Blur.', editor );
	} }
	onFocus={ ( event, editor ) => {
	    console.log( 'Focus.', editor );
	} }
	/>
JavaScript
복사

에디터 사용

•

게시글 등록

•

게시글 수정

•

게시글 조회

게시글 등록

<CKEditor
	editor={ ClassicEditor }
	config={{
	    placeholder: "내용을 입력하세요.",
	    toolbar: {
	        items: [
	            'undo', 'redo',
	            '|', 'heading',
	            '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
	            '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
	            '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
	            '|', 'link', 'uploadImage', 'blockQuote', 'codeBlock',
	            '|', 'mediaEmbed',
	        ],
	        shouldNotGroupWhenFull: false
	    },
	    editorConfig: {
	        height: 500, // Set the desired height in pixels
	    },
	    alignment: {
	        options: ['left', 'center', 'right', 'justify'],
	    },
	    
	    // extraPlugins: [uploadPlugin]            // 업로드 플러그인
	}}
	data=""         // ⭐ 기존 컨텐츠 내용 입력 (HTML)
	onReady={ editor => {
	    // You can store the "editor" and use when it is needed.
	    console.log( 'Editor is ready to use!', editor );
	} }
	onChange={ ( event, editor ) => {
	    const data = editor.getData();
	    console.log( { event, editor, data } );
	    setContent(data);
	} }
	onBlur={ ( event, editor ) => {
	    console.log( 'Blur.', editor );
	} }
	onFocus={ ( event, editor ) => {
	    console.log( 'Focus.', editor );
	} }
	/>
JavaScript
복사

게시글 수정

<CKEditor
	editor={ ClassicEditor }
	config={{
	    placeholder: "내용을 입력하세요.",
	    toolbar: {
	        items: [
	            'undo', 'redo',
	            '|', 'heading',
	            '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
	            '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
	            '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
	            '|', 'link', 'uploadImage', 'blockQuote', 'codeBlock',
	            '|', 'mediaEmbed',
	        ],
	        shouldNotGroupWhenFull: false
	    },
	    editorConfig: {
	        height: 500, // Set the desired height in pixels
	    },
	    alignment: {
	        options: ['left', 'center', 'right', 'justify'],
	    },
	    
	    // extraPlugins: [uploadPlugin]            // 업로드 플러그인
	}}
	data={content}         // ⭐ 기존 컨텐츠 내용 입력 (HTML)
	onReady={ editor => {
	    // You can store the "editor" and use when it is needed.
	    console.log( 'Editor is ready to use!', editor );
	} }
	onChange={ ( event, editor ) => {
	    const data = editor.getData();
	    console.log( { event, editor, data } );
	    setContent(data);
	} }
	onBlur={ ( event, editor ) => {
	    console.log( 'Blur.', editor );
	} }
	onFocus={ ( event, editor ) => {
	    console.log( 'Focus.', editor );
	} }
	/>
JavaScript
복사

게시글 조회

<CKEditor editor={ ClassicEditor }
          data={ content }           // 조회할 데이터 컨텐츠 
          disabled={true}
          config={{
              toolbar: [],
          }}
/>
JavaScript
복사

에디터에서 파일 업로드 적용

•

uploadPlugin() 함수 정의

•

customUploadAdapter() 함수 정의

•

extraPlugins: [uploadPlugin]

uploadPlugin() 함수 정의

function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
        return customUploadAdapter(loader);
    };
}
JavaScript
복사

customUploadAdapter() 함수 정의

const customUploadAdapter = (loader) => {
        return {
          upload() {
            return new Promise( (resolve, reject) => {
              const formData = new FormData();
              loader.file.then( async (file) => {
                    console.log(file);
                    formData.append("parentTable", 'editor');
                    formData.append("file", file);

                    const headers = {
                        headers: {
                            'Content-Type' : 'multipart/form-data',
                        },
                    };
    
                    let response = await files.upload(formData, headers);
                    let data = await response.data;
                    console.log(`data : ${data}`);
                    
                    let newFile = data;
                    let newFileNo = newFile.no

										// 이미지 렌더링
                    await resolve({
                        default: `http://localhost:8080/files/img/${newFileNo}`
                    })
                    
              });
            });
          },
        };
    };
JavaScript
복사

extraPlugins: [uploadPlugin] 설정

extraPlugins: [uploadPlugin]

<CKEditor
	editor={ ClassicEditor }
	config={{
	    placeholder: "내용을 입력하세요.",
	    toolbar: {
	        items: [
	            'undo', 'redo',
	            '|', 'heading',
	            '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
	            '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
	            '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
	            '|', 'link', 'uploadImage', 'blockQuote', 'codeBlock',
	            '|', 'mediaEmbed',
	        ],
	        shouldNotGroupWhenFull: false
	    },
	    editorConfig: {
	        height: 500, // Set the desired height in pixels
	    },
	    alignment: {
	        options: ['left', 'center', 'right', 'justify'],
	    },
	    
	    extraPlugins: [uploadPlugin]            // 업로드 플러그인
	}}
	data=""         // ⭐ 기존 컨텐츠 내용 입력 (HTML)
	onReady={ editor => {
	    // You can store the "editor" and use when it is needed.
	    console.log( 'Editor is ready to use!', editor );
	} }
	onChange={ ( event, editor ) => {
	    const data = editor.getData();
	    console.log( { event, editor, data } );
	    setContent(data);
	} }
	onBlur={ ( event, editor ) => {
	    console.log( 'Blur.', editor );
	} }
	onFocus={ ( event, editor ) => {
	    console.log( 'Focus.', editor );
	} }
	/>
JavaScript
복사