Una Editor

English | 简体中文

基于 CodeMirror 6 构建的轻量级、高性能 Vue 3 编辑器组件库。

在线演示 (Live Demo) 🚀

✨ 特性

• 🚀 基于 CodeMirror 6：提供强大的底层编辑能力与优异的性能。
• 🎨 Vue 3 友好：完全基于 Composition API 构建，完美契合 Vue 生态。
• 💪 类型安全：100% TypeScript 编写，提供完整的类型推导。
• ⚡️ Vite 驱动：极速的本地开发与构建体验。
• 📝 Hybrid Markdown 渲染：可选的混合渲染模式，在编辑态即可获得标题、强调、图片、任务列表、结构化表格等元素的即时预览。
• 🧩 结构化表格编辑：在 livePreview 下支持结构化表格渲染、单元格编辑、行列 handle、追加与删除等交互。
• ⌨️ Vim 模式支持：内置经典的 Vim 模态编辑与键位绑定。
• 🎨 代码块语法高亮：内置多语言语法高亮，支持 9 套配色方案和可选行号。
• 📐 默认 720px 内容版心：宽屏下自动限制正文内容列宽度，图片、表格和代码块跟随统一版心。
• 📦 双格式输出：同时支持 ESM 和 CommonJS。

📦 安装

使用 pnpm (推荐):

pnpm add una-editor

或使用 npm / yarn:

npm install una-editor
# 或
yarn add una-editor

🚀 快速开始

<script setup lang="ts">
import { ref } from 'vue';
import { UnaEditor } from 'una-editor';

const content = ref('# Hello Una Editor!');
</script>

<template>
  <UnaEditor v-model="content" :live-preview="true" :vim-mode="false" />
</template>

✍️ 内容版心

Una Editor 默认会将正文内容列限制在 720px 的最大宽度内，而左侧行号 gutter 仍然贴靠编辑器外框左侧显示。图片、结构化表格和代码块会跟随同一条内容版心约束。

如果你想覆盖默认版心宽度，可以使用 contentMaxWidth：

<UnaEditor
  v-model="content"
  :content-max-width="840"
  :live-preview="true"
/>

🎨 代码块语法高亮

Una Editor 内置了代码块语法高亮功能，支持 9 套配色方案和可选的代码行号。

<UnaEditor
  v-model="content"
  code-theme="dracula"
  :code-line-numbers="true"
/>

支持的配色方案

深色主题	浅色主题
one-dark (默认)	github-light (默认)
dracula	solarized-light
monokai	atom-one-light
solarized-dark
nord
tokyo-night

设置 code-theme="auto" 可自动跟随编辑器主题（theme="dark" 使用 one-dark，theme="light" 使用 github-light）。

🌓 编辑器主题

theme 支持直接使用预置主题名，也支持传入“基于 light / dark 的覆盖对象”，不需要自行构造底层 CodeMirror 扩展。

<script setup lang="ts">
import { ref } from 'vue';
import { UnaEditor } from 'una-editor';
import type { EditorTheme } from 'una-editor';

const content = ref('## Themed Heading\n\n[link](https://example.com)');

const customTheme: EditorTheme = {
  type: 'dark',
  content: {
    link: {
      color: '#f59e0b',
    },
    inlineCode: {
      backgroundColor: 'rgba(245, 158, 11, 0.14)',
    },
  },
  table: {
    headerBackground: 'rgba(245, 158, 11, 0.12)',
  },
};
</script>

<template>
  <UnaEditor v-model="content" :theme="customTheme" code-theme="auto" />
</template>

当 code-theme="auto" 时，代码块会跟随 resolved editor theme 的 type，因此自定义 dark 主题仍会默认使用 one-dark。

支持的语言

核心语言（同步加载）：JavaScript/JS、TypeScript/TS、JSX、TSX、CSS、Shell/Bash

扩展语言（按需懒加载）：Python、PHP、Java、Go、Rust、C、C++

📖 API 文档

关于详细的组件属性 (Props)、事件 (Events)、对外暴露的方法 (Methods) 等内容，请查阅我们的 API 手册。

🛠️ 本地开发

克隆项目后，你可以通过以下命令在本地启动开发环境和 Playground：

# 安装依赖
pnpm install

# 启动本地开发与 Playground
pnpm dev

访问 http://localhost:5173 即可查看本地调试效果。

其他常用命令

• pnpm build: 构建生产包 (dist)
• pnpm test: 运行 Vitest 单元测试
• pnpm lint: 运行 ESLint 代码检查
• pnpm format: 运行 Prettier 格式化代码

📁 项目结构

una-editor/
├── src/                    # 组件核心源码
├── playground/             # 本地调试演示环境 (Vite App)
├── docs/                   # 项目文档
├── test/                   # 测试文件
├── dist/                   # 构建输出目录
└── openspec/               # OpenSpec 变更与规范管理

🤝 参与贡献

欢迎提交 Pull Request 或开设 Issue 讨论新特性与 Bug。在提交代码前，请确保：

1. 运行 pnpm lint 和 pnpm test 通过所有检查。
2. 遵循现有的代码规范与 Conventional Commits 提交信息格式。
3. 较大的功能变更，请先查阅 openspec/ 目录下的设计规范流程。

📄 开源协议

本项目基于 MIT License 开源。