# @ecsplico/editor 中文文档

规范地址：https://npmcn.com/package/%40ecsplico/editor/

版本：4\.3\.2
npm 元数据更新时间：2026-10-26T00:11:06.369Z
中文译文更新时间：2026-11-14T11:41:59.584Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ecsplico/editor
原文对照：https://npmcn.com/package/%40ecsplico/editor/?lang=original
项目主页：https://github.com/skaile-ai/skaile-editor/tree/main/packages/editor#readme
源码仓库：https://github.com/skaile-ai/skaile-editor

弃用说明：renamed to @skaile/forge-editor

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.8 MB，1549 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：34 个
- peer 依赖：h3 ^1\.15\.0，vue ^3\.5\.42，yjs ^13\.6\.33，nuxt ^4\.5\.2，react ^19\.3\.0，@nuxt/ui ^4\.11\.1，nitropack ^2\.13\.0，react-dom ^19\.3\.0，@tiptap/pm ^3\.31\.3，drizzle-orm ^0\.45\.0，@iconify/vue ^5\.0\.3，@tiptap/core ^3\.31\.3，@tiptap/react ^3\.31\.3，@tiptap/vue-3 ^3\.31\.3，@iconify/react ^6\.0\.2，@codemirror/view ^6\.34\.1，@lezer/highlight ^1\.2\.1，@codemirror/state ^6\.4\.1，@codemirror/search ^6\.5\.6，@codemirror/commands ^6\.7\.0，@codemirror/language ^6\.10\.3，@hocuspocus/provider ^4\.7\.0
- 首次发布：2026-10-11T15:24:26.048Z
- 最新版本发布：2026-10-25T01:49:07.360Z
- 近 30 天下载量：2062（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）

## 中文简介

Vue and React editers on TipTap v3(Vue: Nuxt UI;React:shadcn/ui):具有Vue和React绑定的无框架特性,简单而高级的预设,可树动的条目. 建立有类型申报的无害环境管理.

## 安装

```sh
npm install @ecsplico/editor
```

也可以使用：`pnpm add @ecsplico/editor`、`yarn add @ecsplico/editor`、`bun add @ecsplico/editor`

## README

# @ecsplico/编辑器

TipTap v3上的 Vue and React 编辑器库. 编辑器从 **特性**页:1 _简单_ 编辑器是唯一的核心功能(格式化、标题、列表、引用、代码、撤销/重写),不需要后端、Yjs和特征代码 _高级_ 编辑器将每个功能(媒体,提及,笔录,复合材料,作者,评论,AI,合作,块UI,全站Obsidian主题及其集成)编成两面. 无框架 `./core` 拥有特性模型,每个特性的逻辑也是无框架的(`./<feature>`: 一个特性由打入的 **UI 绑定** (单位:千美元)`<x>FeatureCore(ui)`即Vue层(`./<feature>/vue`, Nuxt UI 铬)和反应层(`./<feature>/react`,Radix和Tailwind上的shadcn/ui)填充其组件,节点视图和通知接合. 工具栏、设置面板和模式、外观、 AI 侧边栏、 注释边框、 复合表和检查器, 文件浏览器是您放置在编辑器旁边任何地方的组件; 两层都传送简单的编辑器(`./vue/simple`, (中文(简体) ), `./react/simple`)和高级编辑(`./vue/advanced`, (中文(简体) ), `./react/advanced`) (中文(简体) ).

## 先决条件

-   22和22号节点 [阿宝](https://bun.sh/) (存储器为 Bun 工作空间 : `packages/*`, (中文(简体) ), `examples/*`) (中文(简体) ).
-   基于 Vite 或 Nuxt 的应用程序( Name`@vitejs/plugin-vue` 编号 : `@vitejs/plugin-react`,或者说Nuxt). 已发布的软件包是 **构建的无害环境管理软件包**: 每一个 `exports` 子路径解析为 `dist/**/*.js` 与 `.d.ts` (Vue SFCs 编译,反应) `.tsx` 将汇编成JSX-运行时间JS),CSS表被复制,源图嵌入出处(`src` 它本身没有出版)。 输出是每个源文件一个模块,所以条目保持树能摇动.
-   需要的对等依赖( 将它们安装在消费应用程序中, 所以主机和库共享其中的一例 ) : `@tiptap/core`, (中文(简体) ), `@tiptap/pm`, (中文(简体) ), `yjs`, (中文(简体) ), `@hocuspocus/provider`. Yjs 和提供者是需要同行的,因为 `.d.ts` 参考它们;简单编辑的捆绑并不包含其执行情况(见下文所证实)。 每层( 所有可选的同位素) : **阴道** `vue`, (中文(简体) ), `@nuxt/ui`, (中文(简体) ), `@tiptap/vue-3`· ; **反应** `react`, (中文(简体) ), `react-dom`, (中文(简体) ), `@tiptap/react`, (中文(简体) ), `@iconify/react`· ; **代码表面** (单位:千美元)`/code`(中文(简体) ) `@codemirror/state`, (中文(简体) ), `@codemirror/view`, (中文(简体) ), `@codemirror/language`, (中文(简体) ), `@codemirror/commands`, (中文(简体) ), `@codemirror/search`, (中文(简体) ), `@lezer/highlight`,加上 `@codemirror/lang-*` 包件您注册( 包件没有).
-   尾风 CSS 4 (`tailwindcss`用于 Nuxt UI 主题(Vue) 或 shadcn 类(反应),以及图标收藏 `@iconify-json/lucide`。反应主机也需要 `tw-animate-css` (对话框的入出动画,下放和工具提示).

## 安装

从npmjs(公共,没有标志和没有) `.npmrc` 所需:

```sh
npm install @ecsplico/editor      # or: bun add @ecsplico/editor / pnpm add @ecsplico/editor
```

在这个寄存器内,软件包是一个工作空间成员,所以那里的消费者声明 `"@ecsplico/editor": "workspace:*"`。 。 。 .

### Nuxt 快速启动

安装软件包旁边的对等点( E)`vue`, (中文(简体) ), `@nuxt/ui`, (中文(简体) ), `@tiptap/core`, (中文(简体) ), `@tiptap/pm`, (中文(简体) ), `@tiptap/vue-3`, (中文(简体) ), `yjs`, (中文(简体) ), `@hocuspocus/provider`, (中文(简体) ), `tailwindcss`, (中文(简体) ), `@iconify-json/lucide`),然后登记模块 **之后** `@nuxt/ui`数字 :

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false, // TipTap renders on the client only
  modules: ['@nuxt/ui', '@ecsplico/editor/nuxt'],
  css: ['~/assets/main.css'],
})
```

```css
/* app/assets/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
```

将应用程序包入 `<UApp>` (单位:千美元)`app/app.vue`数字 : `<UApp><NuxtPage /></UApp>`)并在页面上挂载编辑器(简单的编辑器不需要后端):

```vue
<script setup lang="ts">
import { SimpleEditor } from '@ecsplico/editor/vue/simple'
import { ref } from 'vue'
const content = ref()
</script>

<template>
  <SimpleEditor v-model="content" />
</template>
```

该模块的 API 路由称为主机 `EditorPorts` (先确定身份,然后每个能力一个端口: `documents`, (中文(简体) ), `collabState`, (中文(简体) ), `directory`, (中文(简体) ), `assets`, (中文(简体) ), `settings`, (中文(简体) ), `themes`, (中文(简体) ), `models`, (中文(简体) ), `comments`) (中文(简体) ). 在硝基插件中注册它们;没有它们,客户端日志“Einstellungen konnten nicht geladen werden”和每条路由回答500个。 这条路线的端口你留下501。 这些最小的端口保留所有记忆,让任何访客进入(替换 `authenticate` 和你的仓库:

```ts
// server/plugins/editor-adapter.ts
import type { JSONContent } from '@tiptap/core'
import { type AssetStore, setEditorPorts } from '@ecsplico/editor/server'

export default defineNitroPlugin(() => {
  const contents = new Map<string, JSONContent>()
  const states = new Map<string, Uint8Array>()
  const assets = new Map<string, Parameters<AssetStore['storeAsset']>[1]>()
  setEditorPorts({
    // `null` = 401 on API routes; on /collab the socket is closed with 4401 (HTTP 401 at the upgrade with `collab.authenticateUpgrade`)
    identity: { authenticate: async () => ({ id: 'demo', username: 'demo' }) },
    documents: {
      loadContent: async id => contents.get(id) ?? null,
      storeContent: async (id, content) => { contents.set(id, content) },
      listContents: async () => [...contents].map(([id, content]) => ({ id, content })),
    },
    collabState: {
      loadState: async id => states.get(id) ?? null,
      storeState: async (id, state) => { states.set(id, state) },
      removeState: async (id) => { states.delete(id) },
    },
    directory: { listUsers: async () => [] },
    assets: {
      storeAsset: async (id, asset) => { assets.set(`${id}/${asset.name}`, asset) },
      loadAsset: async (id, name) => {
        const asset = assets.get(`${id}/${name}`)
        if (!asset) return null
        const { data, ...record } = asset
        return { record, data }
      },
    },
  })
})
```

高级编辑器、每个适配器方法、协作和AI都包含在 [Nuxt 快速启动](https://skaile-ai.github.io/skaile-editor/getting-started/quick-start-nuxt) 编辑 [`EditorPorts` 指南](https://skaile-ai.github.io/skaile-editor/guides/editor-ports)。 。 。 .

### 建立和发展这一储存库

`bun run build:editor` (单位:千美元)`tsdown`配置 `packages/editor/tsdown.config.ts`)写作 `packages/editor/dist`:无害环境管理+ `.d.ts` 每笔 `exports` 子路径( 条目从 `skaile-source` 条件 `package.json#exports`,因此,一旦宣布就新建导出,每个源文件解开一个模块,有嵌入源的源地图,CSS复制,以及Nuxt运行时目录(`dist/nuxt/runtime`:插件,服务器路由,utils)作为Nuxt和Nitro在主机所编译的模块旁边的独立文件. 依赖和同伴从不捆绑.

每个 `exports` 条目带有自定义 **`skaile-source`** 条件第一(指 `src`之后是 `types`编号 :`import` (或 `default`)指点 `dist`。该寄存器的 Nuxt app (`nuxt.config.ts`)和实例`examples/*/vite.config.ts`, (中文(简体) ), `tsconfig.json#customConditions`)为Vite、Nitro和类型检查器提供这种条件,所以 **编辑库在 dev 中不需要构建步骤**寄存器外的消费者从未设定条件并获得 `dist`。 。 。 . `bun run check:editor-entries` 首先建设,然后判断 **已建成** 输出通过 `exports` (无) `skaile-source`),故能证明所发表的内容; `bun run check:editor-composition` 首先建立并加载已建条目; `bun run typecheck:editor` 解决 `src` (单位:千美元)`customConditions: ["skaile-source"]` 内 `packages/editor/tsconfig.json`) (中文(简体) ).

## 文档

这些文件住在 **[https://skaile-ai.github.io/skaile-editor/\* 互联网档案馆的存檔,存档日期2013-12-02](https://skaile-ai.github.io/skaile-editor/*)\* (货包本身已不再是船舶指南):**

-   [开始](https://skaile-ai.github.io/skaile-editor/getting-started/introduction): 软件包是什么,安装,快速启动 Nuxt, plain Vue and React, 词汇.
-   [教学](https://skaile-ai.github.io/skaile-editor/tutorial/overview):一步一步地建立一个编辑器,包括自己的块,后端,AI和回放表面.
-   [指南](https://skaile-ai.github.io/skaile-editor/guides/composition): 特性组成, Nuxt 模块, `EditorPorts`,合作,AI,主题,复合材料,文件浏览器,制作,存储适配器,迁移.
-   [参考文献](https://skaile-ai.github.io/skaile-editor/reference/exports):每个公共导出,预设和特性,特征合同,CSS和UI提供方的要求,依赖规则,命令,更改日志.
-   [AI探员](https://skaile-ai.github.io/skaile-editor/ai-agents): 编码代理如何读取这些文件,整合并扩展编辑器,不变量和校验.

机器可读入点 : [`llms.txt`](https://skaile-ai.github.io/skaile-editor/llms.txt), (中文(简体) ), [`llms-full.txt`](https://skaile-ai.github.io/skaile-editor/llms-full.txt),并安装 Agent Skill:

```sh
npx skills add https://skaile-ai.github.io/skaile-editor
```

可运行实例存在于仓库中 : [`examples/`](https://github.com/skaile-ai/skaile-editor/tree/main/examples) 和 Nuxt 应用程序 (`bun run dev`,第3056号口。 要在文件库的检查中进行文件库的工作,请运行 `bun run docs:dev` (开发服务器)或 `bun run docs:build` (静态建筑);见 [`docs/README.md`](https://github.com/skaile-ai/skaile-editor/blob/main/docs/README.md)。 。 。 .

## 常见问题

### @ecsplico/editor 是什么？

Vue and React editers on TipTap v3\(Vue: Nuxt UI;React:shadcn/ui\):具有Vue和React绑定的无框架特性,简单而高级的预设,可树动的条目\. 建立有类型申报的无害环境管理\.注意：该包已被作者标记为弃用——renamed to @skaile/forge-editor

### 如何安装 @ecsplico/editor？

在项目目录运行 npm install @ecsplico/editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：yjs（^13\.6\.33）、@tiptap/pm（^3\.31\.3）、@tiptap/core（^3\.31\.3）、@hocuspocus/provider（^4\.7\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ecsplico/editor 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ecsplico/editor 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ecsplico/editor 可以商用吗？

@ecsplico/editor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ecsplico/editor 的下载量有多少？

根据 npm 官方下载统计，@ecsplico/editor 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,062 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ecsplico/editor 还在维护吗？

最新版本 4\.3\.2 发布于 2026/10/25（20 天前）；至今共发布 21 个版本，其中过去 12 个月发布了 21 个；首次发布于 2026/10/11。作者已将其标记为弃用，新项目建议寻找替代方案。