[JS Libarary] ckeditor balloon block 사용법, 빠르게 알아보자

웹 프로젝트를 개발하다보면 editor가 필요할 때가 많다. 간단한 블로그나 게시판을 만들때도 글을 쓰기 위해 적절한 editor가 필요한데 이를 직접 개발해도 되지만 아무래도 여간 힘든일일것이다. 이번 포스팅에서는 웹 개발에서 자주 사용되는 ckeditor 중 balloon block editor 사용법에 대해서 알아보려고 한다.

 

ckeditor online builder

 

https://ckeditor.com/ckeditor-5/online-builder/

CKEditor 5 Online Builder | Create your own editor in 5 steps

ckeditor에서는 다양한 editor 종류 및 플러그인들을 설치할 수 있다. 하지만 일일히 cdn이나 파일로서 연동하는 것은 힘들것이다. 이 점을 해결하기 위해 ckeditor에서는 online builder를 제공하고 있다. 여기서 editor 종류 및 플러그인 등을 선택할 수 있다. 정말 편하게 설정할 수 있기 때문에 일일이 플러그인을 설치하기 보다 여기서 가져오는 것을 추천한다.

 

ckeditor의 종류는 5가지가 있지만 공식 홈페이지에 가면 해당 editor들의 차이점을 자세히 알 수 있다. 이 중 나는 balloon block editor를 사용하려고 한다.

 

balloon block editor 사용법

javascript

const container = angular.module("container", []);

    container.controller("container-controller", async ($scope,$timeout)=> {

      let ckeditor = await BalloonBlockEditor.create(document.querySelector("#editor"), {
        toolbar: 'bold italic strikethrough underline | code | outdent indent | link'.split(' '),
        blockToolbar: 'heading blockQuote alignment | bulletedList numberedList todoList | imageUpload insertTable mediaEmbed codeBlock | horizontalLine'.split(' '),
        simpleUpload: {
          uploadUrl: '/file/upload/post/'
        },
        title: {
          placeholder: '문서 제목을 입력해주세요'
        },
        placeholder: '문서 내용을 입력해주세요',
        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' }
          ]
        },
        removePlugins: ["MediaEmbedToolbar"],
        table: BalloonBlockEditor.defaultConfig.table
      });

      ckeditor.keystrokes.set('Ctrl+S', async (event, cancel) => {
        event.preventDefault();
        //=> 실행 함수 삽입
      }, { priority: 'high' });



    })

 

 

html

<div class="container" ng-app="container" ng-controller="container-controller">
  <div class="p-4">
    <div id="editor">
    </div>
  </div>
</div>

 

이런식으로 사용하면 되는데 ckeditor 객체 안에 파라미터로 다양한 설정이 가능하다. 설정에 관한 정보는 공식 document에 자세하게 나와있다.

 

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

Features - CKEditor 5 Documentation