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 可能略有不同，请根据你使用的版本调整代码