Skip to content

如何复制、剪切、粘贴

使用按钮触发

一个常规的思维导图一般会实现一个右键菜单,右键菜单中会提供复制、剪切、粘贴三个按钮,当点击了这三个按钮需要能执行复制、剪切、粘贴操作,这需要调用内部的一些方法来完成:

js
// 点击了复制按钮
const onCopyBtnClick = () => {
    mindMap.renderer.copy()
}

// 点击了剪切按钮
const onCutBtnClick = () => {
    mindMap.renderer.cut()
}

// 点击了粘贴按钮
const onPasteBtnClick = () => {
    mindMap.renderer.paste()
}

copycut方法会保存你当前激活的节点数据用于粘贴,如果浏览器及协议(https)支持js操作剪贴板数据,那么复制或剪切的节点数据也会同时添加到用户的剪贴板中,在其他地方也可以进行粘贴。

paste方法会执行粘贴操作,如果浏览器及协议(https)支持js操作剪贴板数据,那么其他地方复制的数据也可以进行粘贴,比如你可以进行跨浏览器粘贴simple-mind-map节点,如果是非simple-mind-map节点数据,那么会提取出剪切板中的文本和图片进行粘贴,文本默认会粘贴为子节点,图片默认会添加到当前的节点中。

如果浏览器或协议(https)不支持js操作剪贴板数据,那么copycut方法复制和剪切的数据只会保存在当前页面的内存中,无法在其他地方粘贴。

如果复制或剪切了画布数据,同时剪切板中也存在数据,那么默认会以最新的Ctrl+cCtrl+x操作为准,比如你先复制了节点,然后又复制了其他地方的文本,那么会粘贴最后一次的操作,也就是其他地方复制的文本数据。

使用快捷键

核心库内部默认支持Ctrl+cCtrl+xCtrl+v三个快捷键来执行复制、剪切、粘贴操作。

当激活了某个节点,按Ctrl+c会复制当前激活节点的数据,按Ctrl+x会删除当前激活节点,同时保存该节点的数据供粘贴。

当按了Ctrl+cCtrl+x后,按Ctrl+v会在当前激活的节点粘贴复制或剪切的数据。

这三个快捷键内部调用的其实就是前面的copycutpaste方法。

完整示例

MIT License.