tinymce는 요새 프리미엄 구독으로 돈을 벌려고 해서 그런지 모르겠지만 좋은 플러그인들은 유료버전에만 제공한다. 물론 그들이 흙파먹고 살 순 없으니 당연한 일이라 생각이 들긴하지만 조금 아쉽긴하다. 필요한 기능이 있는데 그것만을 위해서 돈을 내기에는 좀 아까워서 직접 플러그인을 만들어보기로 했다.
플러그인 제작
공식 문서에는 아주 심플하게 써 있다. plugins에 등록하는 방법, 플러그인 코드를 로드하는 방법, 그리고 플러그인 매니저에 플러그인 코드를 등록하는 방법 이렇게 세가지를 적어뒀다.
앞의 두가지 방법은 사용법이니 결국 필요한 부분은 다음이다.
tinymce.PluginManager.add('example', function(editor, url) {
// Add a button that opens a window
editor.addButton('example', {
text: 'My button',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
Yeoman을 사용한 제작
Yeoman generator를 사용하면 좀 더 쉽게 플러그인 설정을 할 수 있다. 물론 위 코드를 다 만들어주는 게 아니고 build만 하면 결과파일이 나오는 상태로 만들어준다. 게다가 개발 언어를 뭘로 할건지도 세팅해준다. (언어라 함은 ES5, ES6, Typescript 등을 말한다)
webpack-dev-server로 바로 테스트해볼 수 있도록 세팅도 해주니 이걸 사용하지 않을 이유가 없는 것 같다.
tinymce codeblock plugin
나는 뭘 하나 만들어보면서 방법을 익히기 때문에 이번에도 필요한 것을 하나 만드는 것을 목표로 했다. 그건 바로 codeblock 플러그인이다. 이미 codesample이란 플러그인이 있음에도 불구하고 이 플러그인을 만드는 이유는 codesample은 단순한 textarea로 코드를 편집해야하기 때문이다. 탭도 못쓰고 highlight도 안되는 곳에서 코드를 편집하는 것은 너무 귀찮은 일이다.
처음엔 codesample 플러그인을 고치려고 했지만 tinymce 기본 스킨에서 dialog 내부 element에 대해서 reset을 하는 바람에 codemirror 에디터의 style이 망가져서 도무지 사용할 수가 없었다. 그래서 결국 기능이 동일한 새로운 플러그인을 만들고 여기에 몇가지 확장된 기능을 넣기로 했다. 그런데 아쉽게도 dialog 같은 것은 안써서 전체적인 테마와 약간 다르게 보이긴 한다. 이건 어쩔 수 없다. ㅠ
다른 점은 직접 만든 dialog를 사용했다는 점, textarea대신 codemirror를 사용했다는 점, prizm.js대신 highlight.js를 사용했다는 점이다. 전체코드는 github에 공개했다. (이런 거엔 관심가지는 사람 없겠지 ㅠ)
