code-editor-vue

基于 CodeMirror 6 的 Vue 3 代码编辑器组件。

安装

pnpm add @aiao/code-editor-vue

使用

<script lang="ts" setup>
import { ref } from 'vue';
import { CodeEditor } from '@aiao/code-editor-vue';
import '@aiao/code-editor-vue/style.css';

const code = ref('const answer = 42;');
</script>

<template>
  <CodeEditor
    v-model:value="code"
    @blur="console.log('blur')"
    @focus="console.log('focus')"
    language="typescript"
    theme="dark"
  />
</template>

v-model:value 同步 value / update:value。change 只在用户修改文档时触发，外部 value 更新不会反向触发。

Props

Prop	类型	默认值	行为
value	string	''	动态同步
theme	'light' | 'dark'	'light'	动态重配置
language	string	'sql'	动态异步加载
languages	readonly CodeEditorLanguageDescription[]	SUPPORT_LANGUAGES	动态替换语言列表
placeholder	string	''	动态重配置
readonly	boolean	false	动态重配置
disabled	boolean	false	动态重配置
setup	'basic' | 'minimal'	'basic'	动态重配置
indentWithTab	boolean	false	动态重配置
indentUnit	string	' '	动态重配置
lineWrapping	boolean	false	动态重配置
highlightWhitespace	boolean	false	动态重配置
autoFocus	boolean	false	仅初始化时读取
root	Document | ShadowRoot	undefined	仅初始化时传给编辑器

空字符串或 plaintext 会清空语言扩展。未知语言和加载失败会报告错误并保持纯文本状态。快速切换语言时，只有最后一次请求可以更新当前编辑器。

自定义语言列表使用核心包的公开类型：

import type { CodeEditorLanguageDescription } from '@aiao/code-editor';

declare const myLanguage: CodeEditorLanguageDescription;
const languages: readonly CodeEditorLanguageDescription[] = [myLanguage];

<CodeEditor v-model:value="code" :languages="languages" language="my-language" />

Events

事件	参数	触发时机
update:value	(value: string)	用户修改文档
change	(value: string)	用户修改文档
focus	()	编辑器内容区域获得焦点
blur	()	编辑器内容区域失去焦点

公开类型

import type { CodeEditorEmits, CodeEditorProps, CodeEditorSetup, CodeEditorTheme } from '@aiao/code-editor-vue';

Interfaces

Interface	Description
CodeEditorEmits	Vue CodeEditor 的公开事件。
CodeEditorProps	Vue CodeEditor 的公开属性。

Type Aliases

Type Alias	Description
CodeEditorSetup	CodeMirror 预置扩展集合。
CodeEditorTheme	CodeEditor 主题类型

Variables

Variable	Description
CodeEditor	-