AP Editor

基于 Tiptap 的企业级富文本编辑器

这是一个测试项目，请勿在生产环境中使用。

特性

• 📝 完整的富文本编辑功能
• 📊 强大的表格支持（含合并单元格）
• 💻 代码块语法高亮
• 📰 分栏布局
• ✨ 高亮块
• 🔢 有序/无序列表
• ✅ 任务列表
• 🎯 斜杠命令菜单
• 💬 气泡菜单
• 🖱️ 框选功能
• 🔧 块级拖拽手柄

安装

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

使用

基本用法

<template>
  <div id="app">
    <ApEditor />
  </div>
</template>

<script setup>
import { useEditor, EditorContent } from 'ap-editor'
import { onBeforeUnmount, ref } from 'vue'

const editor = useEditor({
  content: '<p>Hello World!</p>',
  extensions: [
    // 使用默认扩展
  ],
})

onBeforeUnmount(() => {
  editor.value?.destroy()
})
</script>

使用内置组件

<template>
  <div class="apEditor">
    <EditorContent :editor="editor" />
    <BubbleMenu :editor="editor" v-if="editor" />
    <BlockOverlay :editor="editor" container-selector=".apEditorContent" />
  </div>
</template>

<script setup>
import { useEditor, EditorContent, BubbleMenu, BlockOverlay, createEditorOptions } from 'ap-editor'
import { onBeforeUnmount, ref } from 'vue'

const editor = useEditor(createEditorOptions({
  content: '<p>Hello World!</p>'
}))

onBeforeUnmount(() => {
  editor.value?.destroy()
})
</script>

<style>
@import 'ap-editor/style.css';
</style>

扩展列表

| 扩展 | 说明 | |------|------| | StarterKit | Tiptap 基础扩展包 | | Bold | 加粗 | | Italic | 斜体 | | Underline | 下划线 | | Strike | 删除线 | | TextAlign | 文本对齐 | | TextStyleKit | 文本样式（颜色、背景、字号） | | Placeholder | 占位符 | | TaskList | 任务列表 | | TaskItem | 任务项 | | RewriteOrderedList | 自定义有序列表 | | RewriteBulletList | 自定义无序列表 | | CodeBlock | 代码块（带语法高亮） | | TablePlus | 增强表格 | | CustomTableCell | 自定义表格单元格 | | HighlightBlock | 高亮块 | | Columns | 分栏 | | Column | 分栏列 | | SlashCommand | 斜杠命令菜单 | | BoxSelect | 框选功能 |

发布到 npm

# 进入包目录
cd packages/ap-editor

# 安装依赖
npm install

# 构建
npm run build

# 发布
npm publish

License

MIT