Cómo implementar y habilitar el corrector ortográfico y de gramática en Electron Framework

Cómo implementar y habilitar el corrector ortográfico y de gramática en Electron Framework

La mayoría de los navegadores web modernos admiten la revisión ortográfica a medida que escribe. Esta función es realmente útil para prevenir errores tipográficos y ortográficos, y aunque se limita a las palabras que se encuentran en los diccionarios. Si su usuario puede insertar información o datos importantes en formularios dentro de su aplicación, es muy importante que implemente dicha función.

En este artículo explicaremos cómo configurar y habilitar la gramática y el corrector ortográfico en su aplicación Electron fácilmente.

1. Instale el corrector ortográfico electrónico

electron-spellchecker es una biblioteca para ayudarlo a implementar el corrector ortográfico en sus aplicaciones Electron, así como también para manejar los menús contextuales predeterminados del botón derecho (ya que el corrector ortográfico aparece en ellos). Esta biblioteca tiene la intención de resolver el problema de la corrección ortográfica de una manera internacional y lista para la producción.

Para instalar este módulo en su aplicación electron, ejecute el siguiente comando en su terminal:

npm i electron-spellchecker

El proceso de instalación por primera vez debería ejecutar node gyp para crear el módulo nativo. Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí . Algunas de las características del módulo son:

  • Verificaciones ortográficas en todos los idiomas que admite Google Chrome mediante la reutilización de sus diccionarios.
  • Detecta automáticamente el idioma que el usuario está escribiendo y cambia silenciosamente sobre la marcha.
  • Maneja la configuración regional de forma correcta y automática (es decir, los usuarios que son de Australia no deben ser corregidos por 'color', pero los hablantes de inglés de EE. UU. Sí)
  • Descarga y gestiona diccionarios en segundo plano automáticamente.
  • Verifica muy rápidamente, no introduce un retraso de entrada que es extremadamente notable
  • Solo carga un diccionario a la vez, lo que ahorra una cantidad significativa de memoria

2. Habilite el corrector ortográfico

Para habilitar el corrector ortográfico, necesitará el módulo instalado. Del objeto requerido, necesitará 3 objetos SpellCheckHandler, a saber  , ContextMenuListenerContextMenuBuilder. Luego cree una instancia global del corrector ortográfico en la ventana, a continuación, un menú contextual que recibe como primer argumento el controlador del corrector ortográfico y finalmente adjunte el oyente para mostrar el menú contextual en las palabras escritas incorrectamente:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    
    <body>
        <h1>Hello World!</h1>
        <p>Hola, escribe algunas cosas incorrectas en el siguiente área de texto.</p>
        <textarea rows="5"></textarea>
    </body>

    <script>
        // Requerir el corrector ortográfico de electrones
        const electronSpellchecker = require('electron-spellchecker');

        // Recuperar propiedades requeridas
        const SpellCheckHandler = electronSpellchecker.SpellCheckHandler;
        const ContextMenuListener = electronSpellchecker.ContextMenuListener;
        const ContextMenuBuilder = electronSpellchecker.ContextMenuBuilder;

        // Configurar el corrector ortográfico
        window.spellCheckHandler = new SpellCheckHandler();
        window.spellCheckHandler.attachToInput();

        // Comience como "Inglés de EE. UU., América"
        window.spellCheckHandler.switchLanguage('en-US');

        // Crea el constructor con el manejador de conjuros configurado
        let contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);

        // Agregar oyente de menú contextual
        let contextMenuListener = new ContextMenuListener((info) => {
            contextMenuBuilder.showPopupMenu(info);
        });
    </script>

</html>

Tenga en cuenta que el código para inicializar el corrector ortográfico se puede escribir en otro archivo e importar de otra manera. En este ejemplo, lo hemos escrito en el mismo documento HTML dentro de una etiqueta de secuencia de comandos para que sea más fácil de entender. Ahora que se ha configurado el corrector ortográfico, solo necesita ejecutar su aplicación.

3. Ejecute y corrija la inicialización de DLL

Hasta el paso anterior, el corrector ortográfico se ha configurado correctamente y normalmente debería funcionar, por lo que puede ejecutar su aplicación usando:

npm start

Sin embargo, si no tiene suerte (algo que le pasará a la mayoría de los desarrolladores), se enfrentará a la siguiente excepción en la consola:

Error native module electron spellchecker

Error de electrón no detectado: falló la rutina de inicialización de una biblioteca de vínculos dinámicos (DLL)

Debido a que este módulo es nativo, debe compilarse. Los módulos nativos de Node son compatibles con Electron, pero dado que Electron está usando una versión V8 diferente a la de Node oficial, debe especificar manualmente la ubicación de los encabezados de Electron al construir módulos nativos.

Para solucionar este problema, instale la biblioteca de reconstrucción electrónica en su proyecto en el modo de desarrollo usando el siguiente comando:

npm install --save-dev electron-rebuild

Después de la instalación, deberá ejecutar el comando de reconstrucción de electrones. Este comando tiene el siguiente aspecto:

REM Cada vez que ejecute "npm install", ejecute este
./node_modules/.bin/electron-rebuild

REM En Windows, si tiene problemas, intente:
.\node_modules\.bin\electron-rebuild.cmd

Tenga en cuenta que cada vez que instale un paquete que utilice un módulo nativo, deberá ejecutar el comando. En este caso, estamos trabajando en una plataforma Windows, por lo que ejecutaremos la segunda:

Rebuild Complete Electron Native Modules

Una vez que el comando se ejecuta con éxito, el problema no debería aparecer más. Hay otras formas de habilitar el uso de módulos nativos, sin embargo, el método explicado anteriormente es el más fácil. En caso de que desee elegir otro, consulte los documentos de Electron aquí .

4. Ejecutar de nuevo

Ahora que se ha creado el módulo nativo, puede ejecutar su proyecto una vez más:

npm start

Y como se esperaba, podrá corregir cualquier error gramatical en las entradas de texto, área de texto, etc.en su aplicación.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable