Lianshu Editor

一个基于 Tiptap 的 Notion 风格富文本编辑器，专为 Vue 3 设计。

特性

• 🎨 Notion 风格：行首加号菜单、斜杠命令、悬浮工具栏
• 🖼️ 图片上传：支持拖拽、粘贴、点击上传
• 🌓 主题切换：内置浅色/深色主题支持
• 💻 代码高亮：支持 20+ 种编程语言
• ✅ 任务列表：可勾选的待办事项
• 📝 Markdown 快捷键：支持常用 Markdown 语法
• 🎯 TypeScript：完整的类型定义

安装

npm install lianshu-editor

使用

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { LianshuEditor } from 'lianshu-editor'
import 'lianshu-editor/style.css'

const content = ref('<p>Hello World</p>')
</script>

<template>
  <LianshuEditor v-model="content" />
</template>

主题配置

<template>
  <LianshuEditor
    v-model="content"
    :theme="isDark ? 'dark' : 'light'"
  />
</template>

图片上传配置

<script setup lang="ts">
import { LianshuEditor, type ImageConfig } from 'lianshu-editor'

const imageUploader = async (file: File) => {
  // 上传到你的服务器
  const formData = new FormData()
  formData.append('file', file)
  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  })
  const data = await response.json()

  return {
    errorCode: 0,
    data: {
      src: data.url,
      alt: file.name
    }
  }
}

const imageConfig: ImageConfig = {
  uploader: imageUploader,
  maxSize: 5, // 最大 5MB
  acceptTypes: ['jpeg', 'jpg', 'png', 'gif', 'webp']
}
</script>

<template>
  <LianshuEditor
    v-model="content"
    :image="imageConfig"
  />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | '<p></p>' | 编辑器内容（HTML） | | placeholder | string | "输入 '/' 唤起菜单..." | 占位符文本 | | editable | boolean | true | 是否可编辑 | | theme | 'light' \| 'dark' | 'light' | 主题 | | image | ImageConfig \| boolean | false | 图片配置 |

类型定义

interface ImageUploader {
  (file: File): Promise<{
    errorCode: number
    data: {
      src: string
      alt?: string
      title?: string
    }
  }>
}

interface ImageConfig {
  uploader?: ImageUploader
  maxSize?: number // MB
  acceptTypes?: string[]
}

开发构建

• 构建完整库：npm run build
• 仅构建 MobileEditor：npm run build:mobile

License

MIT