CodeMirror 是一个强大的在线代码编辑器，广泛用于网页开发中，为用户提供类似桌面IDE的代码编辑体验。将 CodeMirror 无缝集成到前端框架（如 React、Vue 或 Angular）中，可以极大地扩展应用程序的功能。以下是如何将 CodeMirror 与这些框架结合的实战指南：

1. 准备工作

在开始之前，请确保您的项目中已经安装了 Node.js 和 npm。您可以通过 npm init 初始化项目，然后根据需要安装框架（如 React、Vue 或 Angular）。

2. 安装 CodeMirror

在项目目录中，使用 npm 安装 CodeMirror：

npm install codemirror  

3. 与 React 集成

a) 创建 CodeMirror 组件

在 src 目录下创建一个新的文件 CodeMirrorEditor.js。编写如下代码，将 CodeMirror 封装成一个 React 组件：

import React, { useEffect, useRef } from 'react';  
import CodeMirror from 'codemirror';  
import 'codemirror/lib/codemirror.css'; // 基本样式  
import 'codemirror/mode/javascript/javascript'; // JavaScript 语言支持  
const CodeMirrorEditor = ({ value, onChange }) => {  
  const editorRef = useRef(null);  
  useEffect(() => {  
    const editor = CodeMirror(editorRef.current, {  
      value,  
      mode: 'javascript',  
      lineNumbers: true,  
    });  
    editor.on('change', () => {  
      onChange(editor.getValue());  
    });  
  }, []);  
  return <div ref={editorRef}></div>;  
};  
export default CodeMirrorEditor;  

b) 在应用中使用组件

在 App.js 中使用该组件：

import React, { useState } from 'react';  
import CodeMirrorEditor from './CodeMirrorEditor';  
function App() {  
  const [code, setCode] = useState('// 在这里输入代码');  
  return (  
    <div>  
      <h1>CodeMirror 与 React 集成</h1>  
      <CodeMirrorEditor value={code} onChange={setCode} />  
      <pre>{code}</pre>  
    </div>  
  );  
}  
export default App;  

4. 与 Vue 集成

a) 创建 CodeMirror 组件

创建一个 CodeMirrorEditor.vue 文件：

<template>  
  <div ref="editor"></div>  
</template>  
<script>  
import CodeMirror from 'codemirror';  
import 'codemirror/lib/codemirror.css';  
import 'codemirror/mode/javascript/javascript';  
export default {  
  props: ['value'],  
  mounted() {  
    this.editor = CodeMirror(this.$refs.editor, {  
      value: this.value,  
      mode: 'javascript',  
      lineNumbers: true,  
    });  
    this.editor.on('change', () => {  
      this.$emit('input', this.editor.getValue());  
    });  
  }  
}  
</script>  
<style>  
/* 根据需要添加样式 */  
</style>  

b) 在应用中使用组件

在 App.vue 中：

<template>  
  <div>  
    <h1>CodeMirror 与 Vue 集成</h1>  
    <CodeMirrorEditor v-model="code" />  
    <pre>{{ code }}</pre>  
  </div>  
</template>  
<script>  
import CodeMirrorEditor from './CodeMirrorEditor.vue';  
export default {  
  components: { CodeMirrorEditor },  
  data() {  
    return {  
      code: '// 在这里输入代码',  
    };  
  },  
};  
</script>  

5. 与 Angular 集成

a) 创建 CodeMirror 组件

在 Angular 中创建一个新的组件 codemirror-editor.component.ts：

import { Component, ElementRef, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';  
import * as CodeMirror from 'codemirror';  
import 'codemirror/lib/codemirror.css';  
import 'codemirror/mode/javascript/javascript';  
@Component({  
  selector: 'app-codemirror-editor',  
  template: `<div></div>`,  
  styleUrls: ['./codemirror-editor.component.css']  
})  
export class CodemirrorEditorComponent implements AfterViewInit {  
  @Input() value: string;  
  @Output() valueChange = new EventEmitter<string>();  
  private editor: CodeMirror.EditorFromTextArea;  
  constructor(private host: ElementRef) {}  
  ngAfterViewInit(): void {  
    this.editor = CodeMirror(this.host.nativeElement.firstChild, {  
      value: this.value || '',  
      mode: 'javascript',  
      lineNumbers: true,  
    });  
    this.editor.on('change', () => {  
      this.valueChange.emit(this.editor.getValue());  
    });  
  }  
}  

b) 在应用中使用组件

在应用的主组件中：

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  template: `  
    <h1>CodeMirror 与 Angular 集成</h1>  
    <app-codemirror-editor [(value)]="code"></app-codemirror-editor>  
    <pre>{{ code }}</pre>  
  `  
})  
export class AppComponent {  
  code = '// 在这里输入代码';  
}  

总结

通过上述步骤，您可以将 CodeMirror 基本集成到主流的前端框架中。根据实际需求，您可以进一步定制 CodeMirror 的主题、语言模式、以及插件等功能，以适配特定的应用场景。