vditor 4.0.1 的实例上没有 setMode，运行中换编辑模式只能先把内容取出来、销毁、再用新 mode 重新初始化。我在 Windows 上装完验证了一遍，引入 dist 两个文件，编辑器 2.04 秒渲染出来，三种模式分别初始化都正常。但调 window.__vd.setMode('wysiwyg') 时，控制台直接报 window.__vd.setMode is not a function。

它是浏览器端的 Markdown 编辑器，不需要构建步骤，一个样式表加一个脚本就能用。

怎么装，装了什么

npm init -y
npm install vditor

从敲命令到装完 13 秒，added 2 packages，装到的是 vditor 4.0.1。

node_modules 里 vditor 占 24MB，里面除了 dist 还有 src 和 README。唯一直接依赖是 diff-match-patch ^1.0.5。

真正的入口只有两个文件：index.min.js 292KB，index.css 48KB。

怎么引入

<link rel="stylesheet" href="node_modules/vditor/dist/index.css">
<script src="node_modules/vditor/dist/index.min.js"></script>

然后 new Vditor('容器id', { value: md, height: 520, mode: 'ir' })。

起本地 http 服务打开，初始化 2.04 秒，从打开页面到能打字 2.58 秒。

控制台只有一条报错，是 favicon.ico 404，浏览器自动请求的，跟 vditor 无关。注意全程都是通过 http 服务访问，没试过用 file:// 直接双击打开。

三种模式差别在哪

模式表现
ir即时渲染，编辑区左侧会灰着显示 H1、H2 这类标记
wysiwyg所见即所得，看不到源码标记
sv分屏，左边写 Markdown 源码，右边同步预览

三种模式在初始化时指定都正常。sv 的预览区顶部还有 Desktop、Tablet、Mobile 三个宽度切换，量移动端排版挺方便。

为什么点按钮切不了模式

我先试的就是运行中直接调方法：

window.__vd.setMode('wysiwyg')

报 window.__vd.setMode is not a function。

去 dist/index.min.js 里搜 setMode、changeMode、switchMode，三个词都是 0 个匹配。

页面上点我加的那个按钮，只会让按钮变高亮，编辑区一点没变，三个模式都切不过去。

正确的切换方式

用 Object.getOwnPropertyNames 沿原型链遍历 window.__vd，拿到 36 个属性名。去掉 constructor 和 vditor 这两个非方法项，剩下 34 个都是可调用的方法。

里面能读模式的是 getCurrentMode，动内容的是 getValue 和 setValue，重建靠 destroy 加 init。换模式这件事，得自己做。

const val = window.__vd.getValue();
window.__vd.destroy();
document.getElementById('vditor').innerHTML = '';
window.__vd = new Vditor('vditor', { value: val, mode: 'sv' });

重建之后 getCurrentMode() 返回 sv，.vditor-sv 可见、.vditor-ir 隐藏，内容也没丢。

常见问题

为什么文档里说的 setMode 用不了

4.0.1 版本里确实没有这个方法。可能是旧版本有、后来移除了，也可能文档对应的是别的版本。以实际安装的包为准：搜不到就是没有。

切换模式会丢内容吗

按上面的写法不会。关键是重建前先 getValue() 把内容取出来，再传给新实例。

能直接 file:// 打开吗

没测。全程都通过本地 http 服务访问，双击 html 文件那种方式没有验证。

24MB 是不是太大了

分布里大部分是图标、表情和语法高亮资源。真正要加载的入口只有 292KB 的 js 和 48KB 的 css，实际页面不会等整包。

适合谁

适合要在网页里嵌一个 Markdown 编辑器的场景。上手时这三点最容易被忽略。

  • 模式在初始化时就定下来，别指望运行时切
  • 真要切，就按 destroy 加重建这套来，记得先存内容
  • 只引 dist 里的 js 和 css，别把整个 src 拖进去

如果你只需要把 Markdown 渲染成 HTML，用更轻的解析库就够，不必引入完整编辑器。