tinymce 4에서 5까지는 상당히 시간이 걸렸던 것 같은데 최근에 6버전이 나왔다. 5가 나온지 3년만이다. 새로운 버전이 나온 걸 알았으니 바로 적용해주는게 좋겠다는 생각이 들었다. tinymce 관련 프로덕트들에 묵혀둔 보안 이슈들도 이참에 해결을 해야겠다는 생각이었다. Migrating from TinyMCE 5 to TinyMCE 6 | TinyMCE Documentation DomQuery 변경 중에서 가장 영향이 큰 부분이다. editor.$('#id').addClass("selected")와 같이 jQuery와 비슷한 방식의 dom처리가 가능했는데 이제 사용할 수 없다. editor.dom: DomUtils 을 사용해서 직접 html element에 접근해야한다. editor.dom.ad..

Tistory Editor는 처음엔 단순히 markdown editor가 있었으면 해서 만들었다가 조금씩 욕심이 생겨 에디터가 무려 3종류나 붙어있는 app이 되었다. markdown하나와 wysiwyg에디터 2개다. 그러고보니 Quill을 붙였을때 앱 버전이 0.2가 되었다. 그리고 Tinymce가 붙어 0.3이 되었다. tinymce는 처음 시작할 때는 문서도 엉망이고 불친절해서 욕도 좀 하곤 했는데 에디터 자체의 구조가 너무 좋아 참고 참아 하나하나 알아가보니 꽤나 괜찮은 결과물이 나온다. Quill은 시작이 아주 쉽고 몇몇 기능은 아주 뛰어나지만 확장성이 그리 좋진 못하고 delta라는 놈이 나의 발목을 잡았다. delta to html 이라는 모듈도 만들어서 해결해보려 노력했지만 완벽히 변환되지..

tinymce의 plugin을 또 하나 만들고 있다. 이전에 codeblock plugin을 만들땐 layer를 직접 만들었는데 이번엔 tinymce의 모듈을 써서 만들어보고 싶었다. 그래서 WindowManager.open의 파라미터를 확인해봤다. 내가 헛것을 보는건 아니겠지라는 생각이 들만큼 단촐한 설명이다. 'width/height/url etc' 이라고? 잠시, 아니 한참을 멍하니 있다가 소스코드를 보기로 했다. WindowManager니까 Window의 생성자 파라미터겠지 라고 생각했는데 그게 맞았다. 근데 단순히 넘겨주는 건 아니고 조금 조작을 한다. 그러니까 Window의 생성자와 다른 값을 파라미터로 받는다. 그럼 문서에 그걸 써줘야하는거 아냐? 부글부글. 조금 짜증이 났지만 아쉬운건 나니..

tinymce는 요새 프리미엄 구독으로 돈을 벌려고 해서 그런지 모르겠지만 좋은 플러그인들은 유료버전에만 제공한다. 물론 그들이 흙파먹고 살 순 없으니 당연한 일이라 생각이 들긴하지만 조금 아쉽긴하다. 필요한 기능이 있는데 그것만을 위해서 돈을 내기에는 좀 아까워서 직접 플러그인을 만들어보기로 했다. 플러그인 제작 공식 문서에는 아주 심플하게 써 있다. plugins에 등록하는 방법, 플러그인 코드를 로드하는 방법, 그리고 플러그인 매니저에 플러그인 코드를 등록하는 방법 이렇게 세가지를 적어뒀다. 앞의 두가지 방법은 사용법이니 결국 필요한 부분은 다음이다. tinymce.PluginManager.add('example', function(editor, url) { // Add a butto..