diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 095d5a36..178d1096 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -244,5 +244,17 @@ export const defaultOpt = { // 比如向右拖动时,思维导图图形的最左侧到达画布中心时将无法继续向右拖动,其他同理 isLimitMindMapInCanvas: false, // 当注册了滚动条插件(Scrollbar)时,是否将思维导图限制在画布内,isLimitMindMapInCanvas不再起作用 - isLimitMindMapInCanvasWhenHasScrollbar: true + isLimitMindMapInCanvasWhenHasScrollbar: true, + // 在节点上粘贴剪贴板中的图片的处理方法,默认是转换为data:url数据插入到节点中,你可以通过该方法来将图片数据上传到服务器,实现保存图片的url + // 可以传递一个异步方法,接收Blob类型的图片数据,需要返回如下结构: + /* + { + url, // 图片url + size: { + width, // 图片的宽度 + height //图片的高度 + } + } + */ + handleNodePasteImg: null } diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index e15fe01c..76ae08cb 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -895,8 +895,11 @@ class Render { // 粘贴 async paste() { - const { errorHandler, handleIsSplitByWrapOnPasteCreateNewNode } = - this.mindMap.opt + const { + errorHandler, + handleIsSplitByWrapOnPasteCreateNewNode, + handleNodePasteImg + } = this.mindMap.opt // 读取剪贴板的文字和图片 let text = null let img = null @@ -999,7 +1002,13 @@ class Render { // 存在图片,则添加到当前激活节点 if (img) { try { - let imgData = await loadImage(img) + let imgData = null + // 自定义图片处理函数 + if (handleNodePasteImg && typeof handleNodePasteImg === 'function') { + imgData = await handleNodePasteImg(img) + } else { + imgData = await loadImage(img) + } if (this.activeNodeList.length > 0) { this.activeNodeList.forEach(node => { this.mindMap.execCommand('SET_NODE_IMAGE', node, { diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index c260c11a..cd199527 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -338,6 +338,20 @@ export default { break } } + // handleNodePasteImg: img => { + // console.log(img) + // return new Promise(resolve => { + // setTimeout(() => { + // resolve({ + // url: require('../../../assets/img/themes/autumn.jpg'), + // size: { + // width: 100, + // height: 100 + // } + // }) + // }, 200) + // }) + // } // isUseCustomNodeContent: true, // 示例1:组件里用到了router、store、i18n等实例化vue组件时需要用到的东西 // customCreateNodeContent: (node) => {