[CKEditor5+React] Troubleshooting

 

이번에는 project 진행하면서 발생했던 몇가지 이슈와 해결방법을 적으려고 합니다.

1. CKEditorError: ckeditor-duplicated-modules  관련

project를 진행하면서 정말 많이 본 지긋지긋 한 이슈입니다.

해당 이슈가 나타나는 원인은 딱 한가지 -> CKEditor에서 사용하는 node module이 중복되어 추가되었기 때문입니다.

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

One of the possible mistakes is trying to add a plugin in this way to an existing (bundled) editor build. Installing an existing build and then trying to add a plugin to it may not work if that plugin needs to import any of the source editor modules.

The reason why this method will not work is that dependencies of the added plugin may duplicate the code already bundled in the used editor build. In the best scenario, this is going to raise the overall code size. In the worst scenario, an application built this way may be unstable.

 

저는 하기와 같은 몇가지 상황엣서 해당 이슈가 발생했습니다.

(1). build된 editor를 project에 추가했을 때 발생.

editor module은 하기와 같이 source type과 build type이 있습니다.

source : @ckeditor/ckeditor5-editor-decoupled

build: @ckeditor/ckeditor5-build-decoupled-document

build type은 editor에 사용되는 모든 module를 include하여 빌드해 제공되는것입니다.

때문에 저희와 같이 editor source를 react project에 integrate 할 때에 build type을 선택하면 동일한 module이 2번 include 되면서 해당 이슈가 발생합니다.

**꼭 source type을 선택하여 다운로드 해야 합니다.**

 

(2). editor에서 dependancy로 사용하는 node module과 react project에 추가된 node module 버전이 다를 때 발생

저희 project 진행 중에 실제 발생했던 이슈인데 한참 헤맸던 생각이 나네요. ㅠㅠ

저희 project 시작할 때 ckeditor 버전은 18.0.0 이었습니다.

진행하다가 하기에 설명하겠지만 editor type을 classic에서 document로 변경하게 되었습니다.

그냥 생각없이 @ckeditor/ckeditor5-editor-decoupled 를 다운받았는데 그때부터 ckeditor-duplicated-modules 이슈가 발생하기 시작했습니다. 

무슨 원인인지 못 찾고 있다가 node_modules 폴더에서 ckeditor5-editor-decoupled 폴더에 가보니 node_modules 폴더가 있고 안에는 ckeditor5 core 관련 폴더들이 생성되어 있었습니다.

첨에는 build type을 다운받은것인가 해서 다시 source type을 다운받았는데 해당 dependancy들이 계속 생성되었습니다.

그러다가 package.json을 확인했더니 ckeditor5-editor-decoupled 버전이 22.0.0으로 올라가 있었고 저희 project는 package-lock.json 때문에 18.0.0을 계속 유지 하고 있었습니다.

package-lock.json을 삭제하고 최신으로 update후 @ckeditor/ckeditor5-editor-decoupled 를 다시 다운받으니 dependancy 폴더가 새롭게 생성되지 않았고 app도 정상적으로 빌드되었습니다.

** editor 버전을 꼭 확인하자 **

 

2. Material UI와 CKEditor 결합시 발생하는 이슈

저희는 Material UI 를 사용했고 CKEditor와 Material UI를 결합시 발생하는 문제들이 있었습니다.

Material UI: material-ui.com/

(1). CKEditor를 Material Modal(Popup) 에 추가했을 때 Edit Link 창을 수정할 수 없음.

Material Modal은 open 될때 default로 focus를 가져가게 됩니다.

Editor에서 Edit Link 버튼으로 창을 띄웠을 때 focus가 Material Modal에서 Edit Link 창으로 가지 않게 됩니다.

이를 해결하기 위해서는 Material Modal에 disableEnforceFocus 값을 true로 설정해야 합니다.

(2). CKEditor를 Material Modal(Popup)에 추가했을 때 table style toolbar가 보이지 않음

Material Modal은 z-index값을 가지고 있습니다.

table style toolbar도 z-index 값이 있는데 해당 값이 Material Modal의 z-index보다 작음으로 Modal 뒤에 그려지게 됩니다.

해당 이슈는 ckeditor css의 .ck-balloon-panel 의 z-index 값을 강제로 수정하면 됩니다.

.ck-balloon-panel {
  z-index: 20000 !important;
}

 

3. CKEditor CSS 관련 수정

ckeditor의 css를 overwrite 하는 방법으로 default style들을 변경할 수 있습니다.

• ck-content가 붙은 class는 viewer에 적용되는 css임.
• ck-editor가 붙은 class는 editor에 적용되는 css임.

(1). CKEditor의 default font가 너무 작음.

ck editor의 css를 overwrite 하면 됩니다.

정확한 방법인것 같지 않지만 다른 방법을 못 찾았습니다......

editor와 viewer에서 모두 default font size가 변경 되어야 하기 때문에 하기와 같이 2 class에서 font-size를 변경해야 합니다.

.ck-editor__editable {
  font-size: 20px;
}

.ck-content {
  word-break: break-all;
  font-size: 20px;
}

(2). CKEditor line 사이 간격을 좁히고 싶을 때

ckeditor5에서는 한개 line은 <p>로 생성되고 그 간격은 margin-block-start/end 값으로 결정됩니다.

때문에 하기와 같이 css를 변경하면 line 사이 간격이 좁혀집니다.

.ck-editor p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.ck-content p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

 

4. IE 에서 동작

저희가 개발하는 시스템은 IE를 지원하지 않고 IE에서 시스템 접속시 Chrome을 사용해라는 안내페이지가 나타나도록 하였습니다. 그런데 CKEditor를 포함하면 시스템이 IE에서 아예 동작을 하지 않았습니다.

확인하니 하기와 같이 CKEditor는 .js 파일외에 <script>로 생성되에 index.html에 삽입되고 있었습니다. 해당 script를 열어보면 Object.assign 함수를 사용하는 IE9에서 해당 함수를 인식하지 못해서 error가 발생하고 있었습니다.

일단 왜 .js 파일 밖에 생성되는지는 찾지 못했고(webpack 설정이 잘못된것 같은데......) 임시방편으로 polyfill의 힘을 빌었습니다.

project의 public 폴더 하위의 index.html에 하기와 같이 polyfill설정을 추가하였습니다.

    <script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign"></script>