[React] React editor 적용하기 - CKEditor

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/react.html

React component - CKEditor 5 Documentation

 

프로젝트 중 안에 에디터로 글 쓸 수 있는 게 필요하여 

에디터를 찾아보는데 CKEditor 가 있어 사용하게 되었다

 

적용 과정 정리한다.

 

위 페이지를 들어가면  아래처럼 나오는데 React component로 들어가면 설치하는 

명령어가 나온다

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

 

터미널에 입력하고 설치를 진행한다.

 

그리고 그 아래 상자를 보면

사용하는 예시가 작성되어 있다. 아래처럼 되어 있는데 

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    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 } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default App;

 

보면 위에서 먼저 import를 해주는건 이렇게 두 가지를 해주도록 한다.

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

 

그리고 원하는 위치에 <CKEditor / > 태그로 넣어주며 작성해주면 된다. 

                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    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 } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />