Electron Markdown编辑器实战：资源管理器实现-阿里云开发者社区

前言

平时记笔记的时候一般使用VsCode写markdown，不过在本地写的话上传图片就需要搭配图床来使用，不然的话这种markdown发布到其他地方就有问题。想着能折腾就折腾的心态，干脆就自己实现一个好了。需要实现的功能如下：

资源管理器——包括文件/文件夹的：

创建
删除
复制
移动
重命名

接入掘金markdown编辑器组件并拓展，数据同步到本地
基于GitHub实现图床，配合CDN加速

这篇文章会详细介绍第一点，话不多说，让我们立刻开始～

读取本地资源

首先刚打开编辑器的时候需要用户选择一个文件夹，可以把这个文件夹理解为后续操作的根目录。

选择文件夹这里用到了electron的dialog模块，使用dialog.showOpenDialog这个api就可以唤起本地的文件对话框，让用户选择文件或者文件夹。拿到选择的文件夹之后，需要递归获取下面的子文件夹和文件，由于我们实现的是一个markdown编辑器，所以我在取文件的时候只取了md文件。组装成数结构之后传给渲染进程，然后渲染进程再以树的形式渲染出来。

渲染进程给主进程发送一个事件，这个IPC通信以及搭建这个项目的脚手架在之前的文章🔥Electron打造你自己的录屏软件🔥介绍过，感兴趣的同学可以点进去看看，这里就不多赘述。

  const ipcRenderer = window.electron.ipcRenderer
  const handleSelectFolder = () => {
    ipcRenderer.send(OPEN_FILE_DIALOG)
  }

在主进程中监听这个事件，在用户选择完文件夹后，可以拿到文件夹的路径。然后实现一个generateTree函数，把获取到的根目录递归处理，组装成一个树结构。

import { dialog, ipcMain } from 'electron'
import { OPEN_FILE_DIALOG, SELECTED_DIRECTORY } from '../event'
import fs from 'fs'
import path from 'path'
export default () => {
  ipcMain.on(OPEN_FILE_DIALOG, (event) => {
    dialog
      .showOpenDialog({
        properties: ['openDirectory']
      })
      .then((result) => {
        if (!result.canceled) {
          const directoryPath = result.filePaths[0]
          const generateTree = (dir) => {
            const items = fs.readdirSync(dir, { withFileTypes: true })
            return items
              .map((item) => {
                const fullPath = path.join(dir, item.name)
                if (item.isDirectory()) {
                  return {
                    title: item.name,
                    key: fullPath,
                    children: generateTree(fullPath)
                  }
                } else if (item.isFile() && item.name.endsWith('.md')) {
                  return {
                    title: item.name,
                    key: fullPath,
                    isLeaf: true//后续根据这个判断是不是文件
                  }
                }
              })
              .filter(Boolean)
          }

          let folderTreeData = generateTree(directoryPath)
          folderTreeData = [
            { title: path.basename(directoryPath), key: directoryPath, children: folderTreeData }
          ]
          event.sender.send(SELECTED_DIRECTORY, { folderTreeData, directoryPath })
        }
      })
      .catch((err) => {
        console.log(err)
      })
  })
}

然后渲染进程再监听SELECTED_DIRECTORY这个事件，拿到组装好的结构配合Antd的Tree组件就可以很快的把一棵树渲染出来。

  ipcRenderer.on(SELECTED_DIRECTORY, (event, data) => {
    const { directoryPath, folderTreeData } = data
    if (folderTreeData.length === 0) {
      message.info('文件夹为空，请重新选择')
      return
    }
    setCurrentPath(directoryPath)
    setTreeData(folderTreeData)
  })
  
  // ...
  
  <DirectoryTree
    defaultExpandedKeys={[currentPath]}
    rootClassName={styles.folderTree}
    treeData={treeData}
    onRightClick={handleRightClick}
  />

右键菜单

这里我是做了一个右键菜单，来承载文件夹树的各个操作。

Tree组件本身也提供了右键点击事件，而配合Antd的Dropdown组件的右键触发就可以实现一个右键菜单。但是常规的做法来做的话就要给每一个树节点都需要被一个Dropdown包裹组件，必然会产生一定的性能开销。这里我只用了一个Dropdown组件，只需要动态调整被包裹组件的位置，也可以实现每一个节点的右键菜单功能。

这里树节点的右键点击操作，我们来看看它做了什么：

  const [rightMenus, setRightMenus] = useState([])
  const handleRightClick = ({ event, node }) => {
    const overlay = rightTriggerRef.current
    const { pageX, pageY } = event
    overlay.style.left = `${pageX}px`
    overlay.style.top = `${pageY}px`
    setSelectNode(node)
    setTimeout(() => {
      // overlay
      const event = new MouseEvent('contextmenu', {
        bubbles: true,
        cancelable: true,
        view: window,
        button: 2, // 2 表示右键
        // 如果需要设置鼠标坐标，可以添加以下属性
        clientX: pageX,
        clientY: pageY
      })

      }
      const items = [//...]
      setRightMenus(items)
      // 触发右键事件
      overlay.dispatchEvent(event)
    })
  }
  
//...
 <Dropdown menu={{ items: rightMenus }} trigger={['contextMenu']}>
    <div ref={rightTriggerRef} style={{ position: 'absolute' }}></div>
  </Dropdown>

当右键点击树节点时，可以从event对象中获取到鼠标的坐标位置，同时可以获取到触发的节点对象。这个时候根据鼠标的坐标位置动态设置rightTriggerRef的位置，设置完之后再对这个div创建并触发一个右键事件，那么Dropdown就会被触发了。

创建

点击创建菜单项的时候会弹出一个弹窗，输入完标题点击确定之后就会真正走创建的逻辑。

const path = selectNode.key
ipcRenderer.send(action, path, title, treeData, selectNode)

点击确定之后渲染进程会向主进程发一个事件，介绍一下上面的几个参数：

selectNode：右键菜单触发的节点
action：对应的操作——创建、删除、复制等
path：节点在文件系统的路径，同时作为节点的id
title：标题
treeData：当前的树数据

创建文件

主进程接收到这个事件之后，path参数就是即将被创建的文件的父文件夹路径（因为我们只能在文件夹下创建文件）。我们可以拼出新文件的路径，然后通过fs检查一下这个文件名是否已经存在了，如果不存在的话就通过writeFile创建。


import { sep, join } from 'path'
ipcMain.on(ADD_FILE, (event, path, title, oldData) => {
    const newPath = `${path}${sep}${title}.md`
    const exists = fs.existsSync(newPath)
    if (exists) {
      event.sender.send(COMMON_ERROR, '文件已存在')
      return
    }
    fs.writeFile(newPath, '', { encoding: 'utf8' }, (err) => {
      if (!err) {
        const newData = [...oldData]
        addChildNode(newData, path, { title: `${title}.md`, key: newPath, isLeaf: true })
        event.sender.send(UPDATE_TREE, newData)
      } else {
        console.log('err', err)
        event.sender.send(COMMON_ERROR_LOG, err)
      }
    })
})

注意一点writeFile创建完之后，文件确实在文件系统存在了，但是在页面上的文件树还没有更新，我们得把新创建的节点添加到treeData中，主要关注的是addChildNode这个函数。

// 给定一个父节点 key，在父节点下增加子节点
export const addChildNode = (treeData, parentKey, newNode) => {
  const parentNode = findNodeByKey(treeData, parentKey)
  if (parentNode) {
    parentNode.children.push(newNode)
  } else {
    console.error('Parent node with key', parentKey, 'not found.')
  }
}

// 给定一个节点 key 找到该节点
export const findNodeByKey = (nodes, key) => {
  for (let node of nodes) {
    if (node.key === key) {
      return node
    }
    if (node.children) {
      const foundNode = findNodeByKey(node.children, key)
      if (foundNode) {
        return foundNode
      }
    }
  }
  return null
}

上面两个辅助函数帮我们在指定的父节点下插入子节点，插入完成之后通知渲染进程更新即可。

创建文件夹

创建文件夹的流程基本一样，只不过是创建的API从writeFile换成了mkdir而已，具体代码如下：

ipcMain.on(ADD_FOLDER, (event, path, title, oldData) => {
    const newPath = `${path}${sep}${title}`
    const exists = fs.existsSync(newPath)
    if (exists) {
      event.sender.send(COMMON_ERROR, '文件夹已存在')
      return
    }
    fs.mkdir(newPath, {}, (err) => {
      if (!err) {
        const newData = [...oldData]
        addChildNode(newData, path, { title: `${title}`, key: newPath, children: [] })
        event.sender.send(UPDATE_TREE, newData)
      } else {
        console.log('err', err)
        event.sender.send(COMMON_ERROR_LOG, err)
      }
    })
})

重命名

重命名操作的交互跟创建的交互是一样，主要也是关注标题就可以了。来看一下重命名具体做的事情。需要根据文件/文件夹的完整路径中找出旧名字，然后把新名字拼在完整路径上就可以。这里可以根据分割符path.sep来分割完整路径，最后一项就是旧名字。

  ipcMain.on(RENAME, (event, path, title, oldData, selectNode) => {
    const arr = path.split(sep)
    arr.pop()
    if (selectNode.isLeaf) {
      arr.push(`${title}.md`)
    } else {
      arr.push(title)
    }
    let newPath = `${sep}${join(...arr)}`
    const exists = fs.existsSync(newPath)
    if (exists) {
      event.sender.send(COMMON_ERROR, '文件/文件夹重名')
      return
    }
    fs.rename(path, newPath, (err) => {
      if (err) {
        console.log('err', err)
        event.sender.send(COMMON_ERROR_LOG, err)
      } else {
        const newData = [...oldData]
        updateNodeValue(newData, path, 'title', selectNode.isLeaf ? `${title}.md` : title)
        updateNodeValue(newData, path, 'key', newPath)
        event.sender.send(UPDATE_TREE, newData)
      }
    })
  })

同理，更新完文件系统的名字之后，我们还需要更新界面的数据。这里实现了一个updateNodeValue函数，来更新指定节点的某一个属性值。这里直接复用findNodeByKey这个函数，注意的是更新完title属性之后也需要更新key属性。

export const updateNodeValue = (treeData, nodeKey, nodeLabel, newValue) => {
  const node = findNodeByKey(treeData, nodeKey)
  if (node) {
    node[nodeLabel] = newValue
  }
}

删除

对于删除来说，会弹一个二次确认，点击确定之后就会真正进入删除的流程。删除的时候也可以使用fs模块封装好的api，删除文件的时候用unlinkSync，删除文件夹用rmSync，因为删除文件夹需要递归删除的，即实现类似 rm -rf 的功能，所以要加上一个{ recursive: true }参数。

  const deleteFileOrFolder = (event, path, selectNode, oldData) => {
    try {
      if (selectNode.isLeaf) {
        fs.unlinkSync(path)
      } else {
        fs.rmSync(path, { recursive: true })
      }
      const newData = [...oldData]
      deleteNodeByKey(newData, path)
      event.sender.send(UPDATE_TREE, newData)
    } catch (err) {
      console.log('err', err)
      event.sender.send(COMMON_ERROR_LOG, err)
    }
  }

  ipcMain.on(DELETE, deleteFileOrFolder)

删除完文件系统的时候别忘了删除界面上的，这里实现了一个deleteNodeByKey函数。主要也是通过递归找到对应key的节点，然后把它删除。

export const deleteNodeByKey = (treeData, nodeKey) => {
  // 遍历树
  for (let i = 0; i < treeData.length; i++) {
    const node = treeData[i]
    if (node.key === nodeKey) {
      // 如果当前节点是要删除的节点，直接从树的数组中删除该节点
      treeData.splice(i, 1)
      // 删除成功后退出函数
      return
    }
    if (node.children) {
      // 如果当前节点有子节点，递归删除
      deleteNodeByKey(node.children, nodeKey)
    }
  }
}

复制

复制的时候我这里的交互是把源文件/文件夹，复制到某一个文件夹下：

所以需要有一棵这样的树来选择目标文件夹，这棵树也是基于treeData构建出来的，取的是treeData的非叶子节点，即文件夹节点。

export const getNonLeafNodesFromArray = (treeData) => {
  const nonLeafNodes = []

  treeData.forEach((tree) => {
    if (tree.children && tree.children.length > 0) {
      // 如果有子节点，则将当前节点加入新树，并递归获取非叶子节点
      nonLeafNodes.push({
        ...tree,
        children: getNonLeafNodesFromArray(tree.children)
      })
    }
  })

  return nonLeafNodes.length > 0 ? nonLeafNodes : []
}

首先复制的时候需要判断目标文件夹下有没有跟源文件同名的，如果有，则需要把名称加上一个唯一标识，为了方便我这里使用的是时间戳。其次，如果复制的是文件夹，文件夹下的文件路径中其实会包含文件夹的路径信息，所以这里也需要同步修改一下。然后判断一下目标文件夹是不是源文件夹的子文件夹，如果是，则中断流程。最后使用fs-extra模块的copySync复制就好了，复制完之后调用addChildNode给页面插入新节点。

  import fsExtra from 'fs-extra'
  const copy = (event, path, targetPath, selectNode, oldData) => {
    let newTitle = selectNode.title
    if (fs.existsSync(`${targetPath}/${newTitle}`)) {
      if (selectNode.isLeaf) {
        const extIndex = newTitle.lastIndexOf('.')
        newTitle = `${selectNode.title.substring(0, extIndex)}_${Date.now()}.md`
      } else {
        newTitle = `${selectNode.title}_${Date.now()}`
      }
    }

    const newNode = {
      title: newTitle,
      key: `${targetPath}${sep}${newTitle}`
    }
    if (selectNode.isLeaf) {
      newNode.isLeaf = true
    } else {
      newNode.children = cloneDeep(selectNode.children)
      //递归遍历，修改文件夹下的文件路径
      dfs(newNode.children, (node) => {
        node.key = node.key.replace(`${targetPath}/${selectNode.title}`, newNode.key)
      })
    }
    if (!selectNode.isLeaf) {
      // 如果目标文件夹是源文件夹的子文件夹，则不进行复制
      let newDestinationDir = newNode.key

      if (isSubdirectory(path, newDestinationDir)) {
        event.sender.send(COMMON_ERROR, '目标文件夹是源文件夹的子文件夹，无法复制！')
        return
      }
      // 使用 fs-extra 的 copy 方法复制文件夹
      try {
        fsExtra.copySync(path, newDestinationDir)
      } catch (error) {
        event.sender.send(COMMON_ERROR_LOG, error)
      }
    } else {
      try {
        const content = fs.readFileSync(path, { encoding: 'utf8' })
        fs.writeFileSync(newNode.key, content, { encoding: 'utf8' })
      } catch (error) {}
    }
    const newData = [...oldData]
    addChildNode(newData, targetPath, newNode)
    event.sender.send(UPDATE_TREE, newData)
    return { data: newData, success: true }
  }

  ipcMain.on(COPY, copy)

移动

移动的交互跟复制一样，对于移动这个操作，我这里是这样实现的，先复制一份，然后再把源文件删除。有了上面的铺垫之后就很简单了，5行代码搞定

  ipcMain.on(MOVE, (event, path, targetPath, selectNode, oldData) => {
    const copyRes = copy(event, path, targetPath, selectNode, oldData)
    if (copyRes.success) {
      deleteFileOrFolder(event, path, selectNode, copyRes.data)
    }
  })

最后

刚开始的时候我是想着找一个开源组件来着，结果没找到合适的，就自己实现了一个，做完之后自己感觉是复习了一遍文件操作和树结构操作。后面将会介绍编辑器主体接入与图床实现，如果你觉得有意思的话，点点关注点点赞吧～

Electron Markdown编辑器实战：资源管理器实现

前言

读取本地资源

右键菜单

创建

创建文件

创建文件夹

重命名

删除

复制

移动

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Electron Markdown编辑器实战：资源管理器实现

前言

读取本地资源

右键菜单

创建

创建文件

创建文件夹

重命名

删除

复制

移动

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景