SpellChecker (speller) on webkit

Question

I believe that QtWebKit has no built-in functions for using SpellChecker .

Is there a way to get the fields ( <textarea> , <input> and <tagName contenteditable=true> ) of the current page and highlight specific words (add underlining only words, possibly incorrect)?

[edit]

I need to add a “visual effect” (underline) to the Words words, and not to the dom elements, for example if I have html, for example:

 <textarea>Helllo world!</textarea> 

only the word "Helllo" will be underlined, for example:

Thanks.

Answer 1

UPDATE:

No, as far as I can judge and push in QtWebKit , you cannot format the contents of textarea .

Format text in <textarea>?

Perhaps you replace it with a div that looks and acts like textarea , and then inserts some tags around certain words.

But, as far as I can tell from the work on this issue, this is not possible with QWebElement .

You can go and ask the trolls and see if they have any suggestions.

Here is the closest code. When the web page appears, right-click on different places on the page.

main.cpp

 #include <QApplication> #include "webview.h" int main(int argc, char *argv[]) { QApplication a(argc, argv); WebView w; w.show(); return a.exec(); } 

webview.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 

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

---

So, after some additional research (after some changes in your question), here is a method that I would consider:

When the page is right-clicked, a QWidget (your QWebView) sends a QContextMenuEvent .

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

Get a position from this event, and then expand on your web page to find out what it's intended for:

Get the web frame at the click location ...

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

Make test content in place ...

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

Request an item from a hit test ...

 QWebElement QWebHitTestResult::element () const 

Double check that the content is being edited by the user ...

 bool QWebHitTestResult::isContentEditable () const 

But this concerns how much I got this research project.

If you remake web elements on a page to have your class span tag with errors, then you can search for them and then either create your own pop-up menu or edit contextMenu in QWebView on the right.

So no, there is no context menu for items on the page, but you can mimic it if you find the item the button is clicked on, and then change contextMenu to 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()); } 

Strike> Again, I hope this helps.

As an amazing example of using QWebKit, this project exists:

How to create Web History for my browser

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

I did a repo search for “spells” and “spellcheckers,” and nothing useful came up.

As for setting up html on the fly, the Fancy Browser example shows how this is done:

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

They just use jquery and run additional javascript on the loaded page.

So, you can replace "$('img').each( with "$('textarea').each( and act in the text area.

You can also run the regular expression on the page or use the html parser to find all the <textarea> blocks.

Hope this helps.