[이슈해결] CKEditor 5 View 스타일 적용

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

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

문제가 있던 에디터 출력 하지만 저장된 들여쓰기 데이터도 blockquote가 잘 적용되어 있다.

content-style 적용법

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

ckeditor에서 사용하는 css가 명세되어있다. 해당 파일을 만들어서 link 형식으로 index.html 파일에 임포트해준다면 해당 css가 적용된다.
특정 태그 className 에 'ck-content' 를 적어줘도 잘 작동한다.

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;
}

커스텀한 기능