属性
-
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、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
作为对象的键,动态地获取对应的语言扩展。