vue-codemirror6 + Vue3 代码编辑器

本文主要是介绍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="() => {}"：当编辑器失去焦点时触发的事件。

定制编辑器的功能和外观

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