非常喜欢 Notion 和飞书的编辑体验，但并非开源。因此我基于 Tiptap 实现了一个 Notion/飞书 风格的编辑器，尽可能实现类似的体验。
简介
特性
- 内置 AI 能力，助力内容创作，提升工作效率；
- 块级编辑（拖拽、拆分、排序）；
- Markdown 友好，支持 Markdown 复制和粘贴，也可直接导出 Markdown；
- 基于 Tiptap & ProseMirror；
- MIT 许可。
使用场景
- 知识管理 / 笔记：个人笔记、知识库、灵感记录、项目文档；
- 内容创作 / 写作：文章、博客、周报、技术文档、长文写作；
- AI 内容编辑：AI 辅助续写、润色、改写、总结、翻译等；
- Markdown 工作流：Markdown 编辑、查看、复制粘贴、导入导出；
- AI 对话渲染：适合作为 Chat / Agent 的富文本消息渲染器；
- 低代码 / CMS 编辑器：用于后台管理系统、页面编辑器、内容系统；
- 自定义编辑器开发：适合需要块级编辑、扩展能力、深度定制的场景。
快速开始
目前 Vue 版本已经发布，后续会发布 React 版本。
- 在线演示: yiitap.pileax.ai/demo/vue
- 开发文档: yiitap.pileax.ai
- GitHub: github.com/pileax-ai/y…
安装
# npm
npm -i @yiitap/vue @yiitap/vue-preset
# yarn
yarn add @yiitap/vue @yiitap/vue-preset
# pnpm
pnpm add @yiitap/vue @yiitap/vue-preset
使用
<template>
<YiiEditor ref="yiiEditor" v-bind="options" @update="onUpdate" />
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { YiiEditor } from '@yiitap/vue';
import '@yiitap/vue/dist/vue.css';
const yiiEditor = ref<InstanceType<typeof YiiEditor>>();
const options = computed(() => {
return {
content: '',
showMainMenu: false,
showBubbleMenu: true,
sideMenu: {
show: true,
add: 'menu',
},
pageView: 'page',
}
})
function onUpdate({ json, html }: { json: any; html: string }) {
console.log('update', json)
console.log('update', html);
}
</script>
