[javascript] TinyMCE에서 텍스트 에디터에서 특정 단어 또는 구를 하이라이트 표시하는 방법은?
// Highlight specified word or phrase in TinyMCE editor
function highlightWord(editor, word) {
  const text = editor.getContent();
  const highlightedText = `<span style="background-color:yellow">${word}</span>`;
  const highlightedContent = text.replace(new RegExp(word, 'gi'), highlightedText);
  
  editor.setContent(highlightedContent);
}

// Initialize TinyMCE editor
tinymce.init({
  selector: '#myEditor',
  plugins: 'paste',
  init_instance_callback: function(editor) {
    // Call highlightWord() function when editor is ready
    highlightWord(editor, 'example');
  }
});

위의 코드에서는 highlightWord() 함수를 사용하여 TinyMCE 에디터에서 특정 단어 또는 구를 하이라이트로 표시합니다. 이 함수는 editor.getContent()를 사용하여 에디터의 현재 내용을 가져온 다음, String.replace() 메소드를 사용하여 해당 단어 또는 구를 하이라이트 된 텍스트로 대체합니다. 마지막으로, editor.setContent()를 사용하여 하이라이트 된 내용을 에디터에 다시 설정합니다.

위의 예제 코드에서는 highlightWord() 함수를 에디터가 준비된 후에 호출하도록 init_instance_callback 콜백을 사용합니다. 이는 TinyMCE 에디터가 초기화되면 해당 단어를 하이라이트하는 데 사용됩니다.

텍스트 에디터에서 특정 단어 또는 구를 하이라이트로 표시하는 예제입니다. 필요한 경우 스타일을 사용자 정의할 수 있으며, background-color 속성을 변경하여 원하는 하이라이트 색상을 지정할 수 있습니다.

참고문헌: