Vditor 工具栏按钮在 <form> 中会触发表单提交

[pengqian089]

编辑模式

• wysiwyg 所见即所得模式
• ir 即时渲染模式
• sv 分屏编辑预览模式

描述问题

编辑器的工具栏都是 <button> ，但没有使用具体语义，如果编辑器在表单 <form> 中，点击工具栏的的任何一项会触发表单提交。

因为在 <form> 标签中所有没有指定类型的按钮都是 <button type="submit" /> 提交按钮。

期待的结果

只是普通的按钮点击，而不是提交表单。

截屏或录像

版本信息

• 版本：3.11.2
• 操作系统：WIndows 11
• 浏览器：Firefox 146.0.1

[pengqian089]

临时解决办法：

new Vditor(elementId, {
    // other ...
    after: () => {
        const toolbar = element.querySelector('.vditor-toolbar');
        if (toolbar) {
            const buttons = toolbar.querySelectorAll('button:not([type])');
            buttons.forEach(button => {
                button.setAttribute('type', 'button');
            });
        }
    }
});