스프링 프로젝트) 게시판 글쓰기 폼에 에디터 api 추가하기

내가 만든 폼은 평범한 textarea로 만든 폼이다.

글쓰기 폼에 티스토리 같은 위지윅 에디터를 삽입해보고 싶었다.

 

 

 

검색을 해보니 CKEditor가 가장 쉽고 간편해서 널리 사용되는 듯 했다.

 

 

CKEditor 5 | Powerful Framework with Modular Architecture

 

 

 

상단 메뉴에서 CKEditor 5 > Download 로 진입한다.

 

 

 

 

CKEditor 5 Classic 을 선택하고

CDN의 주소를 복사해서

 

글쓰기 폼의 상단 head 영역에 붙여넣기 한다.

 

<script src="https://cdn.ckeditor.com/ckeditor5/35.2.0/classic/ckeditor.js"></script>

 

 

js 폴더에 ckeditor.js 파일을 생성했다.

 

 

 

확장자 .js 까지 입력해주어야 한다.

 

 

 

 

문서 내부에 이 내용을 입력한다.

notice_content는 내가 지정한 textarea의 id 값이다

 

ClassicEditor
.create( document.querySelector( '#notice_content' ) )
.catch( error => {
    console.error( error );
} );

 

 

 

textarea 폼 아래에 ckeditor 문서를 불러오는 태그를 작성했다.

 

 

 

 

 

 

저장 후 새로고침 해 보았다.

성공!