[JavaScript] CKEditor5 텍스트에디터 사용하기

https://ckeditor.com/

WYSIWYG HTML Editor with Collaborative Rich Text Editing

 

 

 

CKEditor란?

 

콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터이다.

일반적으로 게시판에 글을쓸때 쉽게 편집을 할 수 있도록 도와주는 툴이다.

 

만들기

 npm create-react-app react-board

 

app.js

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Review</h1>
      <div className='container'>
        <h2>제목</h2>
        <div>
          내용
        </div>
      </div>
      <div className='form-wrapper'>
        <input className="title-input" type='text' placeholder='제목' />
        <textarea className="text-area" placeholder='내용'></textarea>
      </div>
      <button className="submit-button">입력</button>
    </div>
  );
}

export default App;

 

 

 

app.css

.App {
  text-align: center;
}

.container {
  margin: 0 auto;
  width: 80%;
  border: 1px solid #333;
  padding: 10px 0 30px 0;
  border-radius: 5px;
  margin-bottom : 50px;
}

.form-wrapper{
  width: 80%;
  margin: 0 auto;
}

.title-input {
  width: 500px;
  height: 40px;
  margin: 10px;
}

.text-area {
  width: 80%;
  min-height: 500px;
}

.submit-button {
  width: 200px;
  height: 50px;
  font-size: 20px;
  padding: 20px;
  border: none;
  background: skyblue;
  border-radius: 5px;
}

 

 

 

위지위그에디터 ckeditor설치

ckeditor.com/ckeditor-5/demo/

CKEditor 5 demo - Rich Text Editor ready to use

클래식 설치

상단Documentation

왼쪽 가이드 중간 React component -> 메인 다운로드 링크 복사

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

 

이제 프로젝트에 컴포넌트를 임포트하고 사용하면 된다.

 

import CKEditor from 'ckeditor5-react';

 

 

터미널에서 설치하기

$ npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5

 

app.js 수정

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

function App() {
  return (
    <div className="App">
      <h1>Review</h1>
      <div className='container'>
        <h2>제목</h2>
        <div>
          내용
        </div>
      </div>
      <div className='form-wrapper'>
        <input className="title-input" type='text' placeholder='제목' />
        <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>
      <button className="submit-button">입력</button>
    </div>
  );
}

export default App;

 

 

app.css 수정

.App {
  text-align: center;
}

.container {
  margin: 0 auto;
  width: 80%;
  border: 1px solid #333;
  padding: 10px 0 30px 0;
  border-radius: 5px;
  margin-bottom : 50px;
}

.form-wrapper{
  width: 60%;
  margin: 0 auto;
}

.title-input {
  width: 500px;
  height: 40px;
  margin: 10px;
}

.submit-button {
  width: 200px;
  height: 50px;
  font-size: 20px;
  padding: 20px;
  border: none;
  background: indianred;
  border-radius: 5px;
  margin-top: 40px;
  vertical-align: middle;
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  min-height: 500px;
}