WebEngine Widgets 拼写检查器示例

将拼写检查器集成到简单的 HTML 表单中。

拼写检查器演示了如何将拼写检查支持集成到 HTML 表单中，使用户可以提交已检查的短信。

运行示例

要从 Qt Creator 运行示例，请打开欢迎模式并从中选择示例示例。有关更多信息，请参阅构建和运行示例。

词典

要能够进行拼写检查，我们需要向拼写检查器提供词典。Qt WebEngine 拼写检查器支持所有平台上由 Hunspell 项目提供的词典和在 macOS 上提供的本地词典。在这个例子中，我们希望支持英语和德语。

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

.dic 文件，它包含该语言单词的词典
.aff 文件，它定义词典中特殊标志的含义

这两个文件可以通过使用 Qt 一起提供的 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 文件的更多信息，请参阅 Hunspell 项目中 Hunspell 词典文件格式规范。

有关词典文件的搜索方法，请参见拼写检查器功能文档。

我们在项目文件中指定 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 文件。 aff 文件和可选的 delta 文件也会被 convert 过程获取。输出的 bdic 文件将放置在 qtwebengine_dictionaries 本地目录（或资源目录）中，应用程序的二进制文件将从该目录运行。

设置拼写检查

我们类的构造函数很简单。

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 实例。我们使用它来在用户点击可编辑字段时接收通知，并在上下文菜单中显示检查拼写项。此外，如果启用拼写检查，我们还会添加包含支持语言的选择语言子菜单。当触发动作时，我们使用 QWebEngineProfile::setSpellCheckLanguage 调用来设置语言。

示例项目 @ code.qt.io