Как реализовать и включить грамматику и проверку орфографии в Electron Framework

Большинство современных веб-браузеров поддерживают проверку орфографии при вводе текста. Эта функция действительно полезна для предотвращения опечаток и орфографических ошибок, и хотя она ограничена словами, найденными в словарях. Если ваш пользователь может вставлять важную информацию или данные в формы внутри вашего приложения, очень важно, чтобы вы реализовали такую ​​функцию.

В этой статье мы расскажем, как легко настроить и включить грамматику и проверку орфографии в приложении Electron.

1. Установите электронный орфографический контроль

Electron-spellchecker — это библиотека, которая поможет вам реализовать проверку орфографии в ваших приложениях Electron, а также обрабатывать контекстные меню по умолчанию, щелкаемые правой кнопкой мыши (поскольку в них отображается проверка орфографии). Эта библиотека намеревается решить проблему проверки орфографии в готовом к использованию и дружественном к международному сообществу способе.

Чтобы установить этот модуль в вашем электронном приложении, выполните следующую команду в своем терминале:

npm i electron-spellchecker

Процесс установки в первый раз должен выполнить узел gyp, чтобы создать собственный модуль. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь. Некоторые из характеристик модуля:

• Проверка орфографии на всех языках, которые поддерживает Google Chrome, путем повторного использования его словарей.
• Автоматически определяет язык, который вводит пользователь, и автоматически переключается на лету.
• Правильно и автоматически обрабатывает локаль (то есть пользователи из Австралии не должны корректироваться на «цвет», но должны говорить на английском языке)
• Автоматически загружает и управляет словарями в фоновом режиме.
• Очень быстро проверяет, не вводит задержку ввода, что очень заметно
• Загружает только один словарь за раз, что экономит значительный объем памяти

2. Включить проверку орфографии

Чтобы включить проверку орфографии, вам потребуется установить модуль. Из необходимого объекта вам понадобится 3 объекта, а именно SpellCheckHandler, ContextMenuListener а также ContextMenuBuilder, Затем создайте глобальный экземпляр средства проверки орфографии в окне в качестве следующего контекстного меню, которое получает в качестве первого аргумента обработчик средства проверки орфографии и, наконец, присоединяет слушателя, чтобы отобразить контекстное меню с неверно написанными словами:

Hello World!
Hello World!
Hello, type some wrong things in the following textarea !
// 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);
});

Обратите внимание, что код для инициализации проверки орфографии можно записать в другом файле и импортировать другим способом. В этом примере мы написали его в том же HTML-документе внутри тега скрипта, чтобы его было легче понять. Теперь, когда проверка орфографии настроена, вам нужно только запустить ваше приложение.

3. Запустите и исправьте инициализацию DLL

До предыдущего шага проверка орфографии была правильно настроена, и она должна нормально работать, поэтому вы можете запустить свое приложение, используя:

npm start

Однако, если вам не повезло (что случится с большинством разработчиков), в консоли вы увидите следующее исключение:

Электронная ошибка: Ошибка инициализации библиотеки динамической компоновки (DLL)

Поскольку этот модуль является родным, его необходимо собрать. Собственные модули Node поддерживаются Electron, но, поскольку Electron использует версию V8, отличную от официального Node, вы должны вручную указать расположение заголовков Electron при сборке собственных модулей.

Чтобы решить эту проблему, установите электронно-перестраивать Библиотека в вашем проекте в режиме разработки, используя следующую команду:

npm install --save-dev electron-rebuild

После установки вам нужно будет запустить команду восстановления электронов. Эта команда выглядит следующим образом:

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

И, как и ожидалось, вы сможете исправить любую грамматическую ошибку в текстовом вводе, текстовой области и т. Д. В вашем приложении.