当前位置：首页 > VUE

vue 实现代码编辑功能

2026-02-23 13:46:12VUE

实现代码编辑功能的核心方法

在Vue中实现代码编辑功能通常需要借助第三方库或组件，以下是几种常见方案：

使用Monaco Editor（VS Code同款引擎）

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

安装依赖：

npm install monaco-editor

基本实现：

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

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

export default {
  mounted() {
    this.editor = monaco.editor.create(this.$refs.editorContainer, {
      value: '// 输入代码...',
      language: 'javascript',
      theme: 'vs-dark',
      automaticLayout: true
    });
  },
  beforeDestroy() {
    this.editor.dispose();
  }
};
</script>

<style>
.editor {
  height: 500px;
  width: 100%;
}
</style>

使用CodeMirror轻量级编辑器

CodeMirror是一个轻量级的代码编辑器，适合对性能要求较高的场景。

安装依赖：

npm install codemirror vue-codemirror

组件实现：

<template>
  <codemirror
    v-model="code"
    :options="cmOptions"
    @ready="onCmReady"
  />
</template>

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

export default {
  components: { codemirror },
  data() {
    return {
      code: 'const example = "Hello World"',
      cmOptions: {
        tabSize: 2,
        mode: 'text/javascript',
        theme: 'dracula',
        lineNumbers: true,
        line: true
      }
    }
  },
  methods: {
    onCmReady(cm) {
      console.log('编辑器已初始化', cm)
    }
  }
}
</script>

使用Ace Editor

Ace Editor是另一个流行的嵌入式代码编辑器，平衡了功能与性能。

安装依赖：

npm install vue2-ace-editor brace

组件实现：

<template>
  <div>
    <vue-ace-editor
      v-model="content"
      :options="options"
      @init="editorInit"
    />
  </div>
</template>

<script>
import { VueAceEditor } from 'vue2-ace-editor'
import 'brace/mode/javascript'
import 'brace/theme/chrome'

export default {
  components: { VueAceEditor },
  data() {
    return {
      content: 'function test() {\n  console.log("test");\n}',
      options: {
        fontSize: 14,
        mode: 'ace/mode/javascript',
        theme: 'ace/theme/chrome',
        showPrintMargin: false
      }
    }
  },
  methods: {
    editorInit() {
      require('brace/ext/language_tools')
    }
  }
}
</script>

自定义简易代码高亮

对于简单需求，可使用Prism.js实现基础高亮：

vue 实现代码编辑功能

<template>
  <div>
    <textarea v-model="rawCode" @input="highlight"></textarea>
    <div v-html="highlightedCode" class="prism-code"></div>
  </div>
</template>

<script>
import Prism from 'prismjs'
import 'prismjs/themes/prism.css'

export default {
  data() {
    return {
      rawCode: 'const x = 10',
      highlightedCode: ''
    }
  },
  methods: {
    highlight() {
      this.highlightedCode = Prism.highlight(
        this.rawCode,
        Prism.languages.javascript,
        'javascript'
      )
    }
  },
  mounted() {
    this.highlight()
  }
}
</script>

<style>
textarea {
  width: 100%;
  height: 200px;
}
.prism-code {
  font-family: monospace;
  white-space: pre;
}
</style>