1. TinyMCE 에디터를 초기화합니다. 초기화하는 방법에는 여러 가지가 있지만, 간단한 예시로는 다음과 같습니다:

tinymce.init({
  selector: 'textarea',
  setup: function (editor) {
    editor.on('NodeChange', function (e) {
      // 에디터의 위치 정보를 업데이트합니다.
      updateCursorPosition(e.elementPath);
    });
  },
});

1. NodeChange 이벤트 리스너를 추가합니다. 이 이벤트는 에디터 내에서 노드(태그)가 변경될 때마다 발생합니다.

2. updateCursorPosition() 함수를 작성합니다. 이 함수는 에디터의 현재 커서 위치를 감지하고 해당 위치 정보를 표시해야 합니다.

function updateCursorPosition(elementPath) {
  // 에디터의 현재 커서 위치를 가져옵니다.
  var cursorPosition = elementPath.toString();
  
  // 위치 정보를 표시할 DOM 요소를 선택합니다.
  var positionElement = document.getElementById('cursor-position');
  
  // 위치 정보를 표시합니다.
  positionElement.textContent = cursorPosition;
}

1. 위치 정보를 표시할 DOM 요소를 HTML에 추가합니다. 이 예시에서는 <div> 요소를 사용하고 id를 "cursor-position"로 지정합니다:

<div id="cursor-position"></div>

위의 단계를 따르면 TinyMCE 텍스트 에디터에서 현재 위치 정보를 표시할 수 있습니다. 에디터의 위치가 변경될 때마다 NodeChange 이벤트가 발생하고, 이를 통해 updateCursorPosition() 함수가 호출되어 위치 정보를 업데이트합니다. 업데이트된 위치 정보는 HTML의 cursor-position 요소에 표시됩니다.