Qt rich text editor: load HTML into QTextEdit and keep its images working

A report looks correct in Chrome but loses its layout when you put it in QTextEdit. Qt's rich text engine supports a documented HTML subset. Use it for editable paragraphs, lists, tables, and supported styling, then resolve image paths from an explicit document location.

For a small service note, start with a heading, a paragraph, and an image. Leave browser layouts such as CSS Grid out of the document. Qt's supported HTML subset lists the tags, attributes, and CSS properties that its text engine accepts.

Load known HTML through an explicit API

This Qt 6 C++ fragment belongs inside an existing Widgets application. Replace the example path with the local folder containing your note and its images directory:

#include <QTextEdit>
#include <QTextDocument>
#include <QUrl>

auto *editor = new QTextEdit(parent);
editor->document()->setBaseUrl(
    QUrl::fromLocalFile("C:/service-notes/"));
editor->setHtml(
    "<h2>Pump inspection</h2>"
    "<p>Replace the intake filter before restarting.</p>"
    "<p><img src=\"images/intake.png\" alt=\"Intake filter\"></p>");

The trailing slash in the base path matters. QTextDocument's base URL rules resolve relative resources within the base URL's directory. A base ending in service-notes/ resolves images/intake.png below that folder. A path ending in service-notes can instead treat the last segment as a file name.

Choose setHtml() when the string is HTML and setPlainText() when angle brackets should remain visible. setText() tries to detect the format. Naming the format explicitly avoids surprises when an operator's note happens to contain markup. The QTextEdit reference describes these entry points.

When loading bytes from disk, decode them to the intended QString before calling setHtml(). A correct image path cannot repair incorrectly decoded text.

Save the edited document, not the input string

After the operator edits “intake” to “outlet,” the original C++ string has not changed. Read the document:

const QString editedHtml = editor->toHtml();
const QString readableText = editor->toPlainText();

Use editedHtml for a rich document save and readableText for a plain text destination. Writing the original input again discards the edit. A complete file save also needs your application's file selection, encoding, write-error handling, and confirmation behavior; these two lines only obtain the values.

Qt can normalize the HTML it loads. Compare the saved note's text, structure, and supported formatting after reopening. Comparing source strings byte for byte will also flag serializer changes that did not alter the note.

Calling setHtml() again replaces the document and clears undo history. Load a different file when the user chooses it; avoid feeding a fresh copy back into the widget on every textChanged signal. That signal can report formatting edits as well as changed words.

Keep image files with the exported HTML

An HTML string containing images/intake.png does not contain that image's bytes. If you move only the HTML to another folder, its relative reference may stop resolving. Preserve the directory layout or deliberately change how the application supplies resources.

For an application-owned image, QTextDocument::addResource() can associate an image resource with a URL used in the document. That is an in-memory resource decision; it does not establish that a later standalone HTML export includes the image. Check the actual export package separately.

Use this small acceptance case in your Qt build:

  1. Open the service note and confirm that the filter image appears.
  2. Edit the instruction and apply bold to the replacement part's name.
  3. Save the document's HTML and reopen it with the same resource base.
  4. Move the intended delivery folder and reopen from its new location.

The final step catches dependencies on the development machine's absolute path. These are checks to run in the native application; a browser rendering of the article cannot prove Qt widget behavior.

If your source is an entire interactive website, first decide whether it belongs in a browser engine rather than a rich text document. The HTML viewer overview helps distinguish reading a page from editing its source. Keep the service note within Qt's document model, and send its required image files with the saved copy.

Keep reading