티스토리 뷰
오랜만에 업데이트를 하게 되었습니다. 이번 업데이트는 내부적으로 꽤나 큰 변화가 있습니다. 물론 변화가 느껴지지 않는다면 오히려 다행입니다. 자연스럽다는 뜻이니까요. rich 에디터를 사용하지 않는 경우에도 이번 변화가 느껴지지 않을 것입니다. rich 에디터의 변화이니까요.
Tinymce5
Rich에디터는 tinymce를 사용하여 만들어졌습니다. tinymce는 웹에디터 세계에서 가장 오래되고 많이 사용되는 에디터 중 하나입니다. 이 에디터에 최근 커다란 변화가 있었습니다. 바로 새로운 메이저 버전이 나온 것입니다. core 언어도 typescript로 모두 변경되면서 api 가 대폭 변경이 되었습니다.
이로 인해 Tistory Editor에 추가된 기능도 영향을 받게 되었습니다. 마이그레이션 문서에 소개된 부분과 문서에 없지만 변경된 것이 있어서 마이그레이션을 다 했다고 생각은 하지만 몇몇 부분은 부족함이 있을 것이라 생각합니다. 찾는대로 패치를 해야겠죠.
먼저 theme가 완전히 바뀌었습니다. modern에서 silver라는 이름의 theme로 변경되었습니다. 커스텀 UI를 위해서 오버라이드하던 css selector이름이 바뀌면서 전반적인 layout css가 바뀌었습니다. prefix도 mce- 에서 tox- 로 변경되었죠.
Icon을 사용하는 방법도 바뀌었습니다. 기존에는 <span class="mce-ico ico-media">같이 dom을 만들고 background-image로 아이콘을 표시했다면 v5에서는 모든 아이콘은 svg로 등록해서 사용하고 있습니다. 물론 addIcon을 한 string을 그대로 사용하니 이전과 같은 방식을 사용할 수도 있습니다. editor.ui.registry.addIcon('media', '<span class="mce-ico ico-media"></span>') 이렇게요. 물론 img를 넣을 수도 있겠습니다.
Button도 바뀌었습니다. editor에 addButton api는 제거되었고 editor.ui.registry를 통해서 등록합니다. 그리고 cmd, onClick, onPostRender등의 api도 변경되었습니다. onAction, onSetup 등으로 간소화되었지만 이를 통해서 모두 사용가능합니다.
플러그인을 제작하는 입장에서 가장 크게 느껴지는 부분인데 WindowManager가 완전히 바뀌었습니다. panel을 넣는 방법이라던가 button의 type, action처리 방법 등 완전히 새로워진 수준이라 소스코드를 모조리 살펴봐야했습니다. 물론 다 보진 못했지만 어느정도 사용가능한 수준은 된 것 같습니다. 그러니 이렇게 업데이트를 할 수 있었겠죠.
혹시 문제가 생기면 언제든 이슈 남겨주세요. 감사합니다.
- 다운로드: https://github.com/joostory/tistory-editor/releases/tag/v0.10.0