Skip to main content

맞춤법 검사기

Electron은 버전 8부터 크로미움의 맞춤법 검사기를 내장하고 있다. Windows와 Linux에서는 Hunspell 사전을 사용하며, macOS에서는 네이티브 맞춤법 검사기 API를 활용한다.

스펠체크 기능 활성화 방법​

Electron 9 이상 버전에서는 스펠체크 기능이 기본적으로 활성화되어 있다. Electron 8에서는 webPreferences에서 직접 활성화해야 한다.

const myWindow = new BrowserWindow({
  webPreferences: {
    spellcheck: true
  }
})

맞춤법 검사기 언어 설정 방법​

macOS에서는 네이티브 API를 사용하기 때문에 맞춤법 검사기의 언어를 직접 설정할 수 없다. 기본적으로 macOS의 네이티브 맞춤법 검사기는 사용 중인 언어를 자동으로 감지한다.

Windows와 Linux에서는 맞춤법 검사기의 언어를 설정하기 위해 몇 가지 Electron API를 사용할 수 있다.

// 맞춤법 검사기를 미국 영어와 프랑스어로 설정
myWindow.webContents.session.setSpellCheckerLanguages(['en-US', 'fr'])

// 사용 가능한 모든 언어 코드 배열
const possibleLanguages = myWindow.webContents.session.availableSpellCheckerLanguages

기본적으로 맞춤법 검사기는 현재 OS 로캘과 일치하는 언어를 활성화한다.

맞춤법 검사 결과를 컨텍스트 메뉴에 추가하는 방법​

모든 webContents 인스턴스에서 발생하는 context-menu 이벤트는 컨텍스트 메뉴를 생성하는 데 필요한 모든 정보를 제공한다. 이 정보를 활용해 컨텍스트 메뉴를 만드는 간단한 예제는 다음과 같다.

const { Menu, MenuItem } = require('electron')

myWindow.webContents.on('context-menu', (event, params) => {
  const menu = new Menu()

  // 각 맞춤법 제안을 메뉴에 추가
  for (const suggestion of params.dictionarySuggestions) {
    menu.append(new MenuItem({
      label: suggestion,
      click: () => myWindow.webContents.replaceMisspelling(suggestion)
    }))
  }

  // 사용자가 잘못된 단어를 사전에 추가할 수 있도록 허용
  if (params.misspelledWord) {
    menu.append(
      new MenuItem({
        label: 'Add to dictionary',
        click: () => myWindow.webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
      })
    )
  }

  menu.popup()
})

스펠체커가 Google 서비스를 사용하나요?​

스펠체커 자체는 사용자의 입력, 단어, 혹은 타이핑을 Google 서비스로 전송하지 않는다. 하지만 기본적으로 hunspell 사전 파일은 Google CDN에서 다운로드한다. 이를 피하고 싶다면 사전 파일을 다운로드할 대체 URL을 제공할 수 있다.

myWindow.webContents.session.setSpellCheckerDictionaryDownloadURL('https://example.com/dictionaries/')

사전 파일을 어디서 얻을 수 있고, 어떻게 호스팅해야 하는지에 대한 자세한 내용은 session.setSpellCheckerDictionaryDownloadURL 문서를 참고한다.