Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved How to insert a div into a QTextEdit?

    General and Desktop
    qtextedit html
    2
    4
    5050
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Ctwx
      Ctwx last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • Chris Kawa
        Chris Kawa Moderators last edited by 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.

        1 Reply Last reply Reply Quote 2
        • Ctwx
          Ctwx last edited by 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?

          1 Reply Last reply Reply Quote 0
          • Chris Kawa
            Chris Kawa Moderators last edited by 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();
            
            1 Reply Last reply Reply Quote 0
            • First post
              Last post