jsMind 实现复制粘贴

最近在用jsMind做在线版的脑图设计器，发现缺少复制粘贴功能，就自己添加了一个。效果如下：

实现方法：

1.首先在mapping配置项中，增添C和V键

2.在整体事件监听方法内加上 ctrl+c 和 Ctrl+V 的判定

handler: function (e) {
    if (this.jm.view.is_editing()) { return; }
    var evt = e || event;
    if (!this.opts.enable) { return true; }
    var kc = evt.keyCode + (evt.metaKey << 13) + (evt.ctrlKey << 12) + (evt.altKey << 11) + (evt.shiftKey << 10);
    if(evt.keyCode==67||evt.keyCode==86) {
        if(evt.ctrlKey) {//加上Ctrl键判断
            if(evt.keyCode==67) 
            this.handle_copy(this.jm, e);
            if(evt.keyCode==86)
            this.handle_paste(this.jm, e);
        }
    }else if (kc in this._mapping) {
        this._mapping[kc].call(this, this.jm, e);
    }
},

 3.声明复制方法

注意：这里主要是把复制的节点信息数据 保存下来。由于get_selected_node()获取到的不是个标准json对象，就没有处理直接保存到了window 中，你可以自行遍历，然后处理成所要的json后，放到localStorage里

handle_copy:function(_jm, e) {
    var evt = e || event;
    var selected_node = _jm.get_selected_node();
    window.jsMindCopyNode = selected_node;
},

 4.声明粘贴方法

handle_paste:function(_jm, e) {
    var evt = e || event;
    var selected_node = _jm.get_selected_node();
    if (!!selected_node) {//jsMind会查找三次 select节点所以用 !!
        this._mapAddNode(_jm,selected_node,window.jsMindCopyNode);
        delete window.jsMindCopyNode;
    }
},

粘贴方法里，调用的是一个递归插入，因为复制的节点里可能含有子节点

//递归插入
_mapAddNode(_jm,parentNode,insertNode) {
    const me = this;
    var nodeid = jm.util.uuid.newid();
    if (!jm.util.is_node(insertNode)) return;
    var newNode =  _jm.add_node(parentNode,nodeid,insertNode.topic,{});
    if(insertNode.children) {
        insertNode.children.forEach(node=>{
            me._mapAddNode(_jm,newNode,node);
        });
    }
},

这样就大工告成了。

PS:

你也可以借助剪贴板，或者用clipboard.js 外部脚本，把处理成标准json数据格式的数据转成字符串存到剪贴板中

后来回看了下processon 里的做法，发现是把节点数据存入存到LocalStorage里的，