[Solved]How to insert table in HTML page at current text cursor position
-
I have written a little WYSIWYG HTML editor for one of my applications. Now i'm trying to have an action in a toolbar which when triggered will open a dialog asking for the numer of rows and columns the table should have. This is not a problem. My problem is how to insert a table into the HTML displayed by my QWebView.
I have tried to achieve this using javascript calls and by using QWebElement methods. See code below.
@
QString javaScript = QString("var newTable = document.createElement("table");\n");
javaScript += QString("var newTableBody = document.createElement("tbody");\n");
javaScript += QString("var newTableRow = document.createElement("tr");\n");
javaScript += QString("var newTableCell = document.createElement("td");\n");
javaScript += QString("newTableCellremoved;\n");
javaScript += QString("newTable.appendChild(newTableBody);\n");
javaScript += QString("newTableBody.appendChild(newTableRow);\n");
javaScript += QString("newTableRow.appendChild(newTableCell);\n");
javaScript += QString("document.body.insertBefore(newTable);\n");
page()->mainFrame()->documentElement().evaluateJavaScript(javaScript);page()->currentFrame()->documentElement().appendInside("<table>"
"<tr>"
"<td class="entry"><p>Entry1:</p></td>"
"<td class="tableValue"><p>n.A.</p></td>"
"</tr>"
"<tr>"
"<td class="entry"><p>Entry2:</p></td>"
"<td class="tableValue"><p>n.A.</p></td>"
"</tr>"
"</table>");
@I dont want to insert javascript functions into the HTML content, unless theres absolutely no other option, so I tried the approach shown above without any success. The approach using the QWebElement method kind of works. My problem with this approach is how to insert the table at the current text cursor position. Using the code show above it is inserted at the end of the HTML document.
-
Quick update: I have abandoned the approach to insert the table directly via QWebElement since I can't find a way to insert the table at the position of the text cursor.
Instead I'm now using javascript to insert the table. But there are still some things I'm not happy with. I have to insert the javascript functions into the HTML during runtime. Doing this is not as straight forward as I expected.
This does not work:
@
QString javaScript = QString("< script type="text/javascript" >\n"
"function createTable()\n"
"{\n"
"Stuff necessary to insert the table..."
"}\n"
"< /script >");
QWebElementCollection headElem = page()->currentFrame()->findAllElements("head");
headElem[0].appendInside(javaScript);
QString testJS = page()->mainFrame()->documentElement().evaluateJavaScript("createTable()").toString();
@Instead I have to do it this way:
@
QString javaScript = QString("< script type="text/javascript" >\n"
"function createTable()\n"
"{\n"
"Stuff necessary to insert the table..."
"}\n"
"< /script >");
QWebElementCollection bodyElem = page()->currentFrame()->findAllElements("body");
bodyElem[0].appendInside(javaScript);
QWebElementCollection scriptElem = page()->currentFrame()->findAllElements("script");
QWebElementCollection headElem = page()->currentFrame()->findAllElements("head");
headElem[0].appendInside(scriptElem.at(0));QString test = page()->currentFrame()->documentElement().toOuterXml();
QUrl baseUrl = QUrl::fromLocalFile(someFilePath);
setHtml(test, baseUrl);QString testJS = page()->mainFrame()->documentElement().evaluateJavaScript("createTable()").toString();
@Anyone got an idea why I can't insert the < script ... > part directly into the HTML header ? Or is there a way to execute a javascript function which is not written to the HTML file from within my code ?
-
Another update:
I managed to insert a table at the position of the text cursor using the evaluateJavascript() method.@
QString javaScript = QString("$(function ()"
"{"
"var sel, range, html;"
"var newTable = document.createElement("table");"
"var text = document.createTextNode("testtesttest");"
"var newTableRow = newTable.insertRow(0);"
"var newTableCell = newTableRow.insertCell(0);"
"newTableCell.appendChild(text);"
"if(window.getSelection)"
"{"
"sel = window.getSelection();"
"if(sel.getRangeAt && sel.rangeCount)"
"{"
"range = sel.getRangeAt(0);"
"range.deleteContents();"
"range.insertNode( newTable );"
"}"
"}"
"else if (document.selection && document.selection.createRange)"
"{"
"document.selection.createRange().node = newTable;"
"}"
"});");
QString testJS = page()->mainFrame()->documentElement().evaluateJavaScript(javaScript).toString();
@There are still some things missing, but that rather relates to javascript then Qt. And this atleast works as expected and can be used as a hint into the right directions for people who are new to javascript (like me). The "fancy browser example":http://qt.gitorious.org/qt/qtwebkit-examples-and-demos/trees/master/examples/webkit/fancybrowser was very helpfull.