开源在线代码编辑器vue

我推荐使用Vue.js编写的Monaco Editor。该编辑器由Microsoft Visual Studio Code团队开发，具有语法高亮、代码提示、智能缩进等功能。它支持多种语言，包括JavaScript、TypeScript、CSS、HTML等，并且可以集成到Vue.js应用程序中。

Monaco Editor可以通过npm安装，使用起来非常简单。以下是一个基本的Vue.js组件，可以在其中使用Monaco Editor：

<template>
  <div ref="editor" style="height: 500px;"></div>
</template>

<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export default {
  mounted() {
    this.editor = monaco.editor.create(this.$refs.editor, {
      value: '',
      language: 'javascript'
    });
  },
  beforeDestroy() {
    this.editor.dispose();
  }
};
</script>

在这个组件中，我们引入了Monaco Editor的JavaScript API，并使用`mounted`生命周期钩子创建了一个新的编辑器实例。我们将编辑器绑定到`<div>`元素上，并设置了初始值为空字符串，并将语言设置为JavaScript。在`beforeDestroy`生命周期钩子中，我们将编辑器实例释放掉，以避免内存泄漏。

当然，你可以根据自己的需求自定义Monaco Editor的配置。例如，你可以通过设置`theme`属性来改变编辑器的主题，或者通过设置`fontSize`属性来改变字体大小。Monaco Editor的文档中提供了更多的配置选项，可以根据需要进行自定义。