CKEditor5 사용해보기 1

1. CKEditor 사용 준비하기

CKEditor CDN 설정 및 import 설정

<script src="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js"></script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css">
<script type="importmap">
{
	"imports": {
		//웹 페이지에서 사용할 변수명 : CKEditor에서 import할 js 파일입니다.
		"CKtest": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
		"CKtest/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/",
		//CKEditor에서 지원하는 설정을 불러올 js 파일을 생성해주고 import 해줍니다.
		"editorConfig": "./js/CKEditorConfig.js",
		"editorConfig/": "./js/"
	}
}
</script>

 

CKEditorConfig.js 만들기

import {
  AccessibilityHelp,
  Autoformat,
  AutoImage,
  Autosave,
  BlockQuote,
  Bold,
  CloudServices,
  Essentials,
  Heading,
  ImageBlock,
  ImageInline,
  ImageInsert,
  ImageInsertViaUrl,
  ImageResize,
  ImageStyle,
  ImageTextAlternative,
  ImageToolbar,
  ImageUpload,
  Indent,
  IndentBlock,
  Italic,
  Link,
  Paragraph,
  SelectAll,
  SimpleUploadAdapter,
  TextTransformation,
  Underline,
  Undo,
} from 'CKtest';

//한국어 설정 인포트
import translations from 'CKtest/translations/ko.js';

 

위 임포트한 내용은 아래 링크에서 확인 가능합니다.

https://ckeditor.com/docs/ckeditor5/latest/api/index.html

CKEditor 5 API | CKEditor 5 documentation

 

export const editorConfig = {
  //인포트한값들중 메뉴에 보여줄 설정
  toolbar: {
	//메뉴바에 보여줄 메뉴를 설정해줍니다.
	//'|' <-- 해당 문자는 단지 메뉴를 나눠주기 위해 작성한 부분입니다.
    items: [
      'undo',
      'redo',
      '|',
      'heading',
      '|',
      'bold',
      'italic',
      'underline',
      '|',
      'link',
      'insertImage',
      'blockQuote',
      '|',
      'outdent',
      'indent',
    ],
    shouldNotGroupWhenFull: false,
  },
  //사용 플러그인 등록
  plugins: [
    AccessibilityHelp,
    Autoformat,
    AutoImage,
    Autosave,
    BlockQuote,
    Bold,
    CloudServices,
    Essentials,
    Heading,
    ImageBlock,
    ImageInline,
    ImageInsert,
    ImageInsertViaUrl,
    ImageResize,
    ImageStyle,
    ImageTextAlternative,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    Link,
    Paragraph,
    SelectAll,
    SimpleUploadAdapter,
    TextTransformation,
    Underline,
    Undo,
  ],
  //문단을 선택할 수 있게 설정
  heading: {
    options: [
      {
        model: 'paragraph',
        title: 'Paragraph',
        class: 'ck-heading_paragraph',
      },
      {
        model: 'heading1',
        view: 'h1',
        title: 'Heading 1',
        class: 'ck-heading_heading1',
      },
      {
        model: 'heading2',
        view: 'h2',
        title: 'Heading 2',
        class: 'ck-heading_heading2',
      },
      {
        model: 'heading3',
        view: 'h3',
        title: 'Heading 3',
        class: 'ck-heading_heading3',
      },
      {
        model: 'heading4',
        view: 'h4',
        title: 'Heading 4',
        class: 'ck-heading_heading4',
      },
      {
        model: 'heading5',
        view: 'h5',
        title: 'Heading 5',
        class: 'ck-heading_heading5',
      },
      {
        model: 'heading6',
        view: 'h6',
        title: 'Heading 6',
        class: 'ck-heading_heading6',
      },
    ],
  },
  //이미지 수정 설정
  image: {
	resizeOptions: [
	        {
	            name: 'resizeImage:original',
	            value: null,
	            icon: 'original'
	        },
	        {
	            name: 'resizeImage:custom',
	            value: 'custom',
	            icon: 'custom'
	        },
	        {
	            name: 'resizeImage:50',
	            value: '50',
	            icon: 'medium'
	        },
	        {
	            name: 'resizeImage:75',
	            value: '75',
	            icon: 'large'
	        }
	    ],
    toolbar: [
      'imageTextAlternative',
      '|',
      'imageStyle:inline',
      'imageStyle:wrapText',
      'imageStyle:breakText',
      '|',	  
	  'resizeImage:50',
	  'resizeImage:75'
    ],
  },
  // 파일 업로드 설정
  simpleUpload: {
	//파일을 저장할 서버의 주소를 입력
    uploadUrl: './upload',
  },
  //초기 값 설정
  initialData: '',
  //언어 설정
  language: 'ko',
  //링크 설정
  link: {
    addTargetToExternalLinks: true,
    defaultProtocol: 'https://',
    decorators: {
      toggleDownloadable: {
        mode: 'manual',
        label: 'Downloadable',
        attributes: {
          download: 'file',
        },
      },
    },
  },
  //처음 사용자 UI/UX 개선을 위한 내용
  placeholder: '내용을 작성해주세요.',
  translations: [translations],
};

 

 

이상 기본 설정을 마치고 다음에는 위에 설정한 내용을 토대로

이미지를 저장하고 출력하는 코드를 작성해보겠습니다.