彻底解决！如何在md-editor-v3中完全禁用默认自动补全功能

彻底解决！如何在md-editor-v3中完全禁用默认自动补全功能

你是否在使用md-editor-v3时被默认弹出的自动补全提示困扰？输入代码时频繁出现的markdown语法建议是否打乱了你的写作节奏？本文将系统讲解三种禁用自动补全的方案，从简单配置到深度定制，帮你彻底掌控编辑器行为。

自动补全功能工作原理

md-editor-v3基于CodeMirror 6构建，其自动补全系统通过@codemirror/autocomplete插件实现。核心逻辑位于autocompletion.ts文件中：

// 核心补全逻辑实现
return autocompletion({
  override: completions ? [defaultCompletion, ...completions] : [defaultCompletion]
});

默认情况下，编辑器会加载包含20+种markdown语法的补全源（标题、列表、代码块、表格等），当用户输入特定字符时触发提示。补全项定义示例：

// 标题补全定义
['h2', 'h3', 'h4', 'h5', 'h6'].map((key, index) => {
  const label = new Array(index + 2).fill('#').join('');
  return {
    label,
    type: 'text',
    apply: getApply(label)
  };
})

方案一：通过组件属性快速禁用（推荐）

md-editor-v3在v3.6.0+版本中提供了completions属性，允许自定义补全源。通过传递空数组可直接覆盖默认补全：

<template>
  <MdEditor 
    v-model="content"
    :completions="[]"  <!-- 传入空数组禁用所有补全 -->
  />
</template>

<script setup>
import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const content = ref('# 编辑器内容');
</script>

原理剖析：当completions属性不为空时，自动补全系统会执行：

override: [defaultCompletion, ...completions]  // 合并默认与用户补全

传入空数组[]会使表达式变为[defaultCompletion, ...[]]，但由于CodeMirror的override机制，实际效果是完全替换而非合并，从而清除所有补全源。

方案二：深度配置CodeMirror扩展

对于需要更精细控制的场景，可以通过自定义CodeMirror扩展实现禁用：

<template>
  <MdEditor 
    v-model="content"
    :extensions="customExtensions"
  />
</template>

<script setup>
import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { EditorView } from '@codemirror/view';

const content = ref('# 编辑器内容');

// 自定义扩展 - 移除自动补全
const customExtensions = [
  // 保留其他必要扩展，仅移除autocompletion
  EditorView.lineWrapping,
  // ...其他扩展
];
</script>

关键说明：此方案需要了解编辑器默认加载的扩展列表，确保移除autocompletion的同时保留其他核心功能（如行包裹、语法高亮等）。建议通过查看codemirror/index.ts中的扩展配置获取完整列表。

方案三：修改源码彻底移除（不推荐）

如果必须从根本上移除自动补全功能（不推荐，影响升级），可修改源码：

1. 定位文件：packages/MdEditor/layouts/Content/codemirror/index.ts
2. 注释或删除自动补全相关代码：

// 删除或注释以下行
- import createAutocompletion from './autocompletion';
- import { completionKeymap } from '@codemirror/autocomplete';

// 在扩展配置中移除
extensions: [
  // ...其他扩展
- createAutocompletion(props.completions),
- keymap.of(completionKeymap)
]

风险提示：此方法会导致后续版本升级困难，且可能影响依赖自动补全的其他功能。

验证自动补全是否已禁用

完成配置后，可通过以下步骤验证：

1. 输入# 观察是否出现标题补全提示
2. 输入- [ ] 观察是否出现任务列表补全
3. 输入` 观察是否出现代码块补全

若以上场景均无弹出提示，则说明禁用成功。

常见问题解决

Q: 配置后仍有部分补全提示？

A: 检查是否同时使用了completions属性和自定义扩展，两者冲突时以扩展配置为准。

Q: 禁用后如何重新启用特定补全？

A: 可传入包含特定补全源的数组，例如只保留代码块补全：

completions: [
  (context) => {
    // 仅提供代码块补全逻辑
    const word = context.matchBefore(/^`+/);
    if (!word) return null;
    return {
      from: word.from,
      options: [{ label: '```', type: 'text' }]
    };
  }
]

最佳实践总结

方案	实现难度	灵活性	升级友好性	适用场景
属性配置	⭐	⭐⭐⭐	⭐⭐⭐	大多数场景
自定义扩展	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐	需要精细控制
修改源码	⭐⭐	⭐	⭐	特殊需求场景

建议优先使用方案一，通过completions={[]}简单配置即可满足绝大多数需求。对于高级用户，推荐方案二，在保留升级能力的同时获得最大灵活性。

通过本文介绍的方法，你已经完全掌握了md-editor-v3自动补全功能的控制方式。根据实际需求选择合适的方案，打造最适合自己的编辑环境。如有其他问题，欢迎在评论区留言讨论！

（点赞+收藏+关注，获取更多md-editor-v3高级使用技巧）