【Qt开发流程】之富文本处理

描述

Scribe框架提供了一组类，用于读取和操作结构化的富文本文档。与Qt中以前的富文本支持不同，新的类集中在QTextDocument类上，而不是原始文本信息。这使开发者能够创建和修改结构化的富文本文档，而不必准备中间标记格式的内容。

文档中的信息可以通过两个互补的接口访问：基于光标的接口用于编辑，只读分层接口提供文档结构的高层次概述。基于光标的接口的主要优点是，可以使用模拟用户与编辑器交互的操作编辑文本，而不会丢失文档的基础结构。只读分层接口在执行搜索和文档导出等操作时最有用。

在Qt中，富文本处理可以使用QTextEdit和QTextBrowser实现。这两个类都继承自QAbstractScrollArea类，提供了文本的显示和编辑功能。

QTextEdit提供了类似于一个文本编辑器的界面，可以进行编辑和显示富文本。需要注意的是，QTextEdit可以显示图片和嵌入式对象，但不能直接播放音频和视频。

QTextBrowser提供了一个只读的文本显示界面，可以用于显示富文本内容。与QTextEdit不同，QTextBrowser只支持显示图片，不支持嵌入式对象。

在Qt中实现富文本处理的流程：

1. 创建QTextEdit或QTextBrowser对象，设置其属性和初始文本内容；

2. 使用QTextCursor操作文本内容，如插入文本、设置字体和颜色、插入图片等；

3. 将富文本内容保存到文件或使用QClipboard复制到剪贴板中；

4. 在需要的位置显示富文本内容，如在某个对话框中、在网页中等。

示例代码实现在QTextEdit中插入一张图片和设置不同的字体和颜色：
注意：在使用插入图片功能时，需要将图片资源添加到Qt项目中，并使用相应的路径引用。

    ui->textEdit->setPlainText("Hello World!");  //设置初始文本内容
    ui->textEdit->setTextInteractionFlags(Qt::TextSelectableByMouse | Qt::TextSelectableByKeyboard); //设置文本可选中属性为false

    QTextCursor cursor = ui->textEdit->textCursor(); //获取文本光标
    cursor.insertImage(":/images/image.png"); //插入图片

    QFont font("Arial", 16, QFont::Bold); //设置字体
    cursor.movePosition(QTextCursor::End); //将光标移动到文本结尾
    QTextCharFormat format;
    format.setFont(font);
    cursor.insertText("\nQt is great!", format); //插入文本并设置字体

    QColor color(Qt::red); //设置颜色
    cursor.movePosition(QTextCursor::Start); //将光标移动到文本开头
    cursor.movePosition(QTextCursor::Right, QTextCursor::KeepAnchor, 5); //选中第一个单词
//    cursor.setCharFormat(QTextCharFormat()); //清除之前的格式
//    cursor.setCharFormat(QTextCharFormat(), QTextCharFormat::ForegroundBrush); //设置前景色
    ui->textEdit->setTextCursor(cursor);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

富文本相关类

Qt提供了大量的类来解析、渲染、操作和编辑富文本。

QTextEdit的cursor和document关系图

Documen框架图

QTextFrame

    QTextDocument* doc = ui->textEdit->document();
    QTextFrame* frame = doc->rootFrame();
    QTextFrameFormat format;
    format.setBorderBrush(Qt::red);
    format.setBorder(3);
    frame->setFrameFormat(format);
1
2
3
4
5
6

运行程序，发现只可以在红色边框内编辑。

使用光标类对象，在根框架中添加一个子框架。

    QTextFrameFormat frameFormat;
    frameFormat.setBackground(Qt::lightGray);
    frameFormat.setMargin(10);
    frameFormat.setPadding(10);
    frameFormat.setBorder(2);
    frameFormat.setBorderStyle(QTextFrameFormat::BorderStyle_Dotted);
    QTextCursor cursor = ui->textEdit->textCursor();
    cursor.insertFrame(frameFormat);
1
2
3
4
5
6
7
8

显示如下：

文本块

绑定信号和槽，输出文本块，以下只可获取文本块，不可获取frame的内容。

void MainWindow::on_action_frame_triggered()
{
    QTextDocument* doc = ui->textEdit->document();
    QTextFrame* frame = doc->rootFrame();
    QTextFrame::iterator it = frame->begin();
    while (!it.atEnd()) {
        QTextFrame* childFrame = it.currentFrame();
        QTextBlock childBlock = it.currentBlock();
        if(childFrame)
        {
            qDebug() << "frame";
        }else if(childBlock.isValid()){
            qDebug() << "block :" << childBlock.text();
        }

        ++it;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示如下：


获取frame的内容：

void MainWindow::on_actionframeText_triggered()
{
   QTextDocument* doc = ui->textEdit->document();
   QTextBlock block = doc->firstBlock();
   for (int var = 0; var < doc->blockCount(); ++var) {
       qDebug() << block.text();

       block = block.next();
   }

}
1
2
3
4
5
6
7
8
9
10
11

界面及结果：

QTextBlockFormat和QTextCharFormat

QTextBlockFormat：设置对齐方式、缩进等格式；
QTextCharFormat：设置字体、颜色、下划线等格式。

    QTextBlockFormat blockFormat;
    blockFormat.setAlignment(Qt::AlignCenter);
    cursor.insertBlock(blockFormat);
    QTextCharFormat charFormat;
    charFormat.setBackground(Qt::lightGray);
    charFormat.setForeground(Qt::blue);
    charFormat.setFont(QFont("宋体", 12, QFont::Bold, true));
    charFormat.setFontUnderline(true);
    cursor.setCharFormat(charFormat);
    cursor.insertText("helloworld");
1
2
3
4
5
6
7
8
9
10

效果如下：

插入表格、列表、图片

表格相关类：

QTextTableFormat、QTextTableCellFormat、 QTextTable

    QTextTable *insertTable(int rows, int cols, const QTextTableFormat &format);
    QTextTable *insertTable(int rows, int cols);
    QTextTable *currentTable() const;
1
2
3

示例：

    QTextTableFormat tableFormat;
    tableFormat.setCellSpacing(2);
    tableFormat.setCellPadding(10);
    cursor.insertTable(2, 2, tableFormat);
1
2
3
4

列表相关类：

QTextListFormat、QTextList

    QTextList *insertList(const QTextListFormat &format);
    QTextList *insertList(QTextListFormat::Style style);

    QTextList *createList(const QTextListFormat &format);
    QTextList *createList(QTextListFormat::Style style);
    QTextList *currentList() const;
1
2
3
4
5
6

示例：

    QTextListFormat listFormat;
    listFormat.setStyle(QTextListFormat::ListDecimal);
    cursor.insertList(listFormat);
1
2
3

图片相关类：

QTextImageFormat、

    void insertImage(const QTextImageFormat &format, QTextFrameFormat::Position alignment);
    void insertImage(const QTextImageFormat &format);
    void insertImage(const QString &name);
    void insertImage(const QImage &image, const QString &name = QString());
1
2
3
4

查找

查找到后，可以定位字符串所在的行和列的编号。

qDebug() << ui->textEdit->find("hello world", QTextDocument::FindBackward);

ui->textEdit->textCursor().blockNumber();
ui->textEdit->textCursor().columnNumber();
1
2
3
4