qt - Webkit 上的 SpellChecker(拼写器)

Question

我相信 中没有原生函数QtWebKit 使用 拼写检查器 .

有没有办法获取当前页面的字段( <textarea> ， <input> 和 <tagName contenteditable=true> )并突出显示特定单词(仅添加下划线可能错误的单词)？

[编辑]

我需要添加 《视觉效果》 (下划线)到 Words 而不是 dom 元素，例如，如果我有这样的 html:

<textarea>Helllo world!</textarea>

只有这个词 “你好”将有下划线，例如:


谢谢你。

Answer 1

更新:

不，据我所知，在 QtWebKit ，您不能格式化 textarea 的内容.

Format text in a <textarea>?

你可以用 div 替换它看起来和行为就像 textarea ，然后在特定单词周围插入一些标签。

但正如我从解决这个问题中可以看出的那样，QWebElement 是不可能的。 .

你可以去问问巨魔，看看他们有什么建议。

这是最接近的代码。当网页出现时，右键单击页面上的不同位置。

主程序

#include <QApplication>
#include "webview.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    WebView w;
    w.show();

    return a.exec();
}

网页 View .h

#ifndef WEBVIEW_H
#define WEBVIEW_H

#include <QWebView>
#include <QContextMenuEvent>


class WebView : public QWebView
{
    Q_OBJECT

public:
    explicit WebView(QWidget *parent = 0);
    ~WebView();

public slots:
    void contextMenuEvent(QContextMenuEvent *);

private:
};

#endif // WEBVIEW_H

网页 View .cpp

#include "webview.h"
#include <QWebFrame>
#include <QWebElement>
#include <QWebElementCollection>
#include <QDebug>

WebView::WebView(QWidget *parent) :
    QWebView(parent)
{
    this->setUrl(QUrl("http://www.w3schools.com/tags/tag_textarea.asp"));

    // right click on different parts of the web page
}

WebView::~WebView(){ }

void WebView::contextMenuEvent(QContextMenuEvent * cme)
{
    QPoint pos = cme->pos();

    QWebHitTestResult whtr = this->page()->frameAt(pos)->hitTestContent(pos);

    QWebElement we = whtr.element();

    if(we.isNull())
    {
        qDebug() << "WebElement is null.";
    }
    else
    {

        qDebug() << we.tagName() << "OuterXML <<<<<" << we.toOuterXml() << ">>>>>";
        qDebug() << we.tagName() << "InnerXML <<<<<" << we.toInnerXml() << ">>>>>";
        qDebug() << we.tagName() << "PlainText <<<<<" << we.toPlainText() << ">>>>>";


        // TODO: replace the lines below with a better way of extracting words from the DOM and the HTML tags
        // This current method modifies tags instead of just the text inside tags.
        QStringList list = we.toPlainText().split(' ');
        for(int i = 0; i < list.size(); i++)
        {
            // TODO: Insert dictionary logic here when examining words
            if(list.at(i).size() > 5)
            {
                list[i] = "<span class=\"sp\" style=\"border-bottom: 1px dotted red;\">" + list.at(i) + "</span>";
            }
        }
        qDebug() << list.join(" ");
        we.setInnerXml(list.join(" "));
        qDebug() << "-------------------------------------------";
    }
}

因此，经过一些额外的研究(在对您的问题进行一些更改之后)之后，这是我要研究的方法:

当在页面上执行右键单击时，QWidget(您的 QWebView)会发出 QContextMenuEvent .

http://qt-project.org/doc/qt-4.8/qcontextmenuevent.html#details

从该事件中获取位置，然后深入到您的网页以找出它的用途:

在点击位置获取网页框架...

QWebFrame * QWebPage::frameAt ( const QPoint & pos ) const

在该位置进行 HitTest 内容...

QWebHitTestResult QWebFrame::hitTestContent ( const QPoint & pos ) const

从 HitTest 中查询元素...

QWebElement QWebHitTestResult::element () const

仔细检查内容是否可由用户编辑...

bool QWebHitTestResult::isContentEditable () const

但这大约是我在这个研究项目上得到的。

如果您重新设置页面上的 webelement 样式，使其具有拼写错误的类的 span 标签，那么您可以查找这些标签，然后创建您自己的弹出菜单，或编辑 contextMenu的QWebView就在那时。

所以，不，页面上没有元素的上下文菜单，但你可以模拟它，如果你找到被点击的元素，然后更改contextMenu为 QWidget .

http://qt-project.org/doc/qt-4.8/webkit-simpleselector.html

void Window::on_elementLineEdit_returnPressed()
{
    QWebFrame *frame = webView->page()->mainFrame();

    QWebElement document = frame->documentElement();
    QWebElementCollection elements = document.findAll(elementLineEdit->text());

    foreach (QWebElement element, elements)
        element.setAttribute("style", "background-color: #f0f090");
}

http://qt-project.org/doc/qt-4.8/mainwindows-menus.html

void MainWindow::contextMenuEvent(QContextMenuEvent *event)
{
    QMenu menu(this);
    menu.addAction(cutAct);
    menu.addAction(copyAct);
    menu.addAction(pasteAct);
    menu.exec(event->globalPos());
}

再次，我希望这会有所帮助。

至于使用 QWebKit 的很棒的例子，有这个项目:

How to create Web History for my Browser

https://code.google.com/p/arora/

我在 repo 上搜索了“拼写”和“拼写检查”，但没有找到任何有用的信息。

至于动态调整 html，Fancy Browser 示例展示了它是如何完成的:

http://qt-project.org/doc/qt-4.8/webkit-fancybrowser-mainwindow-cpp.html

void MainWindow::rotateImages(bool invert)
{
    QString code;
    if (invert)
        code = "$('img').each( function () { $(this).css('-webkit-transition', '-webkit-transform 2s'); $(this).css('-webkit-transform', 'rotate(180deg)') } )";
    else
        code = "$('img').each( function () { $(this).css('-webkit-transition', '-webkit-transform 2s'); $(this).css('-webkit-transform', 'rotate(0deg)') } )";
    view->page()->mainFrame()->evaluateJavaScript(code);
}

他们只是使用 jquery 并在加载的页面上运行额外的 javascript。

所以你可能可以替换 "$('img').each(为 "$('textarea').each(并对区域的文本进行操作。

您还可以在页面上运行正则表达式或使用 html 解析器来查找所有 <textarea>块。

希望有帮助。