当前位置： 首页 > news >正文

electronjs入门-编辑器应用程序

news 来源：原创 2024/5/10 15:26:29

我们将在Electron中创建一个新项目，如我们在第1章中所示，名为“编辑器”，我们将在下一章中使用它来创建编辑器；在index.js中，这是我们的主要过程；请记住为Electron软件包放置必要的依赖项：

npm init -y
cnpm install --save-dev electron

package.json

"start":"DEBUG=true electron ."

新建index.js

const { app, BrowserWindow } = require("electron");
function createWindow() {let win = new BrowserWindow({width: 800,height: 600,});win.loadFile("index.html");
}
app.whenReady().then(createWindow);

新建index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>My Editor</title>
</head><body><textarea id="MyID"></textarea>
</body></html>

npm start启动项目之后我们将看到如下的情形
在这里插入图片描述
配置文本编辑器让我们配置以下文本编辑器：
https://www.npmjs.com/package/simplemde
我们在项目中安装它时使用：

npm i simplemde -registry=https://registry.npm.taobao.org
# 或者yarn安装
yarn add simplemde

修改index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>My Editor</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="MyID"></textarea><script>var simplemde = new SimpleMDE({element:document.getElementById("MyID")});</script>
</body></html>

启动项目

npm run start

在这里插入图片描述
在上面的代码中，我们加载编辑器插件的JS和CSS，并使用以下方法进行配置：

var simplemde = new SimpleMDE({element:document.getElementById("MyID")});

其中，我们将先前创建的TEXTAREA的选择器作为引用传递。为了使编辑器填充屏幕的宽度，我们将使用CSS：

html,body {display: flex;flex-direction: column;height: 100%;}.CodeMirror {flex: 1}

在这里插入图片描述

编辑器应用程序和进程之间的通信

双方事件的使用对于Electron中的任何应用程序都是至关重要的，也是Electron应用程序的核心，对于我们使用编辑器的notes应用程序，能够为以下功能执行这项工作是至关重要的：

  • 打开文件
  • 保存文件
  • 对文本执行一些操作，例如下划线、加粗等

这一点很重要，因为这取决于我们在哪里实施这些选项，我们可能必须沟通进程，例如，如果我们定义了一个带有粗体选项的菜单，该菜单是从渲染过程，因为它是由具有Electron对操作系统的相应调用；让我们请记住，我们与操作人员进行的所有沟通系统是通过渲染过程完成的，但我们想要的操作执行（将粗体应用于文本）将在编辑器中完成，其是安装在网页或呈现过程上的插件，因此，当单击菜单中的此选项时，我们必须发送从主进程到呈现进程的消息。

菜单结构

在本节中，我们将为应用程序创建选项菜单，该菜单由一组选项组成，既可以编辑内容，也可以执行文件操作，特别是打开和保存文件。

创建和打开文件

对于使用文件的部分，即保存或打开文件，我们将在项目中的新文件中执行此操作：editor-options.js

创建文件

为了保存文件，我们将创建一个新函数，它将接收窗口和我们要插入的数据作为参数，特别是与用户在编辑器中编写的HTML内容相对应的数据：

module.exports.save_file = function(win,data){}

要使用弹窗创建文件，请执行以下操作：
保存文件需要哪个模块，我们使用该模块：

const { dialog } = require('electron')

其模块包含打开文件保存对话框的功能：

const path = dialog.showSaveDialogSync(win,option)

其中：

  • win，对应于将打开对话框的窗口。
  • option，选项对应于我们要处理的文件的标题和类型，在本例中为txt文件
const option = {title: "Guardar archivo",filters: [{name: "archivo",extensions: ["txt"],},],
};

“showSaveDialogSync()”函数返回用户选择的文件；如果对话框被取消，则返回undefined。有了文件路径，我们可以用它来写，在Node中处理文件，我们有了模块：

const fs = require('fs')

内容如下：

fs.writeFileSync(path,data)

最后，函数变为：

const { app, dialog } = require("electron");
const fs = require("fs");
const path = require("path");
module.exports.save_file = function (win, data) {const option = {title: "Guardar archivo",filters: [{name: "archivo",extensions: ["txt"],},],};const path = dialog.showSaveDialogSync(win, option);// console.log(path)fs.writeFileSync(path, data);/* dialog.showSaveDialog(win,option).then(result => {console.log(result.canceled)console.log(result.filePaths)})*/
};

读取文件

要读取上述函数生成的文件，我们将使用一个新函数：
editor-options.js

module.exports.open_file = function(win){}

要使用alter窗口打开文件：
打开我们使用与上一个功能相同的模块的项目文件是必要的：

const { dialog } = require('electron')

我们有：

paths = dialog.showOpenDialogSync(win,option)

返回用户选择的文件的路径； 如果对话框被取消，则返回undefined。
有了这个路径，我们就可以通过fs模块读取文件的内容，并将数据返回给渲染进程或者网页； 最后的实现如下：

module.exports.open_file = function (win) {const option = {title: "Abrir archivo",filters: [{name: "archivo",extensions: ["txt"],},],};paths = dialog.showOpenDialogSync(win, option);if (paths && paths.length > 0) {const content = fs.readFileSync(paths[0]).toString();win.webContents.send("file-open", content);var filename = path.basename(paths[0]);win.webContents.send("title-change", app.name + " " + filename);}
};

菜单选项

在本节中，我们将为编辑器应用程序创建一个菜单，如第二章所述，我们将使用自定义选项，例如预定义的角色和分隔符，以及快捷键或键盘快捷键； 为了保持应用程序的组织性和模块化，我们将在单独的文件中定义菜单。

由于菜单是在渲染进程中定义的，并且将具有能够操作在网页中定义的 simplemde 插件中定义的文本的选项，因此我们必须在进程之间发送消息才能实现此操作； 例如，如果从菜单中，我们有一个将文本设置为粗体的选项，那么我们必须从菜单（主进程）向网页发送一条消息，并从这里实现将所选文本设置为粗体的功能 ; 考虑到这一点，我们有以下结构：
menu.js

const {app,ipcMain,Menu,shell,BrowserWindow,globalShortcut,
} = require("electron");const { open_file, save_file } = require("./editor-options");const template = [{label: "About us",submenu: [{label: "About us",click() {shell.openExternal("https://www.electronjs.org");},},],},{label: "File",submenu: [{label: "Save",accelerator: "CommandOrControl+S",click() {const win = BrowserWindow.getFocusedWindow();win.webContents.send("editorchannel", "file-save");},},{label: "Open",accelerator: "CommandOrControl+O",click() {const win = BrowserWindow.getFocusedWindow();open_file(win);},},],},{label: "Style and format",submenu: [{label: "Bold",click() {const win = BrowserWindow.getFocusedWindow();win.webContents.send("editorchannel", "style-bold");console.log("Negritas");},},{label: "Italic",click() {const win = BrowserWindow.getFocusedWindow();win.webContents.send("editor-channel", "style-italic");},},{type: "separator",},{label: "H1",click() {const win = BrowserWindow.getFocusedWindow();win.webContents.send("editor-channel", "style-h1");},},{label: "H2",click() {const win = BrowserWindow.getFocusedWindow();win.webContents.send("editor-channel", "style-h2");},},],},
];const menu = Menu.buildFromTemplate(template);module.exports = menu;

在上面的脚本中，我们还定义了其他选项，例如打开外部链接：

shell.openExternal

通过定义到菜单项的加速器选项，我们可以指示激活这些选项的快捷键。

如果你想为每个操作系统设置自定义选项，你所要做的就是询问所使用的平台； 例如，如果我们想在使用 Windows 或 MacOS 时显示特定选项：
·menu.js·

if (process.platform == "win32" || process.platform == "darwin") {template.push({label: "Default",submenu: [{ role: "reload" },{ role: "forceReload" },{ role: "toggleDevTools" },{ role: "resetZoom" },{ role: "zoomIn" },{ role: "zoomOut" },{ type: "separator" },{ role: "togglefullscreen" },],});
}

在这里插入图片描述
我们还将为应用程序实现一系列键盘快捷键，专门用于打开文件或保存内容，为此，我们将分别使用 ctrl/command+S 和 ctrl/command+O 的组合：
menu.js

ipcMain.on("editor-channel", (event, arg) => {console.log("Mensaje recibido del canal 'editor-channel': " + arg);
});ipcMain.on("file-open", (event, arg) => {const win = BrowserWindow.getFocusedWindow();open_file(win);
});
ipcMain.on("file-save", (event, arg) => {const win = BrowserWindow.getFocusedWindow();save_file(win, arg);
});app.on("ready", () => {globalShortcut.register("CommandOrControl+S", () => {const win = BrowserWindow.getFocusedWindow();win.webContents.send("editor-channel", "file-save");});globalShortcut.register("CommandOrControl+O", () => {const win = BrowserWindow.getFocusedWindow();open_file(win);});
});

虽然，当在菜单中定义这些选项时：不需要通过 globalShortcut API 定义键盘快捷键，可以通过如下方式：

const template = [{label: 'About us',click() {shell.openExternal("https://www.electronjs.org")}},{ label: 'File',submenu: [{label: "Save",accelerator: 'CommandOrControl+S',***},{label: "Open",accelerator: 'CommandOrControl+O',***},]}
]

在 index.js 中，我们导入菜单，以便我们可以在应用程序中使用它：index.js

const menu = require('./menu')
//***
Menu.setApplicationMenu(menu)

最后，该菜单的所有处理主要基于发送消息，其中一些包括使用特定模块来执行其操作，例如打开或保存文件的对话框。
最后，在网页流程中，我们定义从menu.js调用的事件并执行相应的操作来编辑所选内容：
index.html

<script>const { ipcRenderer } = require('electron')ipcRenderer.on('message', (event, arg) => {alert("Mensaje recibido desde el proceso principal: " + arg);});ipcRenderer.send('editor-channel', 'Página cargada')ipcRenderer.on('file-open', (event, arg) => {console.log("Mensaje recibido desde el proceso principal: " + arg);simplemde.value(arg)});ipcRenderer.on('editorchannel', (event, arg) => {console.log("Mensaje recibido desde el proceso principal: " + arg);editorOptions(event, arg)});ipcRenderer.on('title-change', (event, arg) => {document.title = arg;});function editorOptions(event, arg) {console.log("editor")switch (arg) {case 'style-bold':simplemde.toggleBold()break;case 'style-italic':simplemde.toggleItalic()break;case 'style-h1':simplemde.toggleHeading1()break;case 'style-h2':simplemde.toggleHeading2()break;case 'file-save':console.log(simplemde.value())event.sender.send('file-save', simplemde.value())break;}}</script>

index.js完整代码如下

const { app, BrowserWindow, Menu } = require("electron");
const menu = require("./menu");function createWindow() {let win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,},});win.loadFile("index.html");
}
app.whenReady().then(createWindow);
Menu.setApplicationMenu(menu);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

来自同一事件：

event.sender

我们可以将消息发送回发送事件的窗口。
simplemde 插件实现了一系列功能，允许您以编程方式编辑所选内容； 例如，toggleBold() 函数允许您将文本转换为粗体。

作为一个网页，我们可以使用 JavaScript 以及 HTML 和 CSS 的任何脚本，例如，我们可以实现其他附加选项，例如在客户端使用纯 JavaScript 的暗模式：
index.html

<script>var simplemde = new SimpleMDE({element: document.getElementById("MyID")});function darkMode() {document.querySelector(".CodeMirror").style.background = "black"}
</script>

按钮代码如下
index.html

<button onclick="darkMode()">Dark Mode</button>

对于打开文件的功能，由于它是一个必须由主进程处理的进程，我们发送一个事件，该函数用于上面显示的editorOptions（）函数：
index.html

function openFile() {ipcRenderer.send('file-open', 'file-open')
}

我们还可以使用HTML API拖放来实现打开文件的功能：
index.html

document.ondrop = function (event) {event.preventDefault();if (event.dataTransfer.items) {item = event.dataTransfer.items[0];if (item.kind == "file" && item.type == "text/plain") {var reader = new FileReader()var file = item.getAsFile();reader.onload = e => {//console.log(e.target.result);simplemde.value(e.target.result);}reader.readAsText(file);}}
}

这些选项是多种多样的，但它们意味着主进程和渲染进程之间的通信，甚至可能有必要根据情况再次与渲染进程通信；例如，要打开一个文件，在该文件中，我们传递文件的内容：
editor-options.js

win.webContents.send('file-open',content)

在网页上，我们可以选择打开文件，稍后我们将看到：
index.html

function openFile() {ipcRenderer.send('file-open', 'file-open')
}

另一个例子是关于保存文件的选项；按下菜单中的选项（主进程）会通过Electron中的事件向渲染进程发送一条消息（如我们在第2章中看到的）：
在这里插入图片描述
从渲染过程中，我们获得编辑器中生成的HTML，将带有HTML内容的消息发送回渲染过程，以便它从操作系统请求对话框保存带有所述HTML内容的文件：
在这里插入图片描述
最后，当使用以下内容运行应用程序时：

npm run start

在这里插入图片描述
在这里插入图片描述
源代码如下https://github.com/libredesarrollo/electron-editor

相关文章：

  • 高并发架构设计（三大利器：缓存、限流和降级）
  • DAY02 c++对c的扩展
  • 二维码在区域巡查中的应用：隐患上报、巡逻巡更、管线巡查
  • 数据结构--图解单链表
  • 响应系统的作用与实现
  • 攻防世界-web-unseping
  • 如何设计短域名系统
  • V-for中 key 值的作用，如何选择key
  • 《洛谷深入浅出进阶篇》P3397 地毯————二维差分
  • 部署百川大语言模型Baichuan2
  • 经验篇：大数据常用工具集合
  • k8s之HPA
  • 解锁内存之谜：从C到Python、Java和Go的内存管理对比
  • 基于安卓android微信小程序的装修家装小程序
  • pycharm使用
  • 【347天】每日项目总结系列085（2018.01.18）
  • 【知识碎片】第三方登录弹窗效果
  • HTML中设置input等文本框为不可操作
  • in typeof instanceof ===这些运算符有什么作用
  • Java超时控制的实现
  • Java应用性能调优
  • Laravel Telescope：优雅的应用调试工具
  • Material Design
  • VUE es6技巧写法（持续更新中~~~）
  • Vue.js源码（2）：初探List Rendering
  • 初识 webpack
  • 动态魔术使用DBMS_SQL
  • 工作中总结前端开发流程--vue项目
  • 利用jquery编写加法运算验证码
  • 面试遇到的一些题
  • 前端性能优化--懒加载和预加载
  • 如何选择开源的机器学习框架？
  • 网页视频流m3u8/ts视频下载
  • 一份游戏开发学习路线
  • 正则与JS中的正则
  • 400多位云计算专家和开发者，加入了同一个组织 ...
  • ​插件化DPI在商用WIFI中的价值
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)（二）嵌入菜单和执行命令...
  • （LeetCode 49）Anagrams
  • （LeetCode C++）盛最多水的容器
  • （Matalb回归预测）PSO-BP粒子群算法优化BP神经网络的多维回归预测
  • （八）Docker网络跨主机通讯vxlan和vlan
  • (转）【Ｈibernate总结系列】使用举例
  • （转）大道至简，职场上做人做事做管理
  • .libPaths()设置包加载目录
  • .NET 使用 XPath 来读写 XML 文件
  • .NET的微型Web框架 Nancy
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁：如何恢复您的数据？
  • .vue文件怎么使用_我在项目中是这样配置Vue的
  • @Service注解让spring找到你的Service bean
  • [BZOJ1877][SDOI2009]晨跑[最大流+费用流]
  • [C/C++随笔] char与unsigned char区别
  • [C++]指针与结构体
  • [CTF]php is_numeric绕过
  • [C语言]编译和链接