[CKEditor] 스프링 프로젝트에 CKEditor5 설치하기

우선 이전에 온라인 빌더를 활용해 다운받은 CKEditor5 라이브러리를 프로젝트에 옮겨야 한다. 

나는 root 아래 /assets/admin/libs/ 에 모든 자바스크립트 라이브러리를 모아뒀기때문에, CKEditor5도 동일한 위치에 넣었다.

 

에디터를 적용할 jsp에 사용할 스타일시트와 자바스크립트를 삽입한다. 

에디터가 들어갈 영역을 만든다. 

이전에 index.html에서 에디터를 활성화하는 스크립트를 옮긴다.

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		toolbar: {
			items: [
				'heading',
				'|',
				'fontFamily',
				'fontSize',
				'fontColor',
				'bold',
				'underline',
				'italic',
				'blockQuote',
				'specialCharacters',
				'|',
				'bulletedList',
				'numberedList',
				'indent',
				'outdent',
				'|',
				'insertTable',
				'mediaEmbed',
				'link',
				'imageUpload',
				'undo',
				'redo'
			]
		},
		language: 'ko',
		image: {
			toolbar: [
				'imageTextAlternative',
				'imageStyle:full',
				'imageStyle:side'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells',
				'tableCellProperties',
				'tableProperties'
			]
		},
		licenseKey: '',
	} )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( error => {
		console.error( 'Oops, something went wrong!' );
		console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
		
		console.error( error );
	} );

라이센스 키는 사실 뭔지 잘 모르겠다. 일단 이렇게 적용하고 화면을 띄워보자.

 

** 적용화면

내가 원하는 메뉴와 플러그인이 적용된 CKEditor5가 완성됐다! 

 

다음에는 여기서 작성한 글들을 DB에 저장하는 것을 만들겠다.