1. 자동 완성 데이터 준비: 사용자에게 제안할 단어 또는 구문의 데이터를 준비합니다. 이 데이터는 자바스크립트 객체 배열 형식으로 구성될 수 있으며, 각 항목에는 제안할 단어 또는 구문이 포함됩니다.

2. TinyMCE 초기화: 텍스트 에디터를 생성하는 JavaScript 코드에서 TinyMCE를 초기화합니다. 이 단계에서 자동 완성 기능을 구현할 수 있습니다. TinyMCE는 여러 가지 옵션을 제공하므로 자동 완성 기능을 위해 필요한 옵션을 설정해야 합니다.

예를 들어, 자동 완성 기능을 위해 ‘plugins’ 옵션에 ‘autocomplete’ 플러그인을 추가하고, ‘autocomplete_data’ 옵션에 자동 완성 데이터를 설정할 수 있습니다.

tinymce.init({
  selector: 'textarea',
  plugins: 'autocomplete',
  autocomplete_data: [
    {text: 'Apple', value: 'apple'},
    {text: 'Banana', value: 'banana'},
    {text: 'Cherry', value: 'cherry'}
  ]
});

1. 자동 완성 플러그인 설정: ‘autocomplete’ 플러그인은 자동 완성 기능을 제공합니다. 자동 완성 기능을 사용할 텍스트 영역에서 이 플러그인을 활성화해야 합니다.

예를 들어, 텍스트 영역의 CSS 클래스가 ‘autocomplete-enabled’라면, 다음과 같은 코드를 사용하여 플러그인을 활성화할 수 있습니다.

tinymce.init({
  selector: 'textarea.autocomplete-enabled',
  plugins: 'autocomplete',
  autocomplete_data: [
    {text: 'Apple', value: 'apple'},
    {text: 'Banana', value: 'banana'},
    {text: 'Cherry', value: 'cherry'}
  ]
});

이렇게 하면 TinyMCE 텍스트 에디터에서 자동 완성 기능을 사용할 수 있습니다. 사용자가 입력한 텍스트와 일치하는 자동 완성 데이터가 제안으로 표시되며, 사용자는 제안 중 하나를 선택하여 자동 완성할 수 있습니다.

더 자세한 내용은 TinyMCE 공식 문서(https://www.tiny.cloud/docs/)를 참조하시기 바랍니다.