如何在Electron Framework中实现和启用语法和拼写检查器

本文概述

1.安装Electron拼写检查器
2.启用拼写检查器
3.运行并修复DLL初始化
4.再次运行

大多数现代的网络浏览器在你键入时都支持拼写检查。此功能对于防止输入错误和拼写错误非常有用, 并且仅限于词典中的单词。如果你的用户能够在应用程序内部的表单中插入重要的信息或数据, 则实现此功能非常重要。
在本文中, 我们将说明如何在Electron Application中轻松设置和启用语法和拼写检查器。
1.安装Electron拼写检查器 electronic-spellchecker是一个库, 可帮助你在Electron应用程序中实施拼写检查, 并处理默认的右键单击上下文菜单(因为其中会显示拼写检查)。该库旨在以一种易于生产的, 国际友好的方式解决拼写检查的问题。
要在你的Electron应用程序中安装此模块, 请在终端中执行以下命令：

npm i electron-spellchecker

首次安装过程应执行gyp节点以创建本机模块。有关此库的更多信息, 请访问Github上的官方存储库。该模块的一些特征是：

通过重复使用其字典, 对Google Chrome支持的所有语言进行拼写检查。
自动检测用户输入的语言, 并即时自动切换。
正确并自动处理语言环境(即来自澳大利亚的用户的” 颜色” 不正确, 但使用美国英语的用户应正确处理)
在后台自动下载和管理字典。
快速检查, 不会引起输入延迟, 这是非常明显的
一次仅加载一个词典, 从而节省大量内存

2.启用拼写检查器要启用拼写检查器, 你将需要安装的模块。从所需的对象中, 你将需要3个对象, 即SpellCheckHandler, ContextMenuListener和ContextMenuBuilder。然后在窗口上创建一个拼写检查器的全局实例, 接下来是一个上下文菜单, 该菜单接收拼写检查器的处理程序作为第一个参数, 最后附加侦听器以在错误的书面单词上显示上下文菜单：

< !DOCTYPE html> < html> < head> < meta charset="UTF-8"> < title> Hello World!< /title> < /head> < body> < h1> Hello World!< /h1> < p> Hello, type some wrong things in the following textarea !< /p> < textarea rows="5"> < /textarea> < /body> < script> // Require the electron spellchecker const electronSpellchecker = require('electron-spellchecker'); // Retrieve required properties const SpellCheckHandler = electronSpellchecker.SpellCheckHandler; const ContextMenuListener = electronSpellchecker.ContextMenuListener; const ContextMenuBuilder = electronSpellchecker.ContextMenuBuilder; // Configure the spellcheckhandler window.spellCheckHandler = new SpellCheckHandler(); window.spellCheckHandler.attachToInput(); // Start off as "US English, America" window.spellCheckHandler.switchLanguage('en-US'); // Create the builder with the configured spellhandler let contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler); // Add context menu listener let contextMenuListener = new ContextMenuListener((info) => { contextMenuBuilder.showPopupMenu(info); }); < /script> < /html>

请注意, 初始化拼写检查器的代码可以写入另一个文件中, 也可以通过其他方式导入。在此示例中, 我们将其编写在脚本标记内的同一HTML文档中, 以使其更易于理解。现在, 拼写检查器已经配置完毕, 你只需要执行你的应用即可。
3.运行并修复DLL初始化到上一步为止, 拼写检查器已经正确配置, 并且可以正常使用, 因此你可以使用以下命令运行应用程序：

npm start

但是, 如果你不走运(大多数开发人员都会发生这种情况), 那么你将在控制台中遇到以下异常：

文章图片
Electron未捕获错误：动态链接库(DLL)初始化例程失败
由于此模块是本机模块, 因此需要构建。 Electron支持本机节点模块, 但是由于Electron使用的是与官方Node不同的V8版本, 因此在构建本机模块时必须手动指定Electron标头的位置。
要解决此问题, 请使用以下命令在开发模式下的项目中安装Electron重建库：

npm install --save-dev electron-rebuild

安装后, 你将需要运行Electron重建命令。该命令如下所示：

REM Every time you run "npm install", run this ./node_modules/.bin/electron-rebuildREM On Windows if you have trouble, try: .\node_modules\.bin\electron-rebuild.cmd

请注意, 每次安装使用本机模块的软件包时, 都需要运行命令。在这种情况下, 我们正在Windows平台上工作, 因此我们将运行第二个平台：

文章图片
成功执行命令后, 该问题不应再出现。还有其他方法可以使用本机模块, 但是前面说明的方法是最简单的。如果你想选择另一个, 请在这里参考Electron的文档。
4.再次运行 【如何在Electron Framework中实现和启用语法和拼写检查器】现在已经构建了本机模块, 你可以再次运行项目：