块编辑器 ​

@dou-ui/editor 提供块编辑器 DouEditor。文档由一个个块组成，每个块可以转换类型、拖动排序、缩进嵌套。

安装 ​

块编辑器是单独的包，需要和 dou-ui 一起使用：

bun add dou-ui @dou-ui/editor

引入样式，再注册组件：

import 'dou-ui/style.css'
import '@dou-ui/editor/style.css'
import { DouEditor } from '@dou-ui/editor'

app.use(DouEditor)

也可以只在用到的组件里 import { DouEditor } from '@dou-ui/editor'。

基础用法 ​

v-model 绑定一份文档，里面的 blocks 是块数组，格式见文档数据。

• 输入 / 打开块菜单，继续输入可以筛选，Enter 选中。在空块里会转换当前块，在有内容的块里会在下方插入新块。
• 鼠标移到块上，左侧出现手柄：点击 + 在下方添加块；拖动 ⋮⋮ 移动块，点击它打开块菜单，可以转换类型、复制、移动和删除。
• 在手机等触屏设备上，光标所在的块左侧出现 ⋮⋮：按住拖动可以移动块，点一下打开块菜单，菜单里的“上移”“下移”适合小幅调整。
• 选中文字后，上方出现格式工具栏，可以设置粗体、斜体、链接、颜色和对齐，也可以转换所在块的类型。
• 粘贴网页或其他编辑器的内容时，标题、列表（包括嵌套列表和任务列表）、引用、代码和链接都会保留。
• 行首输入 #、-、1.、[] 等 Markdown 标记会转换块的类型，Tab 和 Shift+Tab 调整缩进。完整列表见快捷操作。

只读 ​

readonly 让文档只能阅读：手柄、块菜单和工具栏都不会出现，待办事项不能勾选，链接可以直接点击打开。

打开链接 ​

编辑时按住 Ctrl / ⌘ 点击链接，或者在只读状态下点击链接，链接会在新标签页打开。打开之前会触发 linkOpen 事件，参数里有链接地址 link 和链接所在块的 id block。调用 event.preventDefault() 后编辑器不再自己打开，可以改用应用的路由，或者先让用户确认：

import type { EditorLinkOpenEvent } from '@dou-ui/editor'

function onLinkOpen(event: EditorLinkOpenEvent) {
  if (event.link.startsWith('/')) {
    event.preventDefault()
    router.push(event.link)
  }
}

读取和修改内容 ​

v-model 会在每次修改后更新。也可以通过组件实例读取或替换其中的块：

<script setup lang="ts">
import { DouEditor } from '@dou-ui/editor'
import { useTemplateRef } from 'vue'

const editor = useTemplateRef('editor')

function reset() {
  editor.value?.setBlocks([{ type: 'paragraph', content: '' }])
}
</script>

<template>
  <DouEditor ref="editor" />
</template>

setBlocks 和从外部修改 v-model 一样，不会进入撤销记录。按块插入、修改、移动并可以撤销的方法，以及跟踪修改和光标的事件，见用代码修改。

协同编辑 ​

多人同时编辑同一份文档，见协同编辑。

API ​

Editor Props ​

Editor Events ​

Editor Exposes ​

CSS 变量 ​