Vue CKEditor 커서가 처음으로 이동하는 오류

CKEditor vue 버전 사용중 커서 이동 오류

오류 증상

Vue 2.x로 작성된 프론트엔드에서 CKEditor를 사용 중이다. (당연하게도) CKEditor 샘플 페이지에서 확인 시 오류가 없는데, 우리 프로젝트에서 에디터의 정렬이나 표 기능을 사용하면 커서가 내용의 맨 처음으로 이동하는 오류가 있다.

왼쪽이든 가운데든 텍스트 정렬 버튼을 눌러놓고 글자를 입력하면 입력한 글자가 내용의 맨 처음에 들어가게 된다.

해결

에디터 버전까지 바꿔보았지만 원인은 엉뚱한 데 있었다. 바로 모델 바인딩 시 .trim 수식어를 사용한 것.

<ckeditor v-model.trim="content"></ckeditor>

.trim 수식어를 이것을 지우니 거짓말처럼 해결되었다.

<ckeditor v-model="content"></ckeditor>

Vue 프레임워크의 이런 기능들은 놀랍도록 편리하지만, 간혹 이렇게 컴포넌트를 사용하며 값의 변경 시점을 제어할 수 없는 경우 엉뚱한 결과를 가져오기도 한다.

공부하자!