在 Electron 中创建文本编辑器：第 1 部分 - 读取文件

让我们首先创建package.json文件并安装所需的软件包

{
  "name": "intro-to-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electromon main.js  --ignore static"
  },
  "author": "Aurel Kurtula",
  "license": "ISC",
  "dependencies": {
    "electromon": "^1.0.10",
    "electron": "^2.0.8"
  }
}

现在我们需要创建main.js文件。我们的 Electron 应用将从这里启动：

const { app, BrowserWindow } = require('electron')
const path = require('path')

app.on('ready', function(){
    let window = new BrowserWindow({width:800, height:600})
    window.loadURL(path.join('file://', __dirname, 'static/index.html'))
})
app.on('close', function() {
    window = null
})

当应用程序准备就绪时，我们创建一个窗口，加载要渲染的静态文件。当应用程序关闭时，我们确保浏览器窗口被删除。

让我们创建该static/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="X-UA-Compatible" content="ie=edge">
  <title>Hello World!</title>
  <link rel="stylesheet" href="./styles/main.css">
</head>
<body class="index">
  <div class="container">
    <ul id="titles"></ul>
    <div id="content" contenteditable="true">
        <p>Select a title <br />  &#x2190</p>
    </div>
  </div>
  <script src="scripts/index.js"></script>
</body>
</html>

它真的很简单，#titles会#content显示文件标题和内容。正如你所见，它就是常见的前端代码。我们用的是 CSS 和 JavaScript。

读取系统文件

我创建了一堆 Markdown 文件，并将它们放在一个./data目录中，现在我们将读取它们并将标题添加到应用中。我们将在static/scripts/index.js

const fs = require('fs')
const path = require('path')
const { readTitles } = require(path.resolve('actions/uiActions'))
readTitles('./data').map(({title, dir}) => {
    el = document.createElement("li");
    text = document.createTextNode(`${title.split('.md')[0]}`);
    el.appendChild(text)
    el.addEventListener('click', function(e){ // clicking on sidebar titles
        fs.readFile(dir, (err, data) => {
        if (err) throw err;
        fileDir = dir;
        document.getElementById('content').innerHTML = data;
        });
    })
    document.getElementById('titles').appendChild(el)
})

在第三行，我只需要我的模块readTitles，它只是读取标题并将其作为数组对象返回。我浏览它们，创建一个列表元素，然后添加一个事件监听器，将文件内容注入到#content

我认为这是结束本入门教程的一个好时机。

请注意，该窗口只是一个 Chrome 浏览器，您可以在其中打开开发工具。您可以像往常一样从视图菜单中进行操作，也可以让 Electron 在启动时打开开发工具。这可以在./main.js页面中完成

window.webContents.setDevToolsWebContents(devtools.webContents)
window.webContents.openDevTools({mode: 'detach'})

下次我们将开始编辑数据文件并创建我们自己的自定义菜单

查看 github 代码。分支：part1

在 Electron 中创建文本编辑器：第 2 部分 - 写入文件

aurel kurtula ・ 18年9月9日

#电子 #javascript #节点

文章来源：https://dev.to/aurelkurtula/creating-a-text-editor-in-electron-reading-files-13b8