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);

src/App.vue

<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>

<script setup>
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>

import { useState } from 'react';
import { CfCodeEditor } from '@chufix-design/react';

export default function Demo() {
  const [code, setCode] = useState(`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);`);
  const [code, setCode] = useState(`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);`);
  return (
    <>
      <CfCodeEditor value={code} onChange={setCode} language="typescript" rows={12} />
    </>
  );
}

import { useState } from 'react';
import { CfCodeEditor } from '@chufix-design/react';

export default function Demo() {
  const [code, setCode] = useState(`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);`);
  const [code, setCode] = useState(`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);`);
  return (
    <>
      <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; }

src/App.vue

<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>

<script setup>
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>

import { useState } from 'react';
import { CfCodeEditor } from '@chufix-design/react';

export default function Demo() {
  const [ro, setRo] = useState(`# read-only 模式
  # 输入会被拦截，行号 + 灰底突出 readOnly 状态

  const cfg = {
    mode: 'view',
    permissions: ['read'],
  };`);
  const [wrapped, setWrapped] = useState('这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。');
  const [noNumbers, setNoNumbers] = useState('// 不显示行号\nfunction tiny() { return 42; }');
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <CfCodeEditor value={ro} onChange={setRo} language="typescript" rows={5} readOnly />
          <CfCodeEditor value={wrapped} onChange={setWrapped} rows={4} wrap />
          <CfCodeEditor value={noNumbers} onChange={setNoNumbers} rows={3} showLineNumbers={false} />
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfCodeEditor } from '@chufix-design/react';

export default function Demo() {
  const [ro, setRo] = useState(`# read-only 模式
  # 输入会被拦截，行号 + 灰底突出 readOnly 状态

  const cfg = {
    mode: 'view',
    permissions: ['read'],
  };`);
  const [wrapped, setWrapped] = useState('这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。');
  const [noNumbers, setNoNumbers] = useState('// 不显示行号\nfunction tiny() { return 42; }');
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <CfCodeEditor value={ro} onChange={setRo} language="typescript" rows={5} readOnly />
          <CfCodeEditor value={wrapped} onChange={setWrapped} rows={4} wrap />
          <CfCodeEditor value={noNumbers} onChange={setNoNumbers} rows={3} showLineNumbers={false} />
        </div>
    </>
  );
}

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