티스토리 뷰
ckeditor5는 오픈소스 에디터이자 모바일 및 PC 플랫폼에서 모두 사용이 가능한 라이브러리이다.
ckeditor5는 Vue, React, Angular들에게 최적화 되어 있는 느낌이 강한데 php에서도 충분히 사용할 수 있었다.
일반적으로 sripc src로 import하여 사용할 땐 문제가 발생하지 않았다.
하지만, 팝업을 구성하려고 할 때 문제가 발생했다.
결국 script src가 중복되어 2번 라이브러리를 불러와 javascript가 모두 깨져버렸다.
그리고 일부 기능도 작동하지 않았다.
먼저 해당 오류는 ckeditor.js를 2번 include해서 발생한 오류라고 한다.
index.html을 하나 생성하여 직접 script src를 2번 사용해보면 동일한 오류가 표시되는 것을 확인할 수 있었다.
ClaasicEditor.create() 함수는 2번 호출해도 문제가 발생하지 않았다.
문제가 발생한 상황을 간단히 설명하면
특정 버튼을 눌렀을 때 window.open이 아닌 ajax 또는 include_once를 이용하여 데이터 삽입이 가능한 폼(팝업)을 띄워놨는데
해당 팝업의 소스코드가 불러와질 때마다 ckeditor.js가 중첩으로 불러와져 계속 오류가 발생하는 것이었다.
(팝업의 소스코드 내부는 ckeditor.js를 불러오거나, textarea를 editor로 apply해주는 코드가 있었다)
하루 종일 시간낭비한 결과 끝내 오류를 해결했다.
에디터 라이브러리마다 차이가 존재하지만, ckeditor5는 최상단 페이지에서 script src를 통해 ckeditor.js를 불러왔어야 했다.
하지만 계속 소스문제인줄 알고, 팝업 부분, 또는 팝업을 가지고 있는 상위 영역에서 script src를 사용했다.
중요한 건 최상단페이지에서 라이브러리 파일들을 불러와야하는 것이다. (include_once를 하지 않는 페이지)
만약 페이지에 페이지가 포함되고 있는 상황(include_once를 사용하여 호출스택이 3단계 또는 4단계 이상)인 경우라면
1단계에서 srcipt src코드를 삽입하면 된다.
이렇게 또 하나의 오류 기록을 남긴다.