在 Vue3 中使用 CodeMirror 6 的代码示例及详细解释

在 Vue3 中使用 CodeMirror 6 的代码示例及详细解释

引用

CSDN

1.

https://m.blog.csdn.net/qinhan5667/article/details/145734972

在前端开发中，代码编辑器是一个非常重要的工具。CodeMirror 6 是一个流行的代码编辑器库，它相比CodeMirror 5，简直是两个东西，6提供了丰富的功能和良好的扩展性。本文将通过具体的代码示例，详细解释如何在 Vue3 中使用 CodeMirror 6，并结合图片中的笔记进行说明。

1. 引入 CodeMirror 6

首先，我们需要在项目中引入 CodeMirror 6。可以通过 npm 安装：

npm install codemirror  

这里的codemirror6需要单独按照这些view和state库，使用的插件要注意单独按照
安装完成后，我们需要引入 CodeMirror 6 的文件：

import { EditorView, EditorState } from '@codemirror/view';
import { basicSetup } from 'codemirror';
import { json } from '@codemirror/lang-json';
import { javascript } from '@codemirror/lang-javascript';  

2. 创建 CodeMirror 编辑器组件

在 Vue3 中，我们可以创建一个专门的组件来封装 CodeMirror 编辑器。以下是一个示例代码：

<template>
    <div style="display: flex; justify-content: space-between; overflow: hidden;">
      <textarea ref="editorRef" v-model="code" class="cm-editor"></textarea>
    </div>
</template>  

除了组件的引用和双向绑定值之外，还要创建一个编辑器view的变量。

editorRef 和 editorView 的使用

const editorRef = ref(props.textareaRef || null);
const editorView = ref(null);  

• editorRef 是一个引用，用于绑定到 textarea 元素上。
• editorView 是 CodeMirror 6 的核心对象，用于操作编辑器视图。

startState 的创建

const startState = EditorState.create({
  doc: code.value,
  extensions: [
    basicSetup,
    json(),
    javascript(),
    sql(),
    EditorView.updateListener.of(update => {
      console.log('当前光标位置:', update.state.selection.main.from);
    })
  ]
});  

• startState 是编辑器的初始状态，包含文档内容和扩展配置。
• doc 是初始文档内容，可以是一个字符串或一个 Document 对象。
• extensions 是扩展配置，可以包含语法高亮、代码折叠等功能。

编辑器的初始化

• 在 onMounted 钩子中初始化编辑器。
• 如果 editorView 已经存在，先销毁旧的编辑器视图，再创建新的编辑器视图。

完整代码如下：

<script setup>
// 编辑器实例
const code = ref('');
const editorRef = ref(null);
const editorView = ref(null);
// 初始化编辑器
const initEditor = () => {
  code.value = props.value;
  if (editorView.value) {
    editorView.value.destroy();
  }
  const startState = EditorState.create({
    doc: code.value,
    extensions: [
      basicSetup,
      json(),
      javascript(),
      sql(),
      EditorView.updateListener.of(update => {
        console.log('当前光标位置:', update.state.selection.main.from);
      })
    ]
  });
  if (editorRef.value) {
    editorView.value = new EditorView({
      state: startState,
      parent: editorRef.value
    });
  }
};
onMounted(() => {
  initEditor();
});
// 清理资源
onUnmounted(() => {
  editorView.value?.destroy();
});
</script>
  

清理资源

onUnmounted(() => {
  editorView.value?.destroy();
});  

• 在 onUnmounted 钩子中销毁编辑器视图，释放资源。

3. 注意事项

1. 插件的单独安装

• CodeMirror 6 的插件需要单独安装，例如 @codemirror/lang-json、@codemirror/lang-javascript 等。

2. CSS 样式的配合

• CodeMirror 6 需要 CSS 样式的配合，确保引入了 codemirror.css 和主题样式文件。

3. 资源清理

• 在组件销毁时，记得销毁编辑器视图，释放资源。

4. 总结

通过以上代码示例和详细解释，我们可以在 Vue3 中成功使用 CodeMirror 6，并实现代码编辑器的功能。希望本文能够帮助大家更好地理解和使用 CodeMirror 6。