[Solved] Code editor using QML

  • Hi !

    I'm currently trying to integrate a code editor within QML. Using Qt 5.1 and the TextArea I achieved some of my goals. Syntax highlighting works well, code completion should work but I saw no example of that.

    My next objective is to draw line numbers at the left of the TextArea. I have managed to draw static numbers of course, but how can I know how far the user has scrolled the TextArea, so that I can update the line numbers ?

    My plan B was to use QWidgets (QPlainTextEdit, etc.) to do this and insert it into QML. Sadly this seems to be impossible since QtQuick 2.

    So I'm a bit stuck here. I would prefer not do the whole interface in QWidgets since it is supposed to be drawn over an OpenGL scene.

  • TextArea has a contentY property you can use to find the offset of the TextArea contentItem. You could create a stand alone Text item and simply bind its y-property to the contentY of the TextArea.

  • I cannot find any property named contentY, there is a contentItem property but its y property does not change when I scroll down.

    onContentItemChanged is also never called when scrolling down.

    Could you give me some basic example on how to make an item "follow" the TextArea's scroll value ?

  • Here is a nice attempt. Biggest issue is to get a reliable row height to match the TextArea. To get it proper I think you might have to use the C++ QQuickTextDocument API. Of course with rich text and variable sized fonts, it is going to be a bit difficutlt to match them up.
    Item {
    anchors.fill: parent
    Rectangle {
    id: lineColumn
    property int rowHeight: textarea.font.pixelSize + 3
    color: "#f2f2f2"
    width: 50
    height: parent.height
    Rectangle {
    height: parent.height
    anchors.right: parent.right
    width: 1
    color: "#ddd"
    Column {
    y: -textarea.flickableItem.contentY + 4
    width: parent.width
    Repeater {
    model: Math.max(textarea.lineCount + 2, (lineColumn.height/lineColumn.rowHeight) )
    delegate: Text {
    id: text
    color: "#666"
    font: textarea.font
    width: lineColumn.width
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    height: lineColumn.rowHeight
    renderType: Text.NativeRendering
    text: index
    TextArea {
    id: textarea
    anchors.left: lineColumn.right
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    wrapMode: TextEdit.NoWrap
    frameVisible: false

  • Works great, many thanks!

  • This is interesting, can you share how you did the code completion and syntax highlighting and maybe any automatic line indents as you would expect to have in a code editor?

  • Sorry for the late reply.

    Actually I gave up with my idea of using QML for this project because I could not get all the features I wanted without re-coding the whole QML item from scratch. (As far as I know, you cannot "enhance" a built-in QML item)

    I managed to get syntax highlighting working by using a QSyntaxHighlighter on a QTextDocument that you can get from the QML item, if I remember correctly. (I don't have the sources of this old project anymore)

    As for the indentation problem, I posted in this forum but never got any answer so I suppose it is not possible: http://qt-project.org/forums/viewthread/29623/

  • Thanks. That's all very interesting, appreciate the info.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.