拒绝重复造轮子！vue-codemirror 助你快速集成代码编辑器

最新推荐文章于 2025-10-25 10:17:35 发布

原创最新推荐文章于 2025-10-25 10:17:35 发布 · 724 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #编辑器 #前端 #CodeMirror

嘿，前端小伙伴！你需要的代码编辑器来了

你是否在Vue项目中需要一个漂亮又好用的代码编辑器？手动写一个太麻烦？今天给你推荐一个超好用的插件——vue-codemirror，让你分分钟搞定代码编辑功能！

什么是vue-codemirror？

简单说，vue-codemirror是基于CodeMirror 6的Vue 3组件，它能让你在Vue项目中轻松集成一个功能强大的代码编辑器，支持：

语法高亮（支持多种编程语言）
主题切换（亮/暗主题等）
代码折叠、行号显示
快捷键支持
实时内容绑定

⚠️ 重要提示：当前版本（v5/v6）只支持Vue 3，不兼容Vue 2！如果你用Vue 2，需要去看旧版（vue-codemirror@4.x）。

手把手教你安装

第一步，安装肯定少不了。打开你的终端，输入下面的命令：

如果你用yarn：

yarn add codemirror vue-codemirror

如果用npm：

npm install codemirror vue-codemirror --save

安装额外的语言和主题

核心包只是基础，比如你想编辑JavaScript代码，还得装对应的语言包：

# 安装JavaScript语言支持
yarn add @codemirror/lang-javascript

# 安装JSON语言支持（如果需要）
yarn add @codemirror/lang-json

想换个好看的主题？安排！比如这个One Dark主题（类似VS Code的暗黑主题）：

yarn add @codemirror/theme-one-dark

记住，需要什么语言或主题，就装对应的包，别漏啦！

两种使用方式，任你选

方式一：本地组件引入（推荐单个组件使用）

在你的Vue文件里，先引入组件和需要的扩展：

// 引入组件
import { Codemirror } from 'vue-codemirror'
// 引入JavaScript语言支持
import { javascript } from '@codemirror/lang-javascript'
// 引入One Dark主题
import { oneDark } from '@codemirror/theme-one-dark'

然后在模板里这样写：

<template>
  <div class="editor-container">
    <h3>我的第一个代码编辑器</h3>
    <!-- codemirror组件 -->
    <codemirror
      v-model="code"  <!-- 双向绑定代码内容 -->
      placeholder="写点JavaScript代码吧..."  <!-- 空内容时的提示文字 -->
      :style="{ height: '400px', border: '1px solid #ccc' }"  <!-- 设置高度和边框 -->
      :extensions="[javascript(), oneDark]"  <!-- 启用JS语言支持和暗黑主题 -->
      @change="handleCodeChange"  <!-- 内容变化时触发 -->
    />
  </div>
</template>

脚本部分别忘了定义code变量和事件处理：

import { ref } from 'vue'

export default {
  components: { 
    Codemirror  // 注册组件
  },
  setup() {
    // 初始代码内容
    const code = ref(`// 这是vue-codemirror生成的编辑器
console.log('Hello, 前端开发者！')
function add(a, b) {
  return a + b
}
console.log('1+2=', add(1, 2))`)
    
    // 监听内容变化
    const handleCodeChange = (value) => {
      console.log('代码内容：', value)
      // 这里可以做保存、实时预览等操作
    }
    
    return { 
      code, 
      handleCodeChange 
    }
  }
}

这样，一个带语法高亮、暗黑主题的JS编辑器就出来啦！效果如下（想象一下）：

输入JS代码会自动高亮关键字
行号自动显示
支持Tab缩进（默认2个空格）
内容变化时会打印到控制台

方式二：全局组件注册（适合多个组件使用）

如果你的项目很多地方都需要用编辑器，全局注册更方便。在main.js（或main.ts）里：

import { createApp } from 'vue'
import App from './App.vue'
// 引入基础设置（包含行号、折叠等基础功能）
import { basicSetup } from 'codemirror'
// 引入vue-codemirror
import VueCodemirror from 'vue-codemirror'

const app = createApp(App)

// 全局注册
app.use(VueCodemirror, {
  // 全局默认配置
  autofocus: true,  // 默认自动聚焦
  indentWithTab: true,  // 允许用Tab缩进
  tabSize: 2,  // Tab缩进大小
  placeholder: '请输入代码...',  // 默认提示文字
  extensions: [basicSetup]  // 加载基础功能
})

app.mount('#app')

之后在任何组件里直接用，不用再引入：

<template>
  <codemirror v-model="htmlCode" :extensions="[html()]"/>
</template>

核心配置详解

extensions（扩展）—— 最重要的配置

extensions决定了编辑器的功能，比如语言、主题、额外功能等。你可以把它理解为“插件集合”。

比如同时启用多种功能：

import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
import { lineNumbers } from '@codemirror/view'  // 行号显示

// 组合多个扩展
const extensions = [
  javascript(),  // JS语言支持
  oneDark,       // 暗黑主题
  lineNumbers()  // 显示行号（如果基础设置里没有）
]

常用属性（Props）

属性名	作用	示例
v-model	双向绑定代码内容	`v-model="code"`
placeholder	空内容时的提示文字	`placeholder="请输入代码"`
:style	设置编辑器样式（必须设置高度）	`:style="{ height: '400px' }"`
autofocus	加载后自动聚焦	`:autofocus="true"`
disabled	禁用编辑	`:disabled="isDisabled"`
tabSize	Tab缩进空格数	`:tabSize="4"`

常用事件（Events）

事件名	触发时机	回调参数
@change	内容变化时	(value: string) → 最新代码内容
@focus	编辑器聚焦时	-
@blur	编辑器失焦时	-
@ready	编辑器初始化完成时	(view: EditorView) → 编辑器实例

例如，获取编辑器实例（用于高级操作）：

<codemirror 
  v-model="code"
  @ready="handleReady"
/>

<script>
const handleReady = (payload) => {
  // 获取编辑器实例
  const editorView = payload.view
  console.log('编辑器已准备好', editorView)
  // 可以调用CodeMirror的API，比如获取光标位置
}
</script>