How to have a rounded background in qml TextEdit

isudfv

I'm trying to have a rounded background in qml TextEdit. To something like this:

I tried this:

TextEdit{
    id: text
    textFormat: TextEdit.RichText
    text: "<span style=\"color:blue;font-weight:bold;background-color:grey;border-radius:20px\">blue</span>"
}

but the border-radius attibute doesn't work. What should I do?

sierdzio

The easiest way will be to add a Rectangle element:

Rectangle {
  radius: 20
  width: 100
  height: 40

  TextEdit {
    id: text
    text: "blue"
    color: "#0000ff"
  }
}

isudfv

@sierdzio sorry I can't use this method because I'm dealing with a "highlighting" problem. Like this:
the highlighted content is selected by user. and there're a lot of different color schemes for words to be hovered, selected, deleted and so on.

sierdzio

@isudfv Ah I see. Then you should do this with QTextDocument. It does support full formatting, pictures, selection etc. while maintaining very good performance.

isudfv

@sierdzioThe QQuickTextDocument class provides access to the QTextDocument of QQuickTextEdit. If I understand it correctly, TextEdit in qml is implemented with QTextDocument?

also I found this in Qt forum, so the border attibute in style is supported in qml rich text right? But I can't work it out