vue3实现markdown工具栏的点击事件监听

这里以监听全屏事件为例

监听 Vditor 编辑器的全屏事件

要监听 Vditor 编辑器的全屏事件，你可以使用 Vditor 提供的 API 和事件系统。以下是几种实现方法：

方法一：使用 Vditor 的 after 钩子函数

const vditor = new Vditor('editor', {
  after() {
    // 监听全屏事件
    vditor.vditor.toolbar.elements.fullscreen.addEventListener('click', () => {
      console.log('全屏状态变化');
      if (vditor.vditor.element.classList.contains('vditor--fullscreen')) {
        console.log('进入全屏模式');
      } else {
        console.log('退出全屏模式');
      }
    });
  }
});

 方法二：使用 MutationObserver 监听类变化

const vditor = new Vditor('editor', {
  after() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'class') {
          const isFullscreen = vditor.vditor.element.classList.contains('vditor--fullscreen');
          console.log(isFullscreen ? '进入全屏' : '退出全屏');
        }
      });
    });
    
    observer.observe(vditor.vditor.element, {
      attributes: true,
      attributeFilter: ['class']
    });
  }
});

方法三：自定义工具栏按钮事件

const vditor = new Vditor('editor', {
  toolbar: [
    {
      name: 'fullscreen',
      tip: '全屏',
      click() {
        vditor.toggleFullscreen();
        console.log('全屏状态:', vditor.vditor.element.classList.contains('vditor--fullscreen'));
      }
    }
  ]
});

 

注意事项

1. 确保在 after 回调函数中绑定事件，因为此时 DOM 元素已经初始化完成

2. Vditor 的全屏状态是通过添加/移除 vditor--fullscreen 类来实现的

3. 不同版本的 Vditor API 可能略有不同，请根据你使用的版本调整代码