vue-codemirror6 + Vue3 代码编辑器

属性

• v-model="codeValue"：实现双向绑定，codeValue 是用来存储编辑器内容的变量。

• :disabled="disabled"：决定编辑器是否为禁用状态（可读），disabled 是一个布尔值。

• placeholder="暂无数据..."：当编辑器为空时显示的占位符文本。

• :style="comStyle"：自定义样式，通过 comStyle 变量来控制编辑器的外观。

• :autofocus="true"：在组件加载时自动聚焦到编辑器。

• :indent-with-tab="true"：使用 Tab 键进行缩进。

• :tab-size="2"：设置 Tab 键的宽度为 2 个空格。

• :full-screen="true"：是否启用全屏模式。

• :extensions="extensions"：传递给 CodeMirror 的扩展功能，可以是一个数组，包含需要使用的插件。:extensions="extensions"：传入编辑器的扩展功能，支持不同语言和主题。

事件

• @ready="() => {}"：当编辑器准备好时触发的事件。可以在这里执行一些初始化操作。

• @change="handleChange"：当编辑器内容发生变化时触发的事件。handleChange 是一个方法，可以在这里处理内容变更。

• @focus="() => {}"：当编辑器获得焦点时触发的事件。

• @blur="() => {}"：当编辑器失去焦点时触发的事件。

 定制编辑器的功能和外观

1. 语言模式--通过设置 mode 属性，可以指定编辑器支持的编程语言。
   const extensions = [javascript(), oneDark];
2. 主题--可以通过 theme 属性来设置编辑器的主题
   const extensions = [javascript(), oneDark];
3. 行号和缩进
   行号：使用 lineNumbers 选项来显示行号。
   缩进：通过 indentWithTab 和 tabSize 选项来设置缩进行为。
   const options = {
     lineNumbers: true,
     indentWithTab: true,
     tabSize: 2,
   };
4. 自动完成--通过使用 autocomplete 插件，可以实现代码的自动补全功能。
   import { autocomplete } from '@codemirror/autocomplete';
   const extensions = [autocomplete()];
5. 代码折叠--可以通过设置 foldGutter 选项来启用代码折叠功能
   const options = {
     foldGutter: true,
     gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
   };
6. 关键字高亮--可以通过设置 highlightSelectionMatches 选项来高亮匹配的关键字
   const options = {
     highlightSelectionMatches: { showToken: true },
   };
7. 自定义快捷键--可以通过 keyMap 选项自定义快捷键
   const options = {
     keyMap: 'sublime', // 或者 'default'
   };
8. 全屏模式--可以通过设置 fullScreen 选项来启用全屏编辑器
   const options = {
     fullScreen: true,
   };
9. 其他常用选项
   placeholder：占位符文本。
   readOnly：设置编辑器为只读。
   showCursorWhenSelecting：在选择文本时显示光标。

const options = {
  mode: 'javascript',
  theme: 'oneDark',
  lineNumbers: true,
  indentWithTab: true,
  tabSize: 2,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  highlightSelectionMatches: { showToken: true },
  keyMap: 'default',
  placeholder: "请输入代码...",
  readOnly: false,
  fullScreen: false,
};


const cmOption = {
    tabSize: 2, // Tab 的宽度设置为 2 个空格
    styleActiveLine: true, // 高亮当前行
    lineNumbers: true, // 显示行号
    styleSelectedText: true, // 高亮选中的文本
    line: true, // 启用行模式（通常不需要单独设置）
    foldGutter: true, // 启用代码折叠
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], // 显示行号和折叠槽
    highlightSelectionMatches: {
        showToken: /\w/, // 高亮当前选中内容的所有实例
        annotateScrollbar: true // 在滚动条上标注匹配项
    },
    mode: { // 设置代码模式
        name: 'javascript', // 使用 JavaScript 模式
        json: true // 如果是 JSON 格式，则启用 JSON 解析
    },
    // hint.js 选项
    hintOptions: {
        completeSingle: false // 当匹配只有一项时，不自动补全
    },     
    // 快捷键模式，可选择 sublime、emacs、vim
    keyMap: 'sublime', // 使用 Sublime Text 的快捷键
    matchBrackets: true, // 匹配括号
    showCursorWhenSelecting: true, // 在选择文本时显示光标
    theme: 'monokai', // 主题设置为 Monokai
    extraKeys: {
        'Ctrl': 'autocomplete' // 为 Ctrl 键绑定自动完成
    }
};

自定义主题

import { EditorView } from "@codemirror/view"

let myTheme = EditorView.theme({
    // 输入的字体颜色
    "&": {
        color: "#0052D9",
        backgroundColor: "#FFFFFF"
    },
    ".cm-content": {
        caretColor: "#0052D9",
    },
    // 激活背景色
    ".cm-activeLine": {
        backgroundColor: "#FAFAFA"
    },
    // 激活序列的背景色
    ".cm-activeLineGutter": {
        backgroundColor: "#FAFAFA"
    },
    //光标的颜色
    "&.cm-focused .cm-cursor": {
        borderLeftColor: "#0052D9"
    },
    // 选中的状态
    "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "#0052D9",
        color:'#FFFFFF'
    },
    // 左侧侧边栏的颜色
    ".cm-gutters": {
        backgroundColor: "#FFFFFF",
        color: "#ddd", //侧边栏文字颜色
        border: "none"
    }
}, { dark: true })

const extensions = [javascript(), myTheme];

 组件

<template>
  <Codemirror
    ref="codeMirrorEditor"
    v-model="codeValue"
    :disabled="disabled"
    placeholder="暂无数据..."
    :style="comStyle"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :full-screen="true"
    :extensions="extensions"
    @ready="() => {}"
    @change="handleChange"
    @focus="() => {}"
    @blur="() => {}"
  ></Codemirror>
</template>
<script setup>
import { ref, toRefs, computed } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { python } from '@codemirror/lang-python'
import { oneDark } from '@codemirror/theme-one-dark'

const props = defineProps({
  modelValue: {
    type: String,
    required: false,
    default: ''
  },
  language: {
    type: String,
    default: 'javascript'
  },
  disabled: {
    type: [String, Boolean],
    default: false
  },
  style: {
    type: [Object],
    default: () => ({
      height: 'unset'
    })
  }
})
const emit = defineEmits(['update:modelValue'])
const { modelValue, language, disabled, style } = toRefs(props)
const fullScreen = ref(false)
const lang = { javascript, python }[language.value]
const extensions = [lang(), oneDark]
const codeMirrorEditor = ref(null)
const codeValue = ref(modelValue.value)
const comStyle = computed(() => ({ ...style.value, ...{ height: fullScreen.value ? '100%' : 'unset' } }))
watch(
  () => modelValue,
  (newValue) => {
    if (newValue.value) {
      codeValue.value = newValue.value
    }
  },
  { deep: true, immediate: true }
)
const handleChange = (value) => {
  emit('update:modelValue', value)
}
</script>

const lang = { javascript, python }[language.value] ： 

• language.value 是一个响应式引用，表示当前选择的语言（例如 "javascript" 或 "python"）。
• 使用 language.value 作为对象的键，动态地获取对应的语言扩展。

更多信息看：vue-codemirror代码编辑器使用心得和踩坑总结