01. QTextBrowser简介

QTextBrowser是Qt库中的一个类，用于显示富文本内容和超链接。QTextBrowser继承于QTextEdit的只读模式，提供了一些额外的功能，使得显示和浏览文本内容变得更加方便和灵活。它支持显示格式丰富的文本，包括粗体、斜体、下划线、超链接等。

QTextBrowser支持多种文件格式，包括纯文本文件(.txt)、HTML文件(.html、.htm)、XML文件(.xml)、富文本格式文件(.rtf)，和Markdown格式(.md，CommonMark和GitHub风格)。这些文件格式都可以在QTextBrowser进行显示和渲染。

  • QTextBrowser的主要功能和特点：

  • 显示富文本内容：QTextBrowser可以显示格式化的富文本，包括粗体、斜体、下划线等，以及超链接。
  • 支持交互：用户可以点击超链接，QTextBrowser会响应链接的打开操作。
  • 可定制：开发者可以根据需求对QTextBrowser进行定制，比如改变文本的样式、添加额外的功能等。

  • 如何使用QTextBrowser：

头文件：#include <QTextBrowser>

CMake: find_package(Qt6 REQUIRED COMPONENTS Widgets)

             target_link_libraries(mytarget PRIVATE Qt6::Widgets)

qmake：QT += widgets

继承于：QTextEdit

02. QTextBrowser显示HTML文本例子

#include <QTextBrowser>
QTextBrowser * p_text_browser = new QTextBrowser(this);
p_text_browser->move(0, 0);
p_text_browser->resize(this->size());
p_text_browser->setHtml("<h1>Hello, 20YC编程社区！</h1><p>这是一段 <b>粗体</b> 和 <i>斜体</i> 文本.</p><p><a href=\"https://www.baidu.com\">请点击这里</a> 欢迎关注我们公众号【20YC编程】哦。</p>");

03. QTextBrowser信号

// 当导航回退操作状态改变时，发射该信号。
void backwardAvailable(bool b)
// 当导航前进操作状态改变时，发射该信号。
void forwardAvailable(bool b)
// 导航历史数据有改变时，发射该信号。
void historyChanged()
// 当调用setSource()函数，source来源改变时，发射该信号。
void sourceChanged(const QUrl &url)
// 当鼠标停留在超链接上，超链接内容高亮显示时，发射该信号。
void highlighted(const QUrl &url)
// 当点击超链接时，发射该信号。
void anchorClicked(const QUrl &url)

04. QTextBrowser常用属性

  • openExternalLinks打开外部链接

true：使用QDesktopServices::openUrl()外部的方式，打开超链接。

false：在QTextBrowser内部打开，并添加到导航历史。（默认）

// 访问函数
bool openLinks() const
void setOpenLinks(bool open)

  • openLinks是否允许打开超链接：

true：表示鼠标或键盘点击超链接时，自动打开链接地址。

默认 true。

// 访问函数
bool openLinks() const
void setOpenLinks(bool open)

05. QTextBrowser本地资源文件操作

  • 源文件操作：

// 返回源文件URL。
QUrl source() const
// 返回源文件类型。
QTextDocument::ResourceType sourceType() const
// 设置源文件。
void setSource(const QUrl &name, QTextDocument::ResourceType type = QTextDocument::UnknownResource)

/**** 例子：加载本地HTML文件 ****/
p_text_browser->setSource(QUrl::fromLocalFile("D:/demo_files/hello_20YC.html"));

  • 源文件搜索路径：

当加载的文件比较多，或者分散在不同目录的时候，可以利用搜索路径来实现相关功能。

// 访问函数
QStringList searchPaths() const
void setSearchPaths(const QStringList &paths)

/**** 例子：利用搜索路径 ****/
p_text_browser->setSearchPaths(QStringList() << "D:/demo_files/");
p_text_browser->setSource(QUrl::fromLocalFile("hello_20YC.html"));

  • loadResource()虚函数：

派生类重写loadResource()虚函数，可以捕捉到文档加载的所有资源URL和资源类型。资源类型包括：

QTextDocument::HtmlResource           QString or QByteArray

QTextDocument::ImageResource        QImage, QPixmap or QByteArray

QTextDocument::StyleSheetResource QString or QByteArray

QTextDocument::MarkdownResource  QString or QByteArray

// 虚函数。
virtual QVariant loadResource(int type, const QUrl &name) override

  • doSetSource()虚函数：

派生类重写doSetSource()虚函数，可以捕捉到设置的文档类型。文档类型包括：

QTextDocument::UnknownResource         0 未知类型。

QTextDocument::HtmlResource                 1 HTML文档类。

QTextDocument::ImageResource               2 QPixmap and QImage 图像类型。

QTextDocument::StyleSheetResource        3 CSS文档类型。

QTextDocument::MarkdownResource         4 Markdown文档类型。

QTextDocument::UserResource                 100 用户自定义类型。

// 虚函数。
virtual void doSetSource(const QUrl &name, QTextDocument::ResourceType type = QTextDocument::UnknownResource)

06. QTextBrowser加载md文件例子

  • markdown_sample.md文件内容：

# Markdown 示例文档
## 标题 1
这是标题 1 的文本。
### 标题 2
这是标题 2 的文本。
#### 标题 3
这是标题 3 的文本。

**粗体文本** 和 *斜体文本*

=================  
  
你可以使用 **粗体** 和 *斜体* 来强调文本。

列表
--

- 项目 1
- 项目 2
- 项目 3

1. 项目 1  
2. 项目 2  

链接
--

[点击这里](https://www.baidu.com) 访问一个网站。

图片
--

![示例图片](20YC_qrcode.jpg)

引用
--

> 这是一段引用文本。
>
>

代码块
-----

```C++
void hello_world()
{
    print("Hello, world!");
}

  • QTextBrowser加载md文件代码：

#include <QTextBrowser>
QTextBrowser * p_text_browser = new QTextBrowser(this);
p_text_browser->move(0, 0);
p_text_browser->resize(this->size());
p_text_browser->setSearchPaths(QStringList() << "D:/demo_files/");
p_text_browser->setSource(QUrl::fromLocalFile("markdown_sample.md"));

07. QTextBrowser导航功能

  • 导航概念：

浏览历史：在浏览超链接文档时，鼠标点击链接会进入到下一个页面，所生成的浏览历史。

backward回退：浏览前一个文档。

forward前进：浏览下一个文档。

home首页：浏览历史的第一个文档。

导航信息：包括有导航标题 、URL链接和内容三部分。

  • 导航属性：

// 返回是否允许回退。
bool isBackwardAvailable() const
// 返回是否允许前进。
bool isForwardAvailable() const
// 浏览历史标题。
// i<0   返回回退浏览历史标题
// i==0  返回当前浏览标题
// i>0   返回前进浏览历史标题
QString historyTitle(int i) const
// 浏览历史 URL。
// i<0   返回回退浏览历史标题。
// i==0  返回当前浏览标题。
// i>0   返回前进浏览历史标题。
QUrl historyUrl(int) const
// 返回可回退导航数量。
int backwardHistoryCount() const
// 返回可前进导航数量。
int forwardHistoryCount() const

  • 导航操作：

// 清空浏览历史。
void clearHistory()
// 回退。
virtual void backward()
// 前进。
virtual void forward()
// 浏览第一页。
virtual void home()
// 重新加载当前文档。
virtual void reload()

08. QTextBrowser综合使用例子

在QMainWindow主窗口上创建QTextBrowser控件，并实现窗口大小自适应。

主界面利用QToolBar工具栏实现各种功能按钮。

工具栏按钮包括，选择本地HTML文件、清空和插入HTML文本到QTextBrowser上显示。

  • .h头文件源码：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QToolBar>
#include <QTextBrowser>

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    // 选择本地 HTML 文件，显示到 m_pTextBrowser 上。
    void slotOpenHtmlFile(bool checked = false);

    // 清空 m_pTextBrowser 内容。
    void slotClear(bool checked = false);

    // 添加一段 HTML 文本。
    void slotAddDefaltHtmlText(bool checked = false);

private:
    // 重写 QMainWindow 窗口尺寸改变虚函数，实现 m_pTextBrowser 窗口自适应
    virtual void resizeEvent(QResizeEvent *event);

private:
    // 工具栏
    QToolBar * m_pToolBar{nullptr};
    // 富文本浏览器
    QTextBrowser * m_pTextBrowser{nullptr};
};
#endif // MAINWINDOW_H

  • .cpp源文件源码：

#include "mainwindow.h"
#include <QResizeEvent>
#include <QToolBar>
#include <QApplication>
#include <QStyle>
#include <QFileDialog>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setWindowTitle("20YC编程社区");
    this->setWindowFlags(Qt::CustomizeWindowHint|Qt::WindowMinMaxButtonsHint|Qt::WindowCloseButtonHint);
    this->resize(780, 680);

    // 工具栏
    m_pToolBar = new QToolBar(this);
    this->addToolBar(m_pToolBar);

    // 工具按钮
    m_pToolBar->addAction(QIcon(QApplication::style()->standardIcon(QStyle::SP_DirOpenIcon)), "打开HTML文件", this, &MainWindow::slotOpenHtmlFile);
    m_pToolBar->addSeparator();
    m_pToolBar->addAction("清空", this, &MainWindow::slotClear);
    m_pToolBar->addAction("插入内容", this, &MainWindow::slotAddDefaltHtmlText);

    // 富文本浏览器
    m_pTextBrowser = new QTextBrowser(this);
    m_pTextBrowser->move(0, m_pToolBar->height());
    m_pTextBrowser->resize(this->size());
    m_pTextBrowser->setOpenExternalLinks(true);

    // 默认添加一段 HTML 内容。
    slotAddDefaltHtmlText();
}

MainWindow::~MainWindow()
{
}

void MainWindow::slotOpenHtmlFile(bool checked)
{
    const QString qstr_file_name = QFileDialog::getOpenFileName(this, "选择HTML文件", "", "HTML Files (*.html)");
    if (qstr_file_name.isEmpty())
    {
        return;
    }

    // 打开本地HTML文件
    m_pTextBrowser->clear();
    m_pTextBrowser->setSource(QUrl::fromLocalFile(qstr_file_name));
}

void MainWindow::slotClear(bool checked)
{
    m_pTextBrowser->clear();
}

void MainWindow::slotAddDefaltHtmlText(bool checked)
{
    m_pTextBrowser->append("<h1>Hello, 20YC编程社区！</h1>\
<p>这是一段 <b>粗体</b> 和 <i>斜体</i> 文本.</p>\
<p><a href=\"https://www.baidu.com\">这是超链接地址</a> </p>\
<p>这是一张【20YC编程】微信公众号二维码，欢迎关注我们哦~</p>\
<img src=\"E:/20YC/QT/demo_files/20YC_qrcode.jpg\" alt=\"扫码关注微信公众号\">\
<h2>请点击窗口上面工具栏按钮！</h2>");
}

void MainWindow::resizeEvent(QResizeEvent *event)
{
    if (nullptr != m_pTextBrowser)
    {
        m_pTextBrowser->resize(event->size().width(), event->size().height()-m_pToolBar->height());
    }

    QMainWindow::resizeEvent(event);
}

09 附录：完整源码

关注公众号下载本示例完整源码(16_QTextBrowser_example.zip)。

-【End】-

#想了解更多精彩内容，关注下方公众号，还有示例源码、开发工具免费下载。

喜欢本文章，记得点赞、分享、关注哦~

阅读全文
AI总结
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

大学生摸鱼暂停！G-Star 校园开发者计划，喊你上车啦?

avatar GitCode 开源社区
cover

G-Star 校园开发者计划·黑科大｜开源第一课之 Git 入门

avatar GitCode 开源社区
cover

小胰宝 PancrePal 强势加入 GitCode！开启开源抗癌新纪元

avatar GitCode 开源社区