拖拽句柄 Vue 扩展

您是否曾希望在基于 Vue 的编辑器中拖动节点？好吧，我们也有这个想法——所以这就是为此而创建的扩展。

DragHandleVue 组件使您能够轻松地在编辑器中拖动节点。您可以定义自定义渲染函数、位置等。
它实质上将 DragHandle 扩展包装在 Vue 组件中，并会自动与编辑器注册/注销扩展。

安装

npm install @tiptap/extension-drag-handle-vue-3 @tiptap/extension-drag-handle @tiptap/extension-node-range @tiptap/extension-collaboration @tiptap/y-tiptap yjs y-protocols

Vue 2 与 Vue 3 的区别

拖拽句柄扩展提供两个版本。请确保根据您的 Vue 版本安装正确的版本。分别是 @tiptap/extension-drag-handle-vue-2 和 @tiptap/extension-drag-handle-vue-3

属性

所有属性遵循与 DragHandle 扩展相同的结构。

children

应显示在拖拽句柄内的内容。

<drag-handle>
  <div>拖拽我！</div>
</drag-handle>

tippyOptions

tippy.js 的配置选项。您可以传入在 tippy.js 文档中列出的任意选项。

默认值： undefined

<drag-handle :tippy-options="{ placement: 'left' }">
  <div>拖拽我！</div>
</drag-handle>

onNodeChange

当节点被悬停时返回节点或者 null。您可以用它来高亮当前悬停的节点。

默认值： undefined

<template>
  <drag-handle @nodeChange="handleNodeChange">
    <div>拖拽我！</div>
  </drag-handle>
</template>

<script>
import { ref } from 'vue'
import { DragHandle } from '@tiptap/extension-drag-handle-vue-3'

export default {
  components: {
    DragHandle,
  },
  setup() {
    const selectedNode = ref(null)

    const handleNodeChange = ({ node, editor, pos }) => {
      selectedNode.value = node
      // 对节点执行某些操作
    }

    return {
      selectedNode,
      handleNodeChange,
    }
  },
}
</script>

pluginKey

编辑器中用于存储插件的键。若您在同一编辑器中使用多个拖拽句柄，此属性非常有用。

默认值： undefined

<drag-handle pluginKey="myCustomDragHandle">
  <div>拖拽我！</div>
</drag-handle>

命令

请参阅 DragHandle 扩展以获取可用的编辑器命令。