CKEditor5 연동

이번 중간프로젝트에서 CKEditor 를 연동하지 않았지만

추후 추가할 수 있기 때문에 공부해본다.

 

우선 아래에 CKEditor공식 사이트에서 지원하는 CDN을 추가해줍시다

https://ckeditor.com/ckeditor-5/download/#cdn

CKEditor 5 - Download Latest Version

 

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

 

 

CDN이 추가되었다면 Script 태그에 type 속성 Importmap을 활용하여

변수 이름을 지정하고 CDN 파일의 URL을 매칭 시켜줍니다.

<script type="importmap">
{
	"imports": {
		"매칭할 변수명": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
		"매칭한 변수명/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/"
	}
}
</script>

 

URL 매칭이 완료되었다면 type 속성에 module을 사용해서 CKEditor의 메뉴바를 구성하고 작성할 공간을 부여해줍시다.

<script type="module">
//사용할 플러그인들을 인포트해줍니다.
import {
	ClassicEditor,
	Essentials,
	Paragraph,
	Bold,
	Italic,
	Font
} 

from 'CKtest';
ClassicEditor.create( document.querySelector( '#editor' ), {
	//메뉴를 구성할때 사용할 플러그인 선언
    plugins: [ 
			Essentials, 
			Paragraph, 
			Bold, 
			Italic,
			Font 
	],
    //메뉴 생성
	toolbar: {
		items: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
		],
		shouldNotGroupWhenFull: true
	},
    //UI + 내용 사용할 언어 선언
	language:{ 
		ui: 'KR',
		content: 'KR'
	}
})
.then( editor => {
	window.editor = editor;
})
.catch( error => {
	console.error( error );
});
</script>