psmuler
commented
1 year ago 簡単なテキストエディタを作成し、.md形式のファイルを開いて表示し、変更を加えて保存できるようにするには、以下の手順を実行してください。
index.htmlファイルを更新:
テキストエディタ用の<textarea>要素と、"Save"ボタンを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<button id="file-btn">Open</button>
<button id="save-btn">Save</button>
<br />
<textarea id="text-editor" rows="20" cols="80"></textarea>
<script src="renderer.js"></script>
</body>
</html>renderer.jsファイルを更新:
ファイルを開いてテキストエディタに表示する処理と、変更を加えた後の保存機能を追加します。
const { ipcRenderer } = require('electron');
const fs = require('fs');
const fileBtn = document.getElementById('file-btn');
const saveBtn = document.getElementById('save-btn');
const textEditor = document.getElementById('text-editor');
let currentFilePath = null;
fileBtn.addEventListener('click', () => {
ipcRenderer.send('open-file-dialog');
});
saveBtn.addEventListener('click', () => {
if (currentFilePath) {
saveFile(currentFilePath);
} else {
ipcRenderer.send('save-file-dialog');
}
});
ipcRenderer.on('selected-file', (event, filePath) => {
currentFilePath = filePath;
fs.readFile(filePath, 'utf-8', (err, data) => {
if (err) {
console.error(err);
return;
}
textEditor.value = data;
});
});
ipcRenderer.on('selected-save-path', (event, savePath) => {
currentFilePath = savePath;
saveFile(currentFilePath);
});
function saveFile(filePath) {
const content = textEditor.value;
fs.writeFile(filePath, content, (err) => {
if (err) {
console.error(err);
return;
}
console.log('File saved:', filePath);
});
}main.jsファイルを更新:
ファイルダイアログで選択したファイルをrenderer.jsに送信し、保存ダイアログを表示するコードを追加します。
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
// ... (createWindow, app.whenReady, app.onのコードは省略) ...
ipcMain.on('open-file-dialog', (event) => {
const options = {
title: 'Select a file',
properties: ['openFile'],
filters: [{ name: 'Markdown', extensions: ['md'] }],
};
dialog.showOpenDialog(null, options).then((result) => {
if (!result.canceled) {
const filePath = result.filePaths[0];
event.sender.send('selected-file', filePath);
}
});
});
ipcMain.on('save-file-dialog', (event) => {
const options = {
title: 'Save file',
filters: [{ name: 'Markdown', extensions: ['md'] }],
};
dialog.showSaveDialog(null, options).then((result) => {
if (!result.canceled) {
const savePath = result.filePath;
event.sender.send('selected-save-path', savePath);
}
});
});これで、簡単なテキストエディタを導入し、.md形式のファイルを開いて表示し、変更を加えた後に保存できるようになりました。npm startコマンドを使ってアプリを起動し、"Open"ボタンで.mdファイルを開き、テキストエディタで編集した後、"Save"ボタンで変更を保存できます。
簡単なテキストエディタを導入し、先ほど読み込んだ.md形式ファイルを表示しましょう。変更を加えた後の保存機能もつけてください。以下コード内で変更がない点は必ず省略してください。