[CKEditor 5] CKEditor 5 에디터 결과물에 커스텀 스타일 적용하기

🤔에디터에서 스타일을 적용했지만 적용되지 않는다?

에디터에서는 리스트, blockquotes, 이미지 정렬 등의 작업을 진행하고 저장을 했지만. 해당 html 코드를 보여줄때 저장한 버전과 다르게 나오는 문제가 있었다.

 

또한 작업할 디자인과 기본 스타일이 달라 기존 스타일 자체를 변경해줘야 하는 문제가 있었다.

문제가 있던 에디터의 출력

 

CKEditor 5를 통해 저장된 html 데이터에는 아래와 같이 blockquote태그로 잘 감싸져 있다.

데이터의 문제는 아니다.

올바르게 저장된 데이터

 

따라서 문제 해결 방법으로, 기존 CKEditor 5 css 를 직접 수정하여 프로젝트에 적용하는 방법이 좋을 것 같아 해당 방법을 찾아봤다.

💡content-style CSS 파일을 이용한 커스텀 CSS 적용법

https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html

위 링크는 CKEditor 5 에서 사용하는 css가 명세되어있다.

해당 파일을 만들어서 link 형식으로 index.html 파일에 임포트해준다면 해당 css가 적용된다.

특정 태그 className 에 'ck-content' 를 적어주면 해당 엘리먼트는 CKEditor 5 의 스타일을 따르게 된다.

해당 css가 적용된 파일

css 커스텀 예시

css 코드를 아래와 같이 커스텀하여

.ck-content h1 {
    font-size: 2rem;
}
.ck-content h2 {
    font-size: 1.5rem;
    padding-left: 20px;
}
.ck-content h3 {
    font-size: 1.2rem;
    padding-left: 40px;
}

 

아래와 같이 제목별로 패딩 효과를 줄 수 있다.