WebEngine 小工具拼写检查器示例

将拼写检查程序集成到一个简单的 HTML 表单中。

Spellchecker演示了如何将拼写检查支持集成到 HTML 表单中，使用户能够提交拼写检查过的信息。

运行示例

要从 Qt Creator，打开Welcome 模式，然后从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

字典

为了能够检查拼写，我们需要为拼写检查程序提供字典。Qt WebEngine 拼写检查程序支持所有平台上由Hunspell 项目提供的词典和 macOS 提供的本地词典。在本例中，我们希望支持英语和德语。

要支持 Hunspell 词典，必须将其编译成一种特殊的二进制格式。Hunspell 词典由两个文件组成：

一个.dic 文件，它是一个包含语言单词的词典
一个.aff 文件，用于定义字典中特殊标志的含义。

这两个文件可以通过 Qt XML 随附的qwebengine_convert_dict 工具转换成bdic 格式。

在本例中，我们将编译 en_US 和 de_DE 词典。不过，对于本例而言，真正的完整词典会占用太多空间。因此，我们创建了两个包含以下单词的虚拟字典，用于演示转换过程：

英语词典：I, you, he, she, it, we, they, love, loves, qt
德语词典：ich、du、er、sie、es、wir、ihr、sie、Sie、liebe、liebst、liebt、lieben、liebt、qt

词典中的每个词都可以用q 作为前缀。有关如何创建dic 和aff 文件的详细信息，请参阅 HunspellProject 中的 Hunspell 词典文件格式规范。

有关如何搜索词典文件，请参阅Spellchecker 功能文档。

我们在项目文件中指定 QMAKE_EXTRA_COMPILERS 参数，以便在构建过程中添加转换步骤：

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

要建立字典，我们运行qwebengine_convert_dict ，并传递字典dic 和bdic 文件的文件路径。convert 进程也会获取aff 文件和可选的delta 文件。输出的bdic 文件将放入qtwebengine_dictionaries本地目录（或 Resources 目录），应用程序二进制文件将从该目录运行。

设置拼写检查程序

我们类的构造函数非常简单。

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

我们定义了字典文件名与实际语言显示名称之间的简单映射。我们将使用该映射在上下文菜单中显示词典名称。拼写检查默认是禁用的。因此，我们也要启用拼写检查程序并设置英语词典。当Qt WebEngine 的拼写检查服务初始化时，它会尝试加载bdict 词典，并检查它们是否一致。任何错误都会通过qWarning() 函数记录下来。

切换拼写检查语言

拼写检查当前使用的语言是按配置文件定义的，可以使用 QWebEngineProfile::setSpellCheckLanguage 方法进行设置。当用户点击下划线拼写错误的单词时，默认的上下文菜单会显示多达四种建议。选择其中一个将替换拼写错误的单词。我们可以通过覆盖QWebEngineView::contextMenuEvent 并使用 QWebEngineContextMenuData::spellCheckerSuggestions 来重新实现一些建议，但我们将演示如何在上下文菜单中添加语言选项：

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

上面，我们使用 QWebEnginePage::contextMenuData 方法获得了 QWebEngineContextMenuData 实例。当用户点击可编辑字段时，我们将使用它来通知用户，并在上下文菜单中显示Check Spelling 项。此外，如果启用了拼写检查功能，我们还会在Select Language 子菜单中添加支持的语言。当触发一个操作时，我们会调用 QWebEngineProfile::setSpellCheckLanguage 来设置语言。

示例项目 @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.

WebEngine 小工具 拼写检查器示例

运行示例

字典

设置拼写检查程序

切换拼写检查语言

WebEngine 小工具拼写检查器示例