지금 하고 있는 개인프로젝트에 CKEditor5 에디터를 적용하려고 한다
CKEditor5는 Classic, Inline, Balloon, Balloon block, Decoupled document 5가지 타입이있다.
나는 Classic 타입으로 진행했기 때문에 아래 설명도 모두 Classic 타입을 기준으로 한다😉
📌1. CDN으로 적용하기
https://ckeditor.com/ckeditor-5/download/
위의 링크로 들어가서
1번 Choose your build에서 원하는 타입을 선택하고 2번 CDN을 복사한다.
그리고 <head>태그 또는 <body>태그안 아래쪽에 지정해준다.
그리고 CKEditor를 생성하는 스크립트를 삽입한다.
그러면 위의 사진같은 모양을 띄우게 된다
이제 인터넷을 열어보면 적용이 아주 잘 되는 걸 확인할 수 있다
놀랍게도 이게 정말 끝이다ㅎㅎ
🌟참고로 기본적텍스트 박스는 엔터를 치면 늘어나는 형식인데 만약 그게 싫다면 아래와 같이 설정하면 된다.
<style>
.ck.ck-editor{
max-width: 1000px;
}
.ck-editor__editable {
min-height: 400px;
}
</style>📌2. 다운로드 해서 적용하기
https://ckeditor.com/ckeditor-5/online-builder/
내가 원하는 플러그를 추가할 수 있어서 추천한다!
위에 링크를 클릭하면 보이는 첫번째 화면이다
나는 여기서 첫번째는 Classic을 선택했다
두번째 페이지에서는 원하는 플러그를 추가할수있다
글씨체, 글씨크기, 글자색, 글자바탕색상을 추가해줬다.
💥자동으로 CKBox가 추가되어있는데 이건 프리미엄이기 때문에 remove해야한다
3번째 페이지에 가면 위에 내가 추가한 플러그들이 나오는데 그걸 선택 및 위치를 지정해 준다
4번째 페이지에 가면 언어를 선택할수있다
당.연.히 한국어 선택
💥(만약 직접 다운로드 방법으로 하지 않고 1. CDN으로 적용 방법을 사용하면 기본영어로 나오기 때문에 따로 설정해 줘야 한다)
만약 CKBox가 추가되어 있으면 이렇게 나온다😐
마지막 이제 Start를 눌러준다
조금만 기다리면 금방 만들어진다.
다운을 받고 파일을 넣어준다
나는 resource안 static폴더에 넣어줬다
적용하는건 동일하다
아래가 CKEditor5를 적용해서 만든 나의 글쓰기 페이지다🤗
