如何动态改变webView中的内容

Zonzely

我想要用qml+python做一个 markdown 编辑器，在QWebView中有个setHtml的方法，可以改变QWebView的显示内容，在qml中webView的内容怎么改变呢？

下面是代码,主要看Mytab.qml 就好啦。


main.qml

1. import QtQuick 2.2
   
2. import QtQuick.Controls 1.1
   
3. import QtQuick.Layouts 1.1
   
4. 
   
5. ApplicationWindow{
   
6.                 visible:true
   
7.                 width:640
   
8.                 height:480
   
9.                 id:window
   
10.                 title:"markdwon editor"
    
11. 
    
12.                 signal textUpdated(string text)
    
13. 
    
14.     Action {
    
15.         id: exitAction
    
16.         text: qsTr("E&xit")
    
17.         onTriggered: Qt.quit()
    
18.     }
    
19.     Action {
    
20.         id: newAction
    
21.         text: qsTr("New")
    
22.         iconSource: "images/new.png"
    
23.         onTriggered: {
    
24.             
    
25.                 var c = Qt.createComponent("Mytab.qml");
    
26.                 tabview.addTab("tab", c);
    
27.                 var last = tabview.count-1;
    
28.                 tabview.getTab(last).active = true; // Now the content will be loaded
    
29.                 //console.log(tabview.getTab(last).item);
    
30.         }
    
31.     }
    
32.     Action {
    
33.         id: cutAction
    
34.         text: qsTr("Cut")
    
35.         iconSource: "images/cut.png"
    
36.         onTriggered: textArea.cut()
    
37.     }
    
38.     Action {
    
39.         id: copyAction
    
40.         text: qsTr("Copy")
    
41.         iconSource: "images/copy.png"
    
42.         onTriggered: textArea.copy()
    
43.     }
    
44.     Action {
    
45.         id: pasteAction
    
46.         text: qsTr("Paste")
    
47.         iconSource: "images/paste.png"
    
48.         onTriggered: textArea.paste()
    
49.     }
    
50.     Action {
    
51.         id: selectAllAction
    
52.         text: qsTr("Select All")
    
53.         onTriggered: textArea.selectAll()
    
54.     }
    
55. 
    
56.     menuBar: MenuBar {
    
57.         Menu {
    
58.             title: qsTr("&File")
    
59.             MenuItem { action: newAction }
    
60.             MenuItem { action: exitAction }
    
61.         }
    
62.         Menu {
    
63.             title: qsTr("&Edit")
    
64.             MenuItem { action: cutAction }
    
65.             MenuItem { action: copyAction }
    
66.             MenuItem { action: pasteAction }
    
67.             MenuSeparator {}
    
68.             MenuItem { action: selectAllAction }
    
69.         }
    
70.     }
    
71. 
    
72.     toolBar: ToolBar {
    
73.         Row {
    
74.             anchors.fill: parent
    
75.             ToolButton { action: newAction }
    
76.             ToolButton { action: cutAction }
    
77.             ToolButton { action: copyAction }
    
78.             ToolButton { action: pasteAction }
    
79.         }
    
80.     }
    
81. 
    
82. 
    
83. 
    
84. 
    
85.        
    
86.        
    
87. 
    
88.         TabView{
    
89.             anchors.fill: parent
    
90.             visible: true
    
91.             id:tabview
    
92.             Layout.fillHeight: true
    
93.             Layout.fillWidth: true
    
94.         }
    
95.    
    
96. }
    
97. 
    
98. 
    
99. 
    

复制代码

Mytab.qml

1. import QtQuick 2.2
   
2. import QtQuick.Controls 1.1
   
3. import QtQuick.Layouts 1.1
   
4. import QtWebKit 3.0
   
5. 
   
6. Rectangle{
   
7.         id:tab
   
8.         width:parent.width
   
9.         height:parent.height
   
10.        
    
11. 
    
12. 
    
13. 
    
14.     Row {
    
15.         id: row
    
16.         anchors.fill: parent
    
17.         spacing: 8
    
18.         
    
19.         Rectangle{
    
20.                 width:parent.width/2
    
21.                 height:parent.height
    
22.                 TextArea {
    
23.                         id: textArea
    
24.                         text:""
    
25.                         anchors.fill: parent
    
26.                         onTextChanged: {
    
27.                                
    
28.                                 htmlChanged(textUpdated(text))
    
29.                         }
    
30.                 }
    
31. 
    
32.         }
    
33. 
    
34.         Rectangle{
    
35.                 width:parent.width/2
    
36.                 height:parent.height
    
37.                 WebView {
    
38.                         id: web
    
39.                         url:""
    
40.                         anchors.fill: parent
    
41.                 }
    
42.         }
    
43.     }
    
44. 
    
45.     function htmlChanged(html){
    
46.        
    
47.     }
    
48. }

复制代码

main.py

1. import sys
   
2. from PyQt5.QtCore import QObject, QUrl, Qt
   
3. from PyQt5.QtWidgets import QApplication
   
4. from PyQt5.QtQml import QQmlApplicationEngine
   
5. import markdown
   
6. 
   
7. def toHtml(text):
   
8.         return markdown.markdown(text)
   
9. 
   
10. 
    
11. if __name__ == "__main__":
    
12.   app = QApplication(sys.argv)
    
13.   engine = QQmlApplicationEngine()
    
14. 
    
15.   
    
16. 
    
17.   engine.load('main.qml')
    
18. 
    
19.   win = engine.rootObjects()[0]
    
20. 
    
21.   win.textUpdated.connect(toHtml)
    
22.   win.show()
    
23.   sys.exit(app.exec_())
    

复制代码