项目访问地址：Vue 3 CodeMirror 编辑器

2025-09-08 start:

集成json

end

技术栈：

效果：

源码地址：https://gitee.com/liu-haijin/vue3-editor

ng部署：

npm run build 打包

将dist.tar放到 /usr/local/nginx/html/editor （没有就创建）

tar -xvf dist.tar

配置ng配置文件vi /usr/local/nginx/conf/nginx.conf

复制一个server块，修改端口

使用./usr/local/nginx/sbin/nginx -s reload  重新加载ng

在浏览器中访问（注意防火墙）

安装使用

# 使用 pnpm 安装 CodeMirror 6

## 安装 pnpm

```bash
npm install -g pnpm
```

## 安装 CodeMirror 6 核心包（指定版本）

```bash
pnpm add @codemirror/state@^6.4.0 @codemirror/view@^6.23.0 @codemirror/commands@^6.3.0 @codemirror/language@^6.9.0
```

## 安装语言支持（指定版本）

```bash
# Java 语言支持
pnpm add @codemirror/lang-java@^6.0.2

# JavaScript 语言支持
pnpm add @codemirror/lang-javascript@^6.2.0

# HTML 语言支持
pnpm add @codemirror/lang-html@^6.4.0

# CSS 语言支持
pnpm add @codemirror/lang-css@^6.2.0

# JSON 语言支持
pnpm add @codemirror/lang-json@^6.0.0
```

## 安装主题（指定版本）

```bash
# 深色主题
pnpm add @codemirror/theme-one-dark@^6.1.0

# 其他主题
pnpm add @codemirror/theme-github@^6.1.0
```

## 安装扩展功能（指定版本）

```bash
# 自动完成
pnpm add @codemirror/autocomplete@^6.12.0

# 搜索功能
pnpm add @codemirror/search@^6.5.0

# 代码检查
pnpm add @codemirror/lint@^6.4.0
```

## Vue 3 Setup 使用示例

### 1. 创建 CodeEditor 组件

```vue
<template>
  <div>
    <div class="toolbar">
      <select v-model="selectedLanguage" @change="hj_handleLanguageChange">
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="html">HTML</option>
      </select>
      <select v-model="selectedTheme" @change="hj_handleThemeChange">
        <option value="light">浅色主题</option>
        <option value="dark">深色主题</option>
      </select>
    </div>
    <div ref="editorElement" class="editor"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { EditorView, keymap, highlightActiveLineGutter, lineNumbers, highlightActiveLine } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
import { foldGutter, indentOnInput, bracketMatching, foldKeymap } from '@codemirror/language'
import { java } from '@codemirror/lang-java'
import { javascript } from '@codemirror/lang-javascript'
import { html } from '@codemirror/lang-html'
import { oneDark } from '@codemirror/theme-one-dark'

// 响应式数据
const editorElement = ref(null)
const selectedLanguage = ref('java')
const selectedTheme = ref('dark')
let editor = null

// 获取语言支持
const hj_getLanguageSupport = (language) => {
  const languageMap = {
    java: java(),
    javascript: javascript(),
    html: html()
  }
  return languageMap[language] || java()
}

// 获取主题配置
const hj_getThemeConfig = (theme) => {
  return theme === 'dark' ? [oneDark] : []
}

// 获取基础扩展
const hj_getBasicExtensions = () => {
  return [
    lineNumbers(),
    highlightActiveLineGutter(),
    highlightActiveLine(),
    indentOnInput(),
    bracketMatching(),
    foldGutter(),
    history(),
    keymap.of([
      ...defaultKeymap,
      ...historyKeymap,
      ...foldKeymap
    ])
  ]
}

// 初始化编辑器
const hj_initEditor = () => {
  if (!editorElement.value) return

  const extensions = [
    ...hj_getBasicExtensions(),
    hj_getLanguageSupport(selectedLanguage.value),
    ...hj_getThemeConfig(selectedTheme.value)
  ]

  const startState = EditorState.create({
    doc: '// Java 代码示例\npublic class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, CodeMirror!");\n    }\n}',
    extensions
  })

  editor = new EditorView({
    state: startState,
    parent: editorElement.value
  })
}

// 处理语言切换
const hj_handleLanguageChange = () => {
  if (editor) {
    const currentContent = editor.state.doc.toString()
    editor.destroy()
    editor = null
    if (editorElement.value) {
      editorElement.value.innerHTML = ''
    }
    setTimeout(() => {
      hj_initEditor()
      if (editor && currentContent) {
        editor.dispatch({
          changes: {
            from: 0,
            to: editor.state.doc.length,
            insert: currentContent
          }
        })
      }
    }, 50)
  }
}

// 处理主题切换
const hj_handleThemeChange = () => {
  hj_handleLanguageChange() // 复用语言切换逻辑
}

// 生命周期
onMounted(() => {
  hj_initEditor()
})

onUnmounted(() => {
  if (editor) {
    editor.destroy()
  }
})
</script>

<style scoped>
.toolbar {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.toolbar select {
  margin-right: 10px;
  padding: 5px;
}

.editor {
  height: 400px;
  border: 1px solid #ddd;
}
</style>
```

### 2. 在父组件中使用

```vue
<template>
  <div>
    <h1>我的代码编辑器</h1>
    <CodeEditor />
  </div>
</template>

<script setup>
import CodeEditor from './components/CodeEditor.vue'
</script>
```

## 推荐版本

- @codemirror/state: ^6.4.0
- @codemirror/view: ^6.23.0
- @codemirror/commands: ^6.3.0
- @codemirror/language: ^6.9.0
- @codemirror/lang-java: ^6.0.2
- @codemirror/theme-one-dark: ^6.1.0