我如何在 pyqt5 中使用 QTextEdit 来显示 html 的所有样式(包括 css 的样式) [英] how I use the QTextEdit in pyqt5 to show all style of the html (including the style of css)
问题描述
Python 3.6 PYQT 5.12.1
Python 3.6 PYQT 5.12.1
我准备用pyqt5展示我需要的样式，我知道pyqt5中的QTextEdit可以很好的展示html代码(我有一些web开发经验)，所以我决定用html/css来展示我的风格 .但是，在 css 中显示代码时可能会出现一些问题.我该怎么做才能让它显示 css/javascript ?如果不行，能否推荐其他修改样式的方法?
I am ready to show the style I need by pyqt5 and I knew that the QTextEdit in pyqt5 can display the html code pretty good (I have some experience in web development), so I decided to use html/css to show my style . However , it may have some problem in showing the code in css . What can I do to let it can show the css/javascript ? If it can‘t , can recommend other methods to modify the style?
当我在 html 中编码而不是 css 时，它可以显示一些样式，如 width = "100" height = "100" 并且有些不能像 border-radius 那样显示:50%；.当我在 css 中编码样式时，它不会产生任何效果.顺便说一句，我已经导入了 CSS 代码.CSS 代码在 QTextEdit 中什么都不做(但在 html 中没问题)
It can show some style like width = "100" height = "100" when I code it in the html but not css and some can't display like border-radius:50%;. It won't get any effect when I code the style in css . By the way , I've imported CSS code.
The CSS code do nothing in QTextEdit (but it is ok in html)
.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
class WINDOW(QMainWindow):
def __init__(self):
super().__init__()
self.init()
def init(self):
w_width,w_height,w_x,w_y = 700,640,700,200
self.set_size_pos(w_width,w_height,w_x,w_y);
self.set_message_textedit()
self.message_textedit.setHtml(self.get_html())
self.show()
def set_size_pos(self,width,height,x,y):
'''
set window's width , height and position
'''
self.resize(width,height)
self.move(x,y)
def set_message_textedit(self):
self.message_textedit = QTextEdit(self)
self.message_textedit.setFont(QFont("Microsoft YaHei",12))
self.message_textedit.resize(680,420)
self.message_textedit.move(10,50)
self.message_textedit.setReadOnly(True)
def get_html(self):
html = ""
with open("./chat-style/chat.html","r",encoding = "utf-8") as f:
html = f.read()
return html
if __name__ == '__main__':
app = QApplication(sys.argv)
test = WINDOW()
sys.exit(app.exec_())
.html
<!doctype html>
<html lange="zh-CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./chat.css">
<script src = "chat.js"></script>
</head>
<body>
<img class = "tx" src="E:studyassiataantpictureicon.jpg">
<div>Welcome ~ Don!</div>
</body>
</html>
.css
.tx
{
border-radius:50%;
width: 30;
height: 30;
}
推荐答案
QTextEdit 仅支持 CSS 2.1，如 文档:
QTextEdit only supports CSS 2.1 as indicated by the docs:
支持所有 CSS 2.1 选择器类，但伪类选择器除外，例如 :first-child、:visited 和 :hover.
All CSS 2.1 selector classes are supported except pseudo-class selectors such as :first-child, :visited and :hover.
但是 border-radius 是在 CSS3 中引入的.所以不幸的是你不能使用它.我建议您阅读以下链接，以便了解允许的标签.
But border-radius was introduced in CSS3. So you can not use it unfortunately. I recommend you read the following link so that you know the allowed tags.
另一种选择是使用支持这些标签的 QWebEngineView:
Another alternative is to use QWebEngineView that supports these tags:
*.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import os
import sys
from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets
class MainWindow(QtWidgets.QMainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
view = QtWebEngineWidgets.QWebEngineView()
file = os.path.join(
os.path.dirname(os.path.realpath(__file__)),
"chat-style/chat.html"
)
view.load(QtCore.QUrl.fromLocalFile(file))
self.setCentralWidget(view)
self.resize(640, 480)
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec_())
如果您没有安装 QWebEngineView，则必须使用以下命令进行安装:
If you do not have QWebEngineView installed, you must install it with the following command:
python -m pip install PyQtWebEngine
这篇关于我如何在 pyqt5 中使用 QTextEdit 来显示 html 的所有样式(包括 css 的样式)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
