srcmini本文概述
大多数现代的网络浏览器在你键入时都支持拼写检查。此功能对于防止输入错误和拼写错误非常有用, 并且仅限于词典中的单词。如果你的用户能够在应用程序内部的表单中插入重要的信息或数据, 则实现此功能非常重要。
在本文中, 我们将说明如何在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-rebuild
REM On Windows if you have trouble, try:
.\node_modules\.bin\electron-rebuild.cmd请注意, 每次安装使用本机模块的软件包时, 都需要运行命令。在这种情况下, 我们正在Windows平台上工作, 因此我们将运行第二个平台：
成功执行命令后, 该问题不应再出现。还有其他方法可以使用本机模块, 但是前面说明的方法是最简单的。如果你想选择另一个, 请在这里参考Electron的文档。
4.再次运行
现在已经构建了本机模块, 你可以再次运行项目：
npm start如预期的那样, 你将能够修复应用程序中文本输入, textarea等的任何语法错误。
编码愉快！
评论前必须登录！
注册