tinyMCE 언어 변경하기 (tinymce-i18n 사용)

tinyMCE를 유료 구독하고 있다면 단순히 language 옵션을 변경해주기만 하면 됩니다.

유료 모델에서 제공하는 언어는 다음과 같습니다. (링크)

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  language: 'ko_KR'
});

 

본 포스팅에서는 유료 구독을 하지 않고 직접 번들링하여 사용할 때 언어 번경 방법을 살펴보겠습니다.

공식 페이지 가이드라인

먼저 공식 페이지에서 제공하는 가이드라인은 다음과 같습니다.

1. Download the language pack from the Tiny Community Language Packages download page.
2. Set the language option in your TinyMCE configuration to the language code, matching the filename on the language pack. For example: If the language pack has the filename sv_SE.js, then set language: 'sv_SE',
3. Confirm that the language has been set successfully by loading TinyMCE.

 

먼저 언어팩을 다운로드한 후, language 옵션과 language_url 옵션을 설정해주는 간단한 절차입니다. 그런데 지원해야 하는 언어가 많은 경우 각각의 언어를 다운로드하는 것이 상당히 번거롭습니다. 뿐만 아니라 언어팩은 커뮤니티 참여로 끊임없이 업데이트 되기 때문에, 이런 업데이트를 반영하기도 어렵습니다.

tinymce-i18n 사용

tinymce-i18n패키지를 사용하면 비교적 편리하게 언어를 관리할 수 있습니다. 먼저 npm을 사용해 tinymce-i18n을 설치해줍니다.

npm i tinymce-i18n

 

그리고 plugin을 import 하듯 import 해 줍니다. 공식 페이지의 예제를 수정해보면 다음과 같습니다. 

import { Editor } from '@tinymce/tinymce-react';

// importing the language packs
import 'tinymce-i18n/langs6/ko_KR'

export default function BundledEditor(props) {
  ...
}

tinymce-i18n 하위에 langs4, lnags5, langs6 으로 각 버전별 언어가 분리되어 있으니 필요한 것을 선택해 사용하시면 됩니다.

유의하실 점은 국가코드가 tinymce에서 사용하는 것과 다른 것이 몇 개 있습니다. 예를 들어 중국어 간체의 경우 tinymce는 zh-CN을 사용하는데, tinymce-i18n에는 zh-Hans를 사용합니다. github link의 파일명대로 import 하시면 됩니다.

 

다음으로는 공식 예제와 같이 tinymce.init 에서 langage 옵션에 국가코드를 넣어주시면 됩니다. 이때 사용하는 국가코드도 앞서와 같이 파일명에 적힌 코드를 사용하시면 됩니다.

국가코드를 설정하는 다른 방법

저는 language 옵션에 국가코드를 넣었는데도 제대로 언어가 설정되지 않는 버그가 있었습니다. 이에 대한 해결책으로 에디터가 로드됐을 때 국가 코드를 변경하도록 하는 코드를 넣었습니다. 

tinymce.init=({
   ...options,
   init_instance_callback: (editor) =>
      tinymce.util.I18n.setCode('ko_KR')
})

init_instance_callback를 사용하면 에디터 로딩 완료시 콜백을 등록할 수 있습니다. 저는 해당 함수 내에서 tinymce.util.I18n을 사용해서 언어를 수동으로 설정했습니다. 꼭 에러가 발생했을 때 뿐만 아니라 언어전환 등의 기능 구현에 사용할 수 있을 것 같습니다.