Dev

tinymce 6

Joo 2022. 5. 1. 22:22

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.addClass(editor.dom.select('#id', node), 'selected') 이런 식이다. 아무래도 커스터마이징을 할때 가장 많이 쓰게 되는 기능인데 약간은 귀찮다.

어쩌면 이제 ie11지원을 드롭했으니 굳이 이런 래핑이 필요없다는 뜻일지도 모른다. 사실 대부분의 프론트엔드 분기는 ie를 위한 것이었다. 크롬이나 파이어폭스의 분기는 특수한 경우만 제외하면 없는거나 마찬가지다. editor.dom도 사실 쓰지 않아도 될 것 같은데 혹시나 몰라서 썼다. 저것마다 deprecated되면 그때 바꿔야지.

Plugin Option

tinymce를 init할때 option을 넘겨주는데 이때 plugin에서 사용할 값도 같이 넘겨주고 plugin에서 사용하는 경우가 있다. 

tinymce.init({
  codeblock_theme: 'material-darker',
  opengraph: {
  	fetch_handler: () => { ... }
  }
})

이런 식으로 설정하는데 사용할때는 editor.settings.codeblock_theme, editor.settings.opengraph.fetch_handler 와 같이 editor.settings에서 바로 빼서 사용했다. 그런데 이게 완전히 바뀌었다. 사용할 option을 등록하고 그 후에 사용할 수 있다.

editor.options.register("codeblock_theme", {
  processor: 'string',
  default: 'default'
})

const theme = editor.options.get("codeblock_theme")

options.register로 등록, options.get으로 빼서 쓴다. 편리한 점은 default 값을 설정해서 귀찮은 null 처리를 안해도 된다는 점이다. 다만 opengraph.fetch_handler와 같이 flat하지 않은 경우 processor를 object로 하고 settings를 쓸 때처럼 null 처리를 해줘야한다.

const DEFAULT_OPTIONS = {
  fetch_handler: () => {}
}

let options = null

export function registerOptions(editor) {
  const register = editor.options.register
  register('opengraph', {
    processor: 'object',
    default: DEFAULT_OPTIONS
  })
}

export function getOption(editor, key) {
  if (!options) {
    options = editor.options.get('opengraph')
  }
  return options[key] || DEFAULT_OPTIONS[key]
}

안타깝게도 이 부분에 대해선 별다른 가이드문서가 없다. 알아서 찾아서 해결해야한다. Create a plugin for TinyMCE | TinyMCE Documentation 에는 간단한 생성 예제만 있다. editor.options는 EditorOptions다. tinymce.EditorOptions | TinyMCE Documentation 를 참고해서 적절히 사용해보면 된다. 유료화를 하는 상황에서 너무 자세한 가이드 공개는 자신들에게 좋지 않다고 생각한 것 같다.

다른 부분을 별로 사용하지 않아서 이 정도이지 만약 좀 더 많은 기능을 사용했다면 그만큼 더 많은 부분을 수정해야할 것 같다. 플러그인 2개와 에디터 내부 플러그인 하나를 수정했다. 아! 그리고 플러그인 없어진 것이 몇개 있고 이름 바뀐 것이 좀 있었다. style도 조금 바뀌고. 뭐 그런건 차차 더 알아보기로 하자.

그러고보니 tinymce로 만들던 keditor는 어떻게 되었는지 문득 궁금하다. 아직 4버전을 쓰고 있을텐데... 언젠간 이걸 버리고 자체적으로 개발을 할지도 모르겠다.

반응형