Webkit上的SpellChecker(speller)

Question

我相信QtWebKit中没有使用SpellChecker的本机函数.

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

[编辑]

我需要在Words而不是dom元素中添加"视觉效果"(下划线),例如,如果我有这样的html:

<textarea>Helllo world!</textarea>

只有"Helllo"这个词会加下划线,例如:

谢谢.

Answer 1

更新：

不，据我通过戳戳和刺探可以看出QtWebKit，你不能格式化 的内容textarea。

设置 <textarea> 中文本的格式？

您可以将其替换为div看起来和行为类似于 a 的 a textarea，然后在特定单词周围插入一些标签。

但据我从解决这个问题中可以看出，这是不可能的QWebElement。

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

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

主程序

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

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

    return a.exec();
}

网页视图.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

网页视图.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

在该位置进行命中测试内容...

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

查询命中测试之外的元素...

QWebElement QWebHitTestResult::element () const

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

bool QWebHitTestResult::isContentEditable () const

但这就是我对这个研究项目的了解。

如果您重新设计页面上的网络元素，使其具有拼写错误的类的 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 的精彩示例，有这个项目：

如何为我的浏览器创建网络历史记录

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

我在存储库中搜索了“拼写”和“拼写检查”，但没有找到任何有用的结果。

至于动态调整 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>。

希望有帮助。