node.js - Windows上的Electron中的dialog.showOpenDialog是否存在问题？

我正在研究一本书中的示例，似乎无法超越。当我按Ctrl-o时，它显示打开文件的对话框，但它从未加载到标记编辑器中。但是，如果我使用VSCode中的调试器运行它，则可以正常运行。

我认为问题在于此部分:

dialog.showOpenDialog(window, options, paths => {
    if (paths && paths.length > 0) {
      const content = fs.readFileSync(paths[0]).toString();
      window.webContents.send('load', content);
    }
  });

这是我的menu.js文件:

const { 
    app,
    Menu,
    shell,
    ipcMain,
    BrowserWindow,
    globalShortcut,
    dialog
} = require('electron');

const fs = require('fs');

function saveFile() {
  console.log('Saving the file');

  const window = BrowserWindow.getFocusedWindow();
  window.webContents.send('editor-event', 'save');
}

function loadFile() {
  console.log('loadFile confirmation');
  const window = BrowserWindow.getFocusedWindow();
  const options = {
    title: 'Pick a markdown file',
    filters: [
      { name: 'Markdown files', extensions: ['md'] },
      { name: 'Text files', extensions: ['txt'] }
    ]
  };


  dialog.showOpenDialog(window, options, paths => {
    if (paths && paths.length > 0) {
      const content = fs.readFileSync(paths[0]).toString();
      window.webContents.send('load', content);
    }
  });
}





app.on('ready', () => {
    globalShortcut.register('CommandOrControl+S', () => {
      saveFile();
    });

       globalShortcut.register('CommandorControl+O', () => {
         console.log('Ctrl-O received');
         loadFile();
       });
      });
     
  


ipcMain.on('save', (event, arg) => {
    console.log(`Saving content of the file`);
    console.log(arg);
  
    const window = BrowserWindow.getFocusedWindow();
    const options = {
      title: 'Save markdown file',
      filters: [
        {
          name: 'MyFile',
          extensions: ['md']
        }
      ]
    };

    
  
    //Broken code from book apparently: dialog.showSaveDialog(window, options, filename => {
      let filename = dialog.showSaveDialogSync(window, options);
      console.log(filename);
      if (filename) {
        console.log(`Saving content to the file: ${filename}`);
        fs.writeFileSync(filename, arg);
      }
    //Broken code from book apparently });
    
  });

ipcMain.on('editor-reply', (event, arg) => {
    console.log(`Receieved reply from web page: ${arg}`);
});



const template = [
    {
        label: 'Format',
        submenu: [
            {
                label: 'Toggle Bold',
                click() {
                    const window = BrowserWindow.getFocusedWindow();
                    window.webContents.send('editor-event',
                    'toggle-bold'
                    );
                    
                }
                
      
                
            }
        ]
    }
];

if (process.env.DEBUG) {
  template.push({
    label: 'Debugging',
    submenu: [
      {
        label: 'Dev Tools',
        role: 'toggleDevTools'
      },

      {type: 'separator' },
      {
        role: 'reload',
        accelerator: 'Alt+R'
      }
    ]
  });
}


const menu = Menu.buildFromTemplate(template);

module.exports = menu;

我的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta 
    http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-inline';" />
    <style>
        html, body {
            height: 100%;
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .CodeMirror {
            flex: 1;
        }
    </style>

    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/simplemde/dist/simplemde.min.css">
    <script src="./node_modules/simplemde/dist/simplemde.min.js"></script>
    


</head>
<body>
    <textarea id="editor"></textarea>

    <script>
        var editor = new SimpleMDE({
            element: document.getElementById('editor')
        });
        const { ipcRenderer }  = require('electron');
        ipcRenderer.on('editor-event', (event, arg) => {
            console.log(arg);
            
            event.sender.send('editor-reply', `Received ${arg}`);
            if (arg === 'toggle-bold') {
                editor.toggleBold();
            }
            if (arg === 'save') {
                event.sender.send('save', editor.value());
            }
            
        });
        ipcRenderer.on('load', (event, content) => {
            if (content) {
                editor.value(content);
            }
        });

        
        ipcRenderer.send('editor-reply', 'Page Loaded');

    </script>
    
</body>
</html>

最佳答案

如相关文档中所述，在Electron的最新版本中:dialog.showOpenDialog ()不再使用回调函数，而是现在返回一个Promise，因此必须改为使用.then语法:

function loadFile() {
    console.log('loadFile confirmation');
    const window = BrowserWindow.getFocusedWindow();
    const options = {
        title: 'Pick a markdown file',
        filters: [
            { name: 'Markdown files', extensions: ['md'] },
            { name: 'Text files', extensions: ['txt'] }
        ]
    };
    dialog.showOpenDialog(window, options).then
    (
        result => {
            if (!result.canceled)
            {
                let paths = result.filePaths;
                if (paths && paths.length > 0) {
                    const content = fs.readFileSync(paths[0]).toString();
                    console.log (content);
                    // window.webContents.send('load', content);
                }
            }
        }
    );
}

loadFile();

或者，您可以使用dialog.showOpenDialogSync ()函数，该函数直接返回文件路径的数组；如果对话框已被用户取消，则返回undefined。

关于node.js - Windows上的Electron中的dialog.showOpenDialog是否存在问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61991652/

node.js - Windows上的Electron中的dialog.showOpenDialog是否存在问题？

上一篇：javascript - 在nedb中添加的记录是单个记录，但是为什么VUE会多次存储相同的记录？

下一篇：javascript - svelte electron 中的 JS 文件中不能需要 Node 模块