vue3 CodeMirror 例子

Vue 3 中使用 CodeMirror 进行代码编辑是一个常见的需求，它能提供强大的文本编辑功能。以下是一个简单的 Vue3 项目中集成 CodeMirror 的例子：

<template>
  <div id="editor">
    <textarea v-model="code" @input="onInput"></textarea>
    <CodeMirror :value="code" :options="cmOptions"></CodeMirror>
  </div>
</template>

<script>
import { ref } from 'vue';
import CodeMirror from 'codemirror';

export default {
  setup() {
    const code = ref('');
    const cmOptions = {
      mode: 'text/html', // 编辑模式，例如：'javascript', 'markdown', 'xml'
      theme: 'material', // 主题
      lineNumbers: true, // 行号
      lineWrapping: true, // 自动换行
      indentUnit: 2, // 缩进单位
    };

    function onInput(e) {
      // 当代码输入发生改变时，你可以执行某些操作，比如保存
      console.log('Code updated:', e.target.value);
    }

    return {
      code,
      cmOptions,
      onInput,
    };
  },
};
</script>

在这个例子中，我们首先在模板里创建了一个 textarea 和一个 CodeMirror 组件。`v-model` 把 textarea 的值绑定到组件的 `code` prop 上。当用户在 textarea 内输入内容时，`@input` 事件会被触发，执行 `onInput` 函数。

在 script 部分，我们定义了 CodeMirror 的配置 `cmOptions`，包括模式、主题和一些基本设置。你可以根据实际需求调整这些配置。

相关问题--
1. 在 Vue3 中如何引入和安装 CodeMirror？
2. 如何在 Vue3 中动态更新 CodeMirror 的配置？
3. 如何处理 CodeMirror 的光标移动和编辑事件？