vue实现web端的源代码编辑器

要实现一个 Web 端的源代码编辑器，可以使用 Vue.js 和一些开源的代码编辑器库，如 CodeMirror 或 Monaco Editor。

以下是一个使用 CodeMirror 实现的简单的 Vue 代码编辑器组件示例：

<template>
  <div>
    <textarea ref="editor"></textarea>
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript';
import CodeMirror from 'codemirror';

export default {
  name: 'CodeEditor',
  props: {
    value: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    const { editor } = this.$refs;
    this.codeMirror = CodeMirror.fromTextArea(editor, this.options);
    this.codeMirror.setValue(this.value);
    this.codeMirror.on('change', this.handleChange);
  },
  beforeDestroy() {
    if (this.codeMirror) {
      this.codeMirror.off('change', this.handleChange);
      this.codeMirror.toTextArea();
    }
  },
  methods: {
    handleChange() {
      this.$emit('input', this.codeMirror.getValue());
    },
  },
};
</script>

在父组件中使用该组件时，可以通过 v-model 指令绑定编辑器的值：

<template>
  <div>
    <code-editor v-model="code" :options="editorOptions" />
  </div>
</template>

<script>
import CodeEditor from '@/components/CodeEditor.vue';

export default {
  components: {
    CodeEditor,
  },
  data() {
    return {
      code: '',
      editorOptions: {
        mode: 'javascript',
        lineNumbers: true,
      },
    };
  },
};
</script>

当编辑器内容发生变化时，会触发父组件的 code 发生变化的事件，从而实现双向数据绑定。