WebEngine Widgets Ejemplo de corrector ortográfico

Spellchecker muestra cómo integrar el corrector ortográfico en un formulario HTML que permite a los usuarios enviar mensajes con corrección ortográfica.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Diccionarios

Para poder comprobar la ortografía, necesitamos proporcionar al corrector ortográfico diccionarios. El corrector ortográfico Qt WebEngine soporta diccionarios proporcionados por el proyecto Hunspell en todas las plataformas y diccionarios nativos proporcionados por macOS. En este ejemplo, queremos que sea compatible con los idiomas inglés y alemán.

Para que los diccionarios Hunspell sean compatibles, deben compilarse en un formato binario especial. Un diccionario Hunspell consta de dos archivos:

• Un archivo .dic que es un diccionario que contiene las palabras del idioma.
• Un archivo .aff que define el significado de los indicadores especiales del diccionario.

Estos dos archivos se pueden convertir al formato bdic utilizando la herramienta qwebengine_convert_dict que se incluye con Qt.

En este ejemplo, vamos a compilar los diccionarios en_US y de_DE. Sin embargo, los diccionarios completos reales ocuparían demasiado espacio para los propósitos de este ejemplo. Por lo tanto, hemos creado dos diccionarios ficticios que contienen las siguientes palabras y se pueden utilizar para demostrar el proceso de conversión:

• Diccionario inglés: I, you, he, she, it, we, they, love, loves, qt
• Diccionario alemán: ich, du, er, sie, es, wir, ihr, sie, Sie, liebe, liebst, liebt, lieben, liebt, qt

Cada palabra de un diccionario puede ir precedida de q. Para obtener más información sobre cómo crear archivos dic y aff, consulte la especificación del formato de archivo del diccionario Hunspell en el Proyecto Hunspell.

Consulte la documentación del corrector orto gráfico para saber cómo se buscan los archivos de diccionario.

Especificamos el parámetro QMAKE_EXTRA_COMPILERS en el archivo de proyecto para añadir un paso de conversión al proceso de compilación:

qtPrepareTool(CONVERT_TOOL, qwebengine_convert_dict, "", "", $$[QT_INSTALL_LIBEXECS])

debug_and_release {
    CONFIG(debug, debug|release): DICTIONARIES_DIR = debug/qtwebengine_dictionaries
    else: DICTIONARIES_DIR = release/qtwebengine_dictionaries
} else {
    DICTIONARIES_DIR = qtwebengine_dictionaries
}

dict_base_paths = en/en-US de/de-DE
for (base_path, dict_base_paths) {
    dict.files += $$PWD/dict/$${base_path}.dic
}

dictoolbuild.input = dict.files
dictoolbuild.output = $${DICTIONARIES_DIR}/${QMAKE_FILE_BASE}.bdic
dictoolbuild.depends = ${QMAKE_FILE_PATH}/${QMAKE_FILE_BASE}.aff
dictoolbuild.commands = $${CONVERT_TOOL} ${QMAKE_FILE_IN} ${QMAKE_FILE_OUT}
dictoolbuild.name = Build ${QMAKE_FILE_IN_BASE}
dictoolbuild.CONFIG = no_link target_predeps
QMAKE_EXTRA_COMPILERS += dictoolbuild

Para configurar un diccionario, ejecutamos qwebengine_convert_dict pasando la ruta de los archivos de diccionario dic y bdic. El archivo aff y el archivo opcional delta también son recogidos por el proceso convert. El archivo bdic de salida se coloca en el directorio local qtwebengine_dictionaries (o en el directorio Resources), desde el que se ejecutará el binario de la aplicación.

Configuración del corrector ortográfico

El constructor de nuestra clase es trivial.

WebView::WebView(QWidget *parent)
    : QWebEngineView(parent)
{
    m_spellCheckLanguages["English"] = "en-US";
    m_spellCheckLanguages["German"] = "de-DE";
    QWebEngineProfile *profile = page()->profile();
    profile->setSpellCheckEnabled(true);
    profile->setSpellCheckLanguages({"en-US"});

Definimos un simple mapeo entre los nombres de archivo de nuestros diccionarios y el nombre real del idioma a mostrar. Usaremos ese mapeo para mostrar los nombres de los diccionarios en el menú contextual. El corrector ortográfico está desactivado por defecto. Por lo tanto, también activaremos el corrector ortográfico y configuraremos el diccionario de inglés. Cuando el servicio de corrección ortográfica de Qt WebEngine se inicialice, intentará cargar los diccionarios de bdict y comprobar su coherencia. Cualquier error se registra utilizando la función qWarning().

Cambio del idioma del corrector ortográfico

El idioma actual utilizado para el corrector ortográfico se define por perfil, y puede establecerse utilizando el método QWebEngineProfile::setSpellCheckLanguage. Cuando el usuario hace clic en una palabra mal escrita subrayada, el menú contextual predeterminado muestra hasta cuatro sugerencias. Al seleccionar una, se sustituirá la palabra mal escrita. Podriamos reimplementar un numero de sugerencias, sobreescribiendo QWebEngineView::contextMenuEvent y usando QWebEngineContextMenuData::spellCheckerSuggestions, pero en su lugar demostraremos como añadir opciones de idioma en el menu contextual:

void WebView::contextMenuEvent(QContextMenuEvent *event)
{
    QWebEngineContextMenuRequest *data = lastContextMenuRequest();
    Q_ASSERT(data);

    if (!data->isContentEditable()) {
        QWebEngineView::contextMenuEvent(event);
        return;
    }

    QWebEngineProfile *profile = page()->profile();
    const QStringList &languages = profile->spellCheckLanguages();
    QMenu *menu = createStandardContextMenu();
    menu->addSeparator();

    QAction *spellcheckAction = new QAction(tr("Check Spelling"), nullptr);
    spellcheckAction->setCheckable(true);
    spellcheckAction->setChecked(profile->isSpellCheckEnabled());
    connect(spellcheckAction, &QAction::toggled, this, [profile](bool toogled) {
        profile->setSpellCheckEnabled(toogled);
    });
    menu->addAction(spellcheckAction);

    if (profile->isSpellCheckEnabled()) {
        QMenu *subMenu = menu->addMenu(tr("Select Language"));
        const QStringList keys = m_spellCheckLanguages.keys();
        for (const QString &str : keys) {
            QAction *action = subMenu->addAction(str);
            action->setCheckable(true);
            QString lang = m_spellCheckLanguages[str];
            action->setChecked(languages.contains(lang));
            connect(action, &QAction::triggered, this, [profile, lang](){
               profile->setSpellCheckLanguages(QStringList()<<lang);
            });
        }
    }
    connect(menu, &QMenu::aboutToHide, menu, &QObject::deleteLater);
    menu->popup(event->globalPos());
}

Arriba, obtenemos la instancia QWebEngineContextMenuData usando el método QWebEnginePage::contextMenuData. Lo utilizamos para ser notificados cuando el usuario hace clic en un campo editable y mostrar el elemento Check Spelling en el menú contextual. Además, si el corrector ortográfico está activado, también añadimos el submenú Select Language con los idiomas soportados. Cuando se dispara una acción, establecemos el idioma con la llamada QWebEngineProfile::setSpellCheckLanguage.

Proyecto de ejemplo @ code.qt.io