Preview Updated 2026-05-10

CodeEditor

Lightweight code-editing container — textarea + line numbers + Tab indentation. Reach for Monaco / CodeMirror when you need full syntax / completion.

Basic usage

It’s positioned as “visual container + light interactions”: line numbers, Tab indentation, end-of-line preservation, and full ARIA labeling — but no built-in syntax highlighting. For highlighting, wrap an overlay around it on the consumer side (see the overlay technique used in VariableAwareInput).

背景

12345678910

function fizzbuzz(n: number) {
  for (let i = 1; i <= n; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
  }
}

fizzbuzz(15);

<script setup lang="ts">
import { ref } from 'vue';
import { CfCodeEditor } from '@chufix-design/vue';
const code = ref(`function fizzbuzz(n: number) {
  for (let i = 1; i <= n; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
  }
}

fizzbuzz(15);`);
</script>

<template>
  <CfCodeEditor v-model="code" language="typescript" :rows="12" />
</template>

<CfCodeEditor value={code} onChange={setCode} language="typescript" rows={12} />

readOnly / wrap / no line numbers

A handful of state combinations: read-only doc samples, soft-wrapped long text, and a no-line-number compact mode.

背景

1234567

# read-only 模式
# 输入会被拦截，行号 + 灰底突出 readOnly 状态

const cfg = {
  mode: 'view',
  permissions: ['read'],
};

这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。

// 不显示行号
function tiny() { return 42; }

<script setup lang="ts">
import { ref } from 'vue';
import { CfCodeEditor } from '@chufix-design/vue';
const ro = ref(`# read-only 模式
# 输入会被拦截，行号 + 灰底突出 readOnly 状态

const cfg = {
  mode: 'view',
  permissions: ['read'],
};`);
const wrapped = ref('这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。');
const noNumbers = ref('// 不显示行号\nfunction tiny() { return 42; }');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfCodeEditor v-model="ro" language="typescript" :rows="5" read-only />
    <CfCodeEditor v-model="wrapped" :rows="4" wrap />
    <CfCodeEditor v-model="noNumbers" :rows="3" :show-line-numbers="false" />
  </div>
</template>

<CfCodeEditor value={code} onChange={set} readOnly />
<CfCodeEditor value={text} onChange={set} wrap />
<CfCodeEditor value={snip} onChange={set} showLineNumbers={false} />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	`''`	Code content
`language`	`string`	`'plaintext'`	Forwarded as `data-language` only; not used for rendering
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`showLineNumbers`	`boolean`	`true`
`readOnly`	`boolean`	`false`
`rows`	`number`	`12`	Visible rows
`wrap`	`boolean`	`false`	Soft-wrap long lines
`tabSize`	`number`	`2`	Number of spaces inserted by Tab; `0` makes Tab move focus