Style text in QTextEdit?

legitnameyo

I want to press a button and make the rest of the text styled, eg. bold and then when the button is pressed again the text removes that added style. Is there any way of doing that in Qt QTextEdit?

Maaz Momin

You need to apply stylesheet on QTextEdit. One way to write this is with "property".

//StyleSheet
QTextEdit[styleVariant="1"] {
// Custom Style
}
QTextEdit{
// Default Style
}

// connect pushbutton clicked(bool checked = false) signal to onPushButtonClicked
onPushButtonClicked(bool checked)
{
if(checked)
textEdit->setProperty("styleVariant", 1);
else
textEdit->setProperty("styleVariant", 0);
}

jsulm

@legitnameyo said in Style text in QTextEdit?:

rest of the text

I'm not sure what you mean here.
If you want to change the style of the whole text you can use http://doc.qt.io/qt-5/qtextedit.html#setCurrentFont and http://doc.qt.io/qt-5/qfont.html#setBold

You can also use http://doc.qt.io/qt-5/qtextedit.html#html-prop and set your text as HTML and use HTML style tags.

legitnameyo

I want the text I'm writing next to become bold, italic, etc. depending on which button was pressed.

legitnameyo

the styleVariant way did not work at all, nothing happened!

QTextEdit[styleVariant="1"] {
	font: italic bold 30px serif;
	background-color: white;
	color: black;
}

QTextEdit {
	background-color: white;
	color: black;
}

void MainWindow::on_bold_clicked()
{
    if(!bold_pressed) {
        ui->bold->setStyleSheet("QPushButton { color: black; font: 13px;font-weight: 600;background-color: #e6e6e6;border: 1px solid #cccccc; border-top-left-radius: 9px;border-bottom-left-radius: 9px;height: 10px;width: 10px;}QPushButton:hover {background-color: #e6e6e6;}");

        QTextCharFormat format;
        format.setFontWeight(QFont::Bold);

        QTextCursor cursor = ui->textEdit->textCursor();
        cursor.mergeCharFormat(format);

        bold_pressed = true;

        ui->textEdit->setProperty("styleVariant", 1);
    } else {
        ui->bold->setStyleSheet("QPushButton { color: black; font: 13px;font-weight: 600;background-color: white;border: 1px solid #cccccc; border-top-left-radius: 9px;border-bottom-left-radius: 9px;height: 10px;width: 10px;}QPushButton:hover {background-color: #e6e6e6;}");

        QTextCharFormat format;
        format.setFontWeight(QFont::Normal);

        QTextCursor cursor = ui->textEdit->textCursor();
        cursor.mergeCharFormat(format);

        bold_pressed = false;

        ui->textEdit->setProperty("styleVariant", 0);
    }
}

JonB

@legitnameyo
Assuming this approach will indeed give you what you want, after setProperty() you have not completed the job. As per e.g. https://wiki.qt.io/Dynamic_Properties_and_Stylesheets Limitations sub-section, you still need to either unpolish() and then polish(), or you need to make a change via setStylesheet() (e.g. set it to some other string and then back to what it should be), on the textEdit whose property you are altering. This is required before Qt notices the change you have made via setProperty(), and I did find I had to do that in my code.

Maaz Momin

@legitnameyo Yes @JonB is correct. I forgot to mention that you need to unpolish and then polish your item.

ui->textEdit->style()->unpolish(ui->textEdit);
ui->textEdit->style()->polish(ui->textEdit);
ui->textEdit->update();

Maaz Momin

Also i can see that at the same time you are trying to change pushbutton's stylesheet. The only difference i see is "background-color: white/e6e6e6"

You can achieve this similar to QTextEdit.

legitnameyo

Well, the styleVariant works but on the whole document. I am looking for something... more local. I want the text I write after pressing the bold button to become bold then when I press the bold button again the text goes back to normal. Adding unpolish() and polish() did the trick but again affected the whole document.

Gojir4

Hi @legitnameyo,

I guess you are trying to reproduce some standard rich text editor features.
You can get inspiration from the Text Edit Example.

edit: The important part from this example are :

void TextEdit::textBold()
{
    QTextCharFormat fmt;
    fmt.setFontWeight(actionTextBold->isChecked() ? QFont::Bold : QFont::Normal);
    mergeFormatOnWordOrSelection(fmt);
}

and

void TextEdit::mergeFormatOnWordOrSelection(const QTextCharFormat &format)
{
    QTextCursor cursor = textEdit->textCursor();
    if (!cursor.hasSelection())
        cursor.select(QTextCursor::WordUnderCursor);
    cursor.mergeCharFormat(format);
    textEdit->mergeCurrentCharFormat(format);
}

I think this is all what you need to achieve the behavior you need.

legitnameyo

I have already looked at the Text Edit Example but there are two issue I have with it. 1. it's a bit too complicated at times for me and 2. I think it's using Qt4 since it references everything differently than I do in Qt5. Eg. it references textEdit->someThing() instead of ui->textEdit->something(), that along with the fact that it's Qt4 makes some code break in my environment. Because of this I can't copy, edit to my preference and learn from it. I tried using mergeFormatOnWordOrSelection but it gave me errors because it was the wrong Qt. I have Qt4 on my other computer and there it works fine but here on my mac with Qt5 it breaks. I'll try again though so as to get the error and maybe fix the issues!

legitnameyo

the "mergeFormatOnWordOrSelection" gives me "error: out-of-line definition of 'mergeFormatOnWordOrSelection' does not match any declaration in 'MainWindow'". I've added the function to mainwindow.h and added every single header there is to add, just in case I'd miss one of those. Still, that is the error I get.

void MainWindow::mergeFormatOnWordOrSelection(const QTextCharFormat &format)
{
    QTextCursor cursor = ui->textEdit->textCursor();
    if (!cursor.hasSelection())
        cursor.select(QTextCursor::WordUnderCursor);
    cursor.mergeCharFormat(format);
    ui->textEdit->mergeCurrentCharFormat(format);
}

Edit: fixed it by adding "#include <QTextCharFormat>" at the top of my include list instead of the bottom, weird error though.

Edit2:

#include <QMainWindow>
#include <QFile>
#include <QTextCharFormat>
#include <QFileDialog>
#include <QTextStream>
#include <QMessageBox>
#include <QTabWidget>
#include <QTextCursor>

#include <QAction>
#include <QApplication>
#include <QClipboard>
#include <QColorDialog>
#include <QComboBox>
#include <QFontComboBox>
#include <QFile>
#include <QFileDialog>
#include <QFileInfo>
#include <QFontDatabase>
#include <QMenu>
#include <QMenuBar>
#include <QTextCodec>
#include <QTextEdit>
#include <QStatusBar>
#include <QToolBar>
#include <QTextCursor>
#include <QTextDocumentWriter>
#include <QTextList>
#include <QtDebug>
#include <QCloseEvent>
#include <QMessageBox>
#include <QMimeData>

I added all of these headers to both mainwindow.cpp and mainwindow.h and it solved it. I know it isn't a good fix but right now I just want to get the project done.

Gojir4

@legitnameyo Can we see the declaration in the header ?

legitnameyo

The main issue with

void TextEdit::mergeFormatOnWordOrSelection(const QTextCharFormat &format)
{
   QTextCursor cursor = textEdit->textCursor();
   if (!cursor.hasSelection())
       cursor.select(QTextCursor::WordUnderCursor);
   cursor.mergeCharFormat(format);
   textEdit->mergeCurrentCharFormat(format);
}

is that it makes the whole previous word bold as well... is there a way to just make the letters written whilst the "bold" option is activated bold? instead of the previous word bold as well?

Gojir4

@legitnameyo That's because of cursor.select(QTextCursor::WordUnderCursor);

You can do something like :

void TextEdit::mergeFormatOnWordOrSelection(const QTextCharFormat &format)
{
   QTextCursor cursor = textEdit->textCursor();
   if (!cursor.hasSelection())
       cursor.movePosition(QTextCursor::PreviousCharacter, QTextCursor::KeepAnchor);
   cursor.mergeCharFormat(format);
   textEdit->mergeCurrentCharFormat(format);
}

legitnameyo

Using this code is an improvement but still affects the letter behind the cursor

void MainWindow::mergeFormatOnWordOrSelection(const QTextCharFormat &format)
{
   QTextCursor cursor = ui->textEdit->textCursor();
   if (!cursor.hasSelection())
       cursor.movePosition(QTextCursor::PreviousCharacter, QTextCursor::KeepAnchor);
   cursor.mergeCharFormat(format);
   ui->textEdit->mergeCurrentCharFormat(format);
}

So close, but not what I was looking for... :)

Gojir4

@legitnameyo
And with QTextCursor::NextCharacter instead of QTextCursor::PreviousCharacter

Gojir4

@legitnameyo You can find all the possibilities in the documentation http://doc.qt.io/qt-5/qtextcursor.html#MoveOperation-enum