可编辑的代码编辑器，内置零依赖语法高亮，默认支持 python / typescript / java / rust，可直接编辑代码内容。
import { CodeEditor } from " @reglow/reui " ;
需要在页面中展示带语法高亮的代码，并允许用户修改时。 需要在线编辑脚本、配置片段等代码内容时。 需要复制代码、按语言切换高亮时。 需要只读展示代码，并保留行号、复制能力时。 v-model 绑定代码字符串，language 指定高亮语言。
< script setup lang = " ts " >
import { ref } from " vue " ;
import { CodeEditor } from " @reglow/reui " ;
const code = ref ( ` def greet(name: str) -> None:
print(f"Hello, {name}!")
greet("ReUI")
` ) ;
</ script >
< template >
< CodeEditor v-model = " code " language = " python " />
</ template >
v-model:language 双向绑定当前语言，languages 限定下拉可选项。
< script setup lang = " ts " >
import { ref , watch } from " vue " ;
import { CodeEditor , type CodeLanguage } from " @reglow/reui " ;
const snippets : Partial < Record < CodeLanguage , string >> = {
typescript : ` interface User {
id: number;
name: string;
}
function greet(user: User): string {
return \` Hello, \$ {user.name}! \` ;
} ` ,
java : ` public class Demo {
public static void main(String[] args) {
System.out.println("Hello, ReUI");
}
} ` ,
rust : ` fn main() {
let name = "ReUI";
println!("Hello, {}!", name);
} ` ,
};
const language = ref < CodeLanguage > ( " typescript " ) ;
const code = ref (snippets . typescript ?? "" ) ;
watch (language , ( value ) => {
code . value = snippets [ value ] ?? "" ;
} ) ;
</ script >
< template >
< CodeEditor
v-model = " code "
v-model:language = " language "
:languages = " ['typescript', 'java', 'rust'] "
/>
</ template >
readonly 关闭编辑但仍可选中复制，配合 show-line-numbers / copyable 作为代码展示块使用。
< script setup lang = " ts " >
import { ref } from " vue " ;
import { CodeEditor } from " @reglow/reui " ;
const code = ref ( ` public class Fibonacci {
public static void main(String[] args) {
int a = 0;
int b = 1;
for (int i = 0; i < 10; i++) {
System.out.print(a + " ");
int next = a + b;
a = b;
b = next;
}
}
} ` ) ;
</ script >
< template >
< CodeEditor
v-model = " code "
language = " java "
readonly
show-line-numbers
copyable
/>
</ template >
默认横向滚动；wrap 开启后长行自动折行，tab-size 控制缩进空格数。
< script setup lang = " ts " >
import { ref } from " vue " ;
import { CodeEditor } from " @reglow/reui " ;
const code = ref ( ` fn main() {
let message = "ReUI CodeEditor 支持 wrap 自动换行，这是一段很长很长很长的字符串，用于演示长行折行效果，并保持与行号对齐。";
println!("{}", message);
} ` ) ;
</ script >
< template >
< CodeEditor
v-model = " code "
language = " rust "
wrap
:height = " 220 "
:tab-size = " 4 "
/>
</ template >
#toolbar 插槽位于工具栏左侧（语言下拉之后），可放置运行、清空等自定义操作按钮。
< script setup lang = " ts " >
import { ref } from " vue " ;
import { RotateCcw } from " lucide-vue-next " ;
const code = ref ( ` interface User {
id: number;
name: string;
}
function greet(user: User): string {
return \` Hello, \$ {user.name}! \` ;
} ` ) ;
</ script >
< template >
< CodeEditor v-model = " code " language = " typescript " >
< template # toolbar >
< button
type = " button "
class = " inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-primary/10 "
@click = " code = '' "
>
< RotateCcw class = " size-3.5 " />
清空
</ button >
</ template >
</ CodeEditor >
</ template >
disabled 完全禁用（不可编辑、不可复制），配合 placeholder 与 default-value 作为只读占位展示。
< script setup lang = " ts " >
const code = ` export const config = {
theme: "dark",
locale: "zh-CN",
debug: false,
};
` ;
</ script >
< template >
< CodeEditor
:model-value = " code "
language = " typescript "
disabled
placeholder = " 不可编辑的占位内容… "
/>
</ template >
通过模板引用可调用 focus / blur / select / copy 实例方法（copy 等价点击复制按钮）。
< script setup lang = " ts " >
import { ref } from " vue " ;
import { CodeEditor } from " @reglow/reui " ;
const editorRef = ref < InstanceType <typeof CodeEditor > | null > ( null ) ;
const code = ref ( ` fn main() {
println!("Hello, ReUI!");
} ` ) ;
</ script >
< template >
< CodeEditor ref = " editorRef " v-model = " code " language = " rust " :height = " 220 " />
< button @click = " editorRef?.focus() " > 聚焦 </ button >
< button @click = " editorRef?.select() " > 全选 </ button >
< button @click = " editorRef?.copy() " > 复制 </ button >
</ template >
参数 说明 类型 默认值 modelValue 当前值，v-model string- defaultValue 默认值（非受控） string""language 语言，支持 v-model:language "python" | "typescript" | "java" | "rust" | "text""typescript"languages 语言下拉可选项 CodeLanguage[]内置 5 种 showToolbar 是否显示顶部工具栏 booleantruecopyable 是否显示复制按钮 booleantruecopyText 覆盖复制的文本 string当前值 showLineNumbers 是否显示行号 booleantruereadonly 是否只读 booleanfalsedisabled 是否禁用 booleanfalsewrap 是否自动换行（关闭时横向滚动） booleanfalsetabSize 缩进空格数（Tab / 自动缩进） number2height 编辑区高度，数字按 px 处理 number | string360placeholder 占位文字 string- class / style 附加类名 / 行内样式 string | CSSProperties-
未声明的原生属性透传到内部 <textarea>（如 name、id、aria-label）。
事件 说明 回调参数 update:modelValuev-model 更新(value: string)update:language语言切换 (language: CodeLanguage)change内容变化 (value: string)copy复制成功 (value: string)focus聚焦 (e: FocusEvent)blur失焦 (e: FocusEvent)
方法 说明 签名 focus聚焦输入区 (options?: FocusOptions) => voidblur失焦 () => voidselect全选内容 () => voidcopy触发复制（等价点击按钮） () => Promise<void>
名称 说明 作用域参数 toolbar工具栏左侧额外内容（语言下拉之后） -
highlightCode / tokenizeLines 可脱离组件使用（返回 token 序列，便于渲染只读代码块、diff 等）。
import { highlightCode , tokenizeLines } from " @reglow/reui " ;
highlightCode ( " const a = 1; " , " typescript " ) ;
// [{ type: "keyword", value: "const" }, { type: "plain", value: " a = " }, { type: "number", value: "1" }, ...]
tokenizeLines ( " const a = 1; \n let b = 2; " , " typescript " ) ;
// 行 → token[]，行数包含末尾空行
