当前位置：首页 > VUE

vue 实现代码编辑功能

2026-01-22 23:03:43VUE

实现代码编辑功能的基本思路

在Vue中实现代码编辑功能通常需要借助第三方库，例如Monaco Editor（VS Code使用的编辑器）或CodeMirror。以下是两种常见方案的实现方法。

使用Monaco Editor

Monaco Editor是VS Code的底层编辑器，功能强大且支持多种语言高亮、自动补全等特性。

安装依赖：

npm install monaco-editor

在Vue组件中引入：

<template>
  <div ref="editorContainer" style="height: 500px; width: 100%"></div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.editor = monaco.editor.create(this.$refs.editorContainer, {
        value: '// Write your code here',
        language: 'javascript',
        theme: 'vs-dark',
        automaticLayout: true,
      });
    }
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.dispose();
    }
  }
};
</script>

关键配置：

language：设置编辑器的语言模式（如javascript、html、css等）。
theme：设置编辑器主题（如vs、vs-dark、hc-black）。
automaticLayout：启用自动调整布局。

使用CodeMirror

CodeMirror是另一个轻量级的代码编辑器库，适合简单场景。

安装依赖：

vue 实现代码编辑功能

npm install codemirror @types/codemirror

在Vue组件中引入：

<template>
  <div ref="editorContainer"></div>
</template>

<script>
import { codemirror } from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript';

export default {
  mounted() {
    this.editor = codemirror(this.$refs.editorContainer, {
      lineNumbers: true,
      theme: 'dracula',
      mode: 'javascript',
      value: '// Write your code here',
    });
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.toTextArea();
    }
  }
};
</script>

关键配置：

mode：设置语言模式（需单独引入对应语言的模式文件）。
theme：设置主题（需引入对应的主题CSS）。
lineNumbers：显示行号。

实现双向绑定

若需要将编辑器内容与Vue数据绑定，可以通过监听编辑器变化事件实现。

Monaco Editor示例：

vue 实现代码编辑功能

this.editor.onDidChangeModelContent(() => {
  this.code = this.editor.getValue();
});

CodeMirror示例：

this.editor.on('change', (cm) => {
  this.code = cm.getValue();
});

扩展功能建议

语言切换
动态修改编辑器的language或mode属性，例如通过下拉菜单选择语言类型。
主题切换
提供多个主题选项，调用monaco.editor.setTheme()或CodeMirror的setOption('theme', themeName)。
快捷键保存
监听键盘事件（如Ctrl+S），调用保存逻辑。
错误检查
集成ESLint或TS类型检查，通过装饰器显示错误信息。