How to insert a div into a QTextEdit?

Ctwx

I am trying to program a little chat program and I want to format my text messages. First I thought, I just add the Stylesheet via Designer. It didn't work. Then I found out, that ui->textEdit->insertHtml(QText) does not add any HTML!

Why is that? I mean, the documentation clearly says that:

Inserts the text html at the current position(). The text is interpreted as HTML.

Note: When using this function with a style sheet, the style sheet will only apply to the current block in the document. In order to     apply a style sheet throughout a document, use QTextDocument::setDefaultStyleSheet() instead.

Source: http://doc.qt.io/qt-5/qtextcursor.html#insertHtml

Then I tried to use the textCursor instead:

    ui->textEdit->textCursor().insertHtml("<div>Hello World</div>");
    ui->textEdit->textCursor().insertBlock();

Doesn't work either.

So my question ist: How can I add a div which I can fully style via stylesheet?

Chris Kawa

Hi, welcome to devnet.

ui->textEdit->document()->setDefaultStyleSheet("div { color: blue; }");
ui->textEdit->textCursor().insertHtml("<div>Hello World</div>");
ui->textEdit->textCursor().insertBlock();

Prints a blue text as expected.
What kind of styling do you need? remember that QTextEdit displays only rich text that is a subset of HTML and has limited css support. See the docs for a list.

Ctwx

OK, it works for me too. Still, it takes the contents of my div and puts it into a <p>. I don't really like that. I'd prefer to keep my div. But I think I can work with that.

void MainWindow::on_pushButton_clicked()
{
    QString message = "<div class=\"message\">" + ui->lineEdit->text() + "</div>";
    ui->lineEdit->clear();
    ui->textEdit->document()->setDefaultStyleSheet("div { background: red; border: 1px #000 solid; margin-top: 10px; }");
    ui->textEdit->textCursor().insertHtml(message);
    ui->textEdit->textCursor().insertBlock();

    qDebug() << ui->textEdit->toHtml();
}

Thank you for your help!

Another issue now appears: When insertBlock() is called, it adds already a new block at the end. With a background color, you can see it, but you shouldn't.
I tried a different arrangement of the function calls, so that insertBlock() comes before insertHtml, but that didn't work either.
This is what I mean: https://i.imgur.com/EXbpr6c.png

You know any solution for that?

Chris Kawa

I don't really like that

As I said - QTextEdit is not an HTML browser. It handles rich text and stores it as styled text blocks. It accepts subset of HTML as input but it does not store it as such. So it doesn't put the content in <p>. It simply has no notion of <p>, <div> etc. at all. That's the source of the remark in the docs, that the stylesheet is only applied on entry. After that there are no <div> to style. The output you get back is a result of another conversion, where every paragraph is simply output as <p>. It does not reflect what you input.

Take a look at the link I posted previously. QTextEdit supports only subset of HTML/CSS. It does not support class attribute or a "border" CSS property.

How about you try to operate directly on text blocks, and not go through HTML? Here's an example for a chat-like formatting:

QTextBlockFormat tbf1;
tbf1.setAlignment(Qt::AlignLeft);
tbf1.setBackground(Qt::red);

QTextBlockFormat tbf2;
tbf2.setAlignment(Qt::AlignRight);
tbf2.setBackground(Qt::green);

ui->textEdit->textCursor().beginEditBlock();
ui->textEdit->textCursor().setBlockFormat(tbf1);
ui->textEdit->textCursor().insertText("Wassup?\n");
ui->textEdit->textCursor().endEditBlock();

ui->textEdit->textCursor().beginEditBlock();
ui->textEdit->textCursor().setBlockFormat(tbf2);
ui->textEdit->textCursor().insertText("Nothin' much\n");
ui->textEdit->textCursor().insertText("Just playin' a game. How 'bout you?\n");
ui->textEdit->textCursor().endEditBlock();

ui->textEdit->textCursor().beginEditBlock();
ui->textEdit->textCursor().setBlockFormat(tbf1);
ui->textEdit->textCursor().insertText("Nothin' much\n");
ui->textEdit->textCursor().endEditBlock();