CKeditor5 커스텀빌드

설치 환경 : Window10, laravel6.4, ckeditor5

 

신규라라벨 프로젝트에 CKeditor5를 붙이려고 한다.

라라벨 프로젝트와 ckeditor전용 프로젝트 2개가 필요하다.

 

먼저 라라벨 신규 프로젝트를 생성하고 composer와 npm을 순서대로 설치한다.

* 기존 라라벨 프로젝트가 있다면 이 순서는 건너뛰어도 된다.

laravel new editor_test

composer install

npm install

 

ckeditor5를 커스텀하게 사용하기 위해 기본 ckeditor5 git clone을 한다.

해당 디렉토리안으로 이동하여 npm을 설치한다.

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

cd ckeditor5-build_classic

npm install

 

필요한 플러그인들을 설치한다.

ex) horizontal-line플러그인 설치

npm install --save @ckeditor/ckeditor5-horizontal-line

src/ckeditor.js 파일에서 플러그인 추가

ClassicEditor.builtinPlugins = [
	Alignment,
	Essentials,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	BlockQuote,
	CKFinder,
	EasyImage,
	Font,
	Heading,
	HorizontalLine,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	Link,
	List,
	MediaEmbed,
	Paragraph,
	PasteFromOffice,
	SimpleButton,
	Table,
	TableToolbar
];

 

yarn으로 환경설정파일에서 설정한 내용으로 빌드를 한다.

yarn run build

빌드 후 build디렉토리의 ckeditor.js가 수정된다.

해당 파일을 복사하여 라라벨 프로젝트에 js디렉토리 아래에

신규 js파일을 생성하고 복사한 내용을 붙여넣는다.

 

라라벨 프로젝트 안에서 npm을 실행한다.

npm run dev

 

에디터가 붙어있는 페이지를 새로고침시

'캐시지우기 및 강력새로고침'으로 페이지를 리프레시시킨다.