CKEditor에서 Plugin을 설치해도 반영이 안될 때가 있다.
typeerror: cannot read property 'getattribute' of null 와 같은 오류나
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated 와 같은 오류가 나온다.
이런 오류가 발생하는 이유는 CKEditor5에서는 Plugin을 설치한 후, 프로젝트 빌드와 상관없이 따로 빌드 과정을 거쳐야 해서 그렇다.
(npm run build로 빌드가 되지 않는다.)
아무튼 해결하고 싶다면 2가지의 방법이 있다.
본인은 블로그를 개발하면서 결국 1번째 방법을 쓰게 되었고
한글 문서가 많이 없길래 작은 도움이 되고자 글을 쓰게 됬다.
두 방법에 대해선 본인도 잘 모르기 때문에 정확하게 쓰지 않겠다.
1. 소스코드를 다운로드 받아 빌드적용한 후 node_modules안에 복붙하기
(여기 잘 나와있다. ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html)
위의 링크에선 ckeditor프로젝트를 clone해서 plugin을 적용하라고 했지만,
계속 변경이 있을 때마다 이렇게 해야한다는 압박때문에 진짜 귀찮다.
그래서 다른 방법을 찾아보았는데, CKEditor Online Builder 라는게 있었다.
(여기 참고 ckeditor.com/ckeditor-5/online-builder/)
입맛대로 골라 담아 zip파일을 다운로드 한 후,
1. zip파일을 압축해제 해서 build안에 있는 ckeditor.js파일을 node_modules/@ckeditor/ckeditor-build-classic/build안에 복붙한다.
2. editorConfig로 다음과 같이 속성으로 준다.
editorConfig: {
toolbar: {
items: [
'heading',
'|',
'fontSize',
'fontFamily',
'fontColor',
'fontBackgroundColor',
'imageInsert',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'removeFormat',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'indent',
'outdent',
'|',
'todoList',
'link',
'blockQuote',
'imageUpload',
'insertTable',
'mediaEmbed',
'|',
'undo',
'redo',
'CKFinder'
]
},
},
