Creating a text editor in Electron: part 1 - Reading files

Let's start by creating the package.json file, and installing the required packages



{
  "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"
  }
}

Now we need to create the main.js file. This is where our electron app is going to start from:



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
})

When the app is ready we create a window, load a static file to be rendered in. When the app closes, we make sure the browser window is removed.

Let's create the static/index.html file.



<!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>

It's simple really, #titles will have file titles and the #content will show their content. As you can see, it's the usual front end stuff. We have CSS and javascript.

Reading system files

I created a bunch of markdown files, placed them in a ./data directory and now we'll read them and add the titles to the app. We'll do that in 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)
})

In the third line I just require my module readTitles which simply reads the title and returns them as array object. I look through them, create a list element, then add an event listener which injects the contents of the file in the #content

I think this is a good point to end this introductory tutorial.

Note that the window is just a chrome browser, you are able to open dev tools on it. You can do so as usual from the view menu or you could get electron to open devtools on start. It can be done in ./main.js page



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

Next time we'll start editing our data files and create our own custom menu

View code at github. Branch: part1

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18

#electron #javascript #node

Blog

Creating a text editor in Electron: part 1 - Reading files

aurel kurtula

Reading system files

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18

Join Our Newsletter. No Spam, Only the good stuff.

Related