拖拽手柄扩展

你是否曾经想在你的编辑器中拖拽节点？我们也是——因此这里有一个扩展来实现它。

DragHandle 扩展允许你轻松地处理编辑器中的节点拖拽。你可以定义自定义渲染函数、位置等。

安装

npm install @tiptap/extension-drag-handle

设置

render

定义一个通过 tippy.js 定位的元素。该元素作为拖动节点时显示的手柄。

DragHandle.configure({
  render: () => {
    const element = document.createElement('div')

    // 用于 CSS 插入图标的钩子
    element.classList.add('custom-drag-handle')

    return element
  },
})

tippyOptions

tippy.js 的配置项。你可以传入 tippy.js 文档中的任意选项。

默认值：undefined

DragHandle.configure({
  tippyOptions: {
    placement: 'left',
  },
})

onNodeChange

当鼠标悬停在某个节点时，返回该节点或 null。可以用来高亮悬停的节点。

默认值：undefined

DragHandle.configure({
  onNodeChange: ({ node, editor, pos }) => {
    if (!node) {
      selectedNode = null
      return
    }
    // 处理悬停节点
    selectedNode = node
  },
})

命令

lockDragHandle()

锁定拖拽手柄，使其保持可见且被锁定状态。如果此前手柄是可见的，则保持可见直到解锁；如果之前隐藏，则保持隐藏直到解锁。

适合在手柄内设置菜单，并希望菜单在鼠标悬停或不悬停时都保持可见。

editor.commands.lockDragHandle()

unlockDragHandle()

解锁拖拽手柄，恢复默认的可见性和行为。

editor.commands.unlockDragHandle()

toggleDragHandle()

切换拖拽手柄的锁定状态。若锁定，则解锁；若未锁定则锁定。

editor.commands.toggleDragHandle()