工具栏配置以及实现¶

一、效果预演¶

后续实现过程中可能与当前有差异，会实时调整工具栏

二、实现方案¶

2.1 src/main/menu.ts 新增¶

创建一个menu的文件夹，再创建一个menu.ts的文件，menu的文件夹专门处理跟菜单相关的东西。

这个网上有很多的教程，使用electron的Menu组件就行。

这里牵扯到menu要跟主进程窗口交互，所以这里需要将主窗口的锚点（没学过electron和js，不知道专业的叫啥）给传进去。

下面的是一部分示例的代码，完整代码参考前面的预览实现菜单栏。

src/main/menu.ts 参考


TypeScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 import { Menu } from 'electron'

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建文件',
        accelerator: 'ctrl+n',
        click: function () {
          alert('ctrl')
        }
      },
      {
        label: '新建窗口',
        accelerator: 'Ctrl+Shift+N',
        click: function () {
          alert('新建窗口')
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '编辑文件'
      },
      {
        label: '编辑窗口'
      }
    ]
  }
]

export function getApplicationMenu(mainWindow) {
  return template
}

2.2 src/main/index.ts¶

先导入import { getApplicationMenu } from './menu/menu'

修改创建窗口的函数。参考如下：

src/main/index.ts 参考


TypeScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 function createWindow(): void {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    title: 'HemyMarkdownEditor',
    autoHideMenuBar: false,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
    }
  })

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })

  mainWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url)
    return { action: 'deny' }
  })

  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }

  const menu = Menu.buildFromTemplate(getApplicationMenu(mainWindow))
  Menu.setApplicationMenu(menu)
}

这里要注意，修改了两个地方：

new BrowserWindow 需要将autoHideMenuBar这个地方修改为false，否则菜单不显示，默认隐藏。前后调试了一天，一直以为是代码什么地方写的有问题。
使用Menu.setApplicationMenu(menu)显示菜单栏

工具栏配置以及实现¶

一、效果预演¶

二、实现方案¶

2.1 src/main/menu.ts 新增¶

2.2 src/main/index.ts¶

三、成品展示¶

3.1 文件¶

3.2 编辑¶

3.3 视图¶

3.4 编码¶

3.5 插入¶

3.6 设置¶

3.7 工具¶

3.8 插件¶

3.9 在线工具¶

3.10 链接¶

3.11 帮助¶