当前位置：首页 > news >正文

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

news 来源：原创 2025/5/17 9:41:26

这里以监听全屏事件为例

监听 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'));
      }
    }
  ]
});