Widgets WebEngine Exemple de correcteur orthographique

Spellchecker montre comment intégrer un correcteur orthographique dans un formulaire HTML qui permet aux utilisateurs de soumettre des messages orthographiés.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Dictionnaires

Pour pouvoir vérifier l'orthographe, nous devons fournir des dictionnaires au vérificateur d'orthographe. Le correcteur orthographique Qt WebEngine prend en charge les dictionnaires fournis par le projet Hunspell sur toutes les plateformes et les dictionnaires natifs fournis par macOS. Dans cet exemple, nous souhaitons prendre en charge les langues anglaise et allemande.

Pour que les dictionnaires Hunspell soient pris en charge, ils doivent être compilés dans un format binaire spécial. Un dictionnaire Hunspell se compose de deux fichiers :

• un fichier .dic qui est un dictionnaire contenant les mots de la langue
• Un fichier .aff qui définit la signification des drapeaux spéciaux dans le dictionnaire.

Ces deux fichiers peuvent être convertis au format bdic à l'aide de l'outil qwebengine_convert_dict fourni avec Qt XML.

Dans cet exemple, nous allons compiler les dictionnaires en_US et de_DE. Cependant, les vrais dictionnaires complets prendraient trop de place pour les besoins de cet exemple. C'est pourquoi nous avons créé deux dictionnaires fictifs qui contiennent les mots suivants et qui peuvent être utilisés pour démontrer le processus de conversion :

• Dictionnaire anglais : I, you, he, she, it, we, they, love, loves, qt
• Dictionnaire allemand : ich, du, er, sie, es, wir, ihr, sie, Sie, liebe, liebst, liebt, lieben, liebt, qt

Chaque mot d'un dictionnaire peut être préfixé par q. Pour plus d'informations sur la création des fichiers dic et aff, voir la spécification du format de fichier du dictionnaire Hunspell dans le projet Hunspell.

Voir la documentation sur les fonctionnalités du correcteur orthographique pour savoir comment les fichiers de dictionnaire sont recherchés.

Nous spécifions le paramètre QMAKE_EXTRA_COMPILERS dans le fichier de projet pour ajouter une étape de conversion au processus de construction :

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

Pour configurer un dictionnaire, nous lançons qwebengine_convert_dict en passant le chemin d'accès aux fichiers de dictionnaire dic et bdic. Le fichier aff et le fichier optionnel delta sont également récupérés par le processus convert. Le fichier de sortie bdic est placé dans le répertoire local qtwebengine_dictionaries (ou dans le répertoire Resources), à partir duquel le binaire de l'application sera exécuté.

Paramétrage du correcteur orthographique

Le constructeur de notre classe est 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"});

Nous définissons une correspondance simple entre les noms de fichiers de nos dictionnaires et le nom d'affichage de la langue. Nous utiliserons cette correspondance pour afficher les noms des dictionnaires dans le menu contextuel. La vérification orthographique est désactivée par défaut. C'est pourquoi nous activons également le correcteur orthographique et définissons le dictionnaire anglais. Lorsque le service de vérification orthographique de Qt WebEngine s'initialise, il tente de charger les dictionnaires de bdict et de vérifier leur cohérence. Les erreurs éventuelles sont enregistrées à l'aide de la fonction qWarning().

Changement de langue de vérification orthographique

La langue utilisée pour le correcteur orthographique est définie par profil, et peut être définie en utilisant la méthode QWebEngineProfile::setSpellCheckLanguage. Lorsque l'utilisateur clique sur un mot mal orthographié souligné, le menu contextuel par défaut affiche jusqu'à quatre suggestions. La sélection de l'une d'entre elles remplace le mot mal orthographié. Nous pourrions réimplémenter un certain nombre de suggestions en surchargeant QWebEngineView::contextMenuEvent et en utilisant QWebEngineContextMenuData::spellCheckerSuggestions, mais nous allons plutôt montrer comment ajouter des options de langue dans le menu contextuel :

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());
}

Ci-dessus, nous obtenons l'instance QWebEngineContextMenuData en utilisant la méthode QWebEnginePage::contextMenuData. Nous l'utilisons pour être informés lorsque l'utilisateur clique sur un champ modifiable et pour afficher l'élément Check Spelling dans le menu contextuel. De plus, si la vérification orthographique est activée, nous ajoutons également le sous-menu Select Language avec les langues prises en charge. Lorsqu'une action est déclenchée, nous définissons la langue à l'aide de l'appel QWebEngineProfile::setSpellCheckLanguage.

Exemple de projet @ code.qt.io