我如何在 pyqt5 中使用 QTextEdit 来显示 html 的所有样式(包括 css 的样式)-前端问题

how I use the QTextEdit in pyqt5 to show all style of the html (including the style of css)(我如何在 pyqt5 中使用 QTextEdit 来显示 html 的所有样式(包括 css 的样式))

本文介绍了我如何在 pyqt5 中使用 QTextEdit 来显示 html 的所有样式(包括 css 的样式)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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: