codemirror6 在vue3中如何使用

CodeMirror 6是一个强大的JavaScript文本编辑库，用于创建交互式的源代码编辑器。在Vue 3中使用它，你可以按照以下步骤集成：

1. **安装依赖**：
首先，在你的项目中安装`@codemirror/standalone`和`@vue/cli-plugin-vue3`（如果尚未安装）。使用npm或yarn：

   npm install @codemirror/standalone vue@next
   # 或者
   yarn add @codemirror/standalone vue@next

2. **引入组件**：
在你的Vue文件中，例如`src/components/Editor.vue`中，引入`<codemirror>`组件：

   <template>
     <div>
       <codemirror :options="editorOptions" />
     </div>
   </template>

   <script>
   import { createApp } from 'vue';
   import { CodeMirror } from '@codemirror/standalone';

   export default {
     components: {
       CodeMirror,
     },
     data() {
       return {
         editorOptions: {
           value: '',
           theme: 'abcdef', // 设置主题，比如'abcdef'
           mode: 'text/x-markdown', // 设置语言模式
         };
       }
     },
   };
   </script>

3. **配置选项**：
`editorOptions`对象包含了CodeMirror的各种配置项，可以根据需要调整，如设置行数、光标样式等。

4. **实例化并渲染**：
在模板中，通过数据绑定将`editorOptions`传递给`<codemirror>`组件，它会自动渲染为一个可编辑的文本区域。

5. **事件处理**：
如果你需要监听CodeMirror的事件，可以使用`@change`等事件处理器。

<template>
  <div>
    <codemirror :options="editorOptions" @change="handleContentChange" />
  </div>
</template>

<script>
// ... (保持不变)

methods: {
  handleContentChange(newValue) {
    console.log('内容改变:', newValue);
  },
},
</script>