CKEditor5实现Element Path插件元素点击选中功能求助

你当前的代码已经实现了元素路径的显示，但点击路径节点时无法选中对应元素，核心问题是没有关联路径节点与编辑器内的View元素，也未正确设置编辑器选区。以下是修改后的完整代码及关键说明：

import { Plugin } from 'ckeditor5/src/core';
import { Range, Selection } from 'ckeditor5/src/engine';

export default class ElementPathEditing extends Plugin {
  init() {
    const editor = this.editor;
    const editingView = editor.editing.view;

    editor.once('ready', () => {
      const pathElement = document.createElement('div');
      pathElement.classList.add('path-display');
      pathElement.textContent = 'body';

      const uiContainer = editor.ui.view.editable.element.parentNode;
      uiContainer.appendChild(pathElement);

      editor.editing.view.document.on('selectionChange', () => {
        const selection = editingView.document.selection;
        const anchor = selection.getFirstPosition();

        if (!anchor) return;

        // 收集路径元素的名称和对应的View元素对象（关键：存元素而非仅名称）
        let path = [];
        let currentElement = anchor.parent;
        while (currentElement) {
          path.unshift({
            name: currentElement.name === 'div' ? 'body' : currentElement.name,
            element: currentElement
          });
          currentElement = currentElement.parent;
        }

        // 清空路径容器，避免重复绑定事件
        pathElement.innerHTML = '';
        path.forEach((segment) => {
          const el = document.createElement('a');
          el.classList.add('path-segment');
          el.textContent = segment.name;
          el.href = 'javascript:void(0)';
          
          // 直接在创建时绑定点击事件，闭包保存当前segment的element
          el.addEventListener('click', (event) => {
            event.preventDefault();
            
            // 创建覆盖整个目标元素的Range
            const targetElement = segment.element;
            const range = Range.createIn(targetElement);
            
            // 设置编辑器选区
            const newSelection = new Selection();
            newSelection.setRange(range);
            editingView.document.selection = newSelection;
            
            // 聚焦编辑器，确保选中状态生效
            editingView.focus();
          });

          pathElement.appendChild(el);
          // 添加分隔符（可选）
          if (path.indexOf(segment) !== path.length - 1) {
            pathElement.appendChild(document.createTextNode(' > '));
          }
        });
      });
    });
  }
}

关键修改点说明： #

1. 存储View元素对象：
   原代码仅收集元素名称，无法区分同名称的多个元素（如多个<p>标签）。修改后在path数组中存储元素名称和对应的ViewElement对象，确保点击时能精准定位目标元素。

2. 正确创建并设置选区：
   使用CKEditor5引擎的Range.createIn()方法生成覆盖整个目标元素的范围，再通过Selection对象设置为编辑器当前选区，最后调用editingView.focus()确保选中状态生效。

3. 避免事件重复绑定：
   原代码每次selectionChange都会重新生成HTML并绑定点击事件，可能导致重复绑定。修改后先清空容器再重新创建元素并绑定事件，避免冗余事件。

4. 优化路径显示：
   直接在遍历路径时添加分隔符（如>），让路径显示更贴近CKEditor4的样式，同时将根节点的div直接替换为body，无需额外判断。

内容的提问来源于stack exchange，提问作者AkbarB