Lotion：Vue 3 构建的开源 Notion 风格编辑器

本文介绍 Lotion，一个使用 Vue 3 构建的开源 Notion 风格 UI 编辑器，提供块级编辑和拖拽排序功能。

Lotion 简介

Lotion 是由 Dashibase 开发的开源项目，使用 Vue 3 构建的 Notion 风格 UI 编辑器。它提供了块级编辑、拖拽排序、Markdown 支持等核心功能，在 GitHub 上拥有 2.9k stars 和 140 forks，采用 GPL-3.0 许可证。

核心定位：An open-source Notion UI built with Vue 3

核心特性

• 块级编辑器：基于块的文档编辑方式
• 拖拽排序：支持拖拽重新排列块
• Markdown 解析：支持粗体、斜体、标题、分隔符等基础 Markdown 语法
• 命令菜单：输入 '/' 呼出命令菜单和快捷方式
• 自定义块：支持注册自定义块类型
• 只读模式：支持只读展示模式

基本信息

• GitHub 仓库：https://github.com/Dashibase/lotion
• 在线演示：https://lotion.dashibase.com
• 星标数：2.9k stars
• Fork 数：140 forks
• 许可证：GPL-3.0

技术栈

安装方法

NPM 安装

npm i @dashibase/lotion

使用示例

<template>
  <Lotion :blocks="blocks" />
</template>

<script setup>
import { ref } from 'vue'
import Lotion from '@dashibase/lotion'

const blocks = ref([
  {
    type: 'heading',
    props: { level: 1 },
    content: '欢迎使用 Lotion'
  },
  {
    type: 'paragraph',
    content: '这是一个块级编辑器'
  }
])
</script>

块类型支持

Lotion 支持多种块类型：

命令菜单

输入 '/' 呼出命令菜单，支持：

• 快速插入块
• 快捷键操作
• 搜索块类型

自定义块

支持注册自定义块：

import { registerBlock } from '@dashibase/lotion'

registerBlock({
  type: 'custom-block',
  component: CustomBlockComponent,
  icon: 'icon-name',
  title: '自定义块'
})

适用场景

• 文档编辑器
• 笔记应用
• 内容管理系统
• Wiki 系统

总结

Lotion 是一个现代化的块级编辑器，提供了类似 Notion 的编辑体验，适合需要富文本编辑功能的 Vue 3 项目。