QML Rich text editor

Question

Is it possible to create simple rich text editor only using QML components?

I'm trying now to do that with TextArea but it looks it have no ability to work with formatted text. Sure, I can do something like this:

ToolButton {
 text: "Bold"
 onClicked: {
     var start = textArea.selectionStart;
     var end = textArea.selectionEnd;
     var text = textArea.getText(start,end);
     text = "<strong>" + text + "</strong>";
     textArea.remove(start,end);
     textArea.insert(start,text);
 }
} 

But I still cannot detect text formatting under cursor.

I'll be glad if anybody can share some code snippet or something.

Any advice will be appreciated.

Answer 1

Oк, аfter searching all the Internet :) I've get to conclusion that it is impossible for now to do a rich editor with only QML. It can be easy done with C++ and there is nice example in $QTDIR/Src/qtquickcontrols/examples/quick/controls/texteditor/

Answer 2

What you are looking for is the TextEdit component :

http://qt-project.org/doc/qt-5/qml-qtquick-textedit.html

Using it, it should not be hard to implement a Rich Text Editor only with QML

QtQuick TextEdit and by extension QtQuick.Controls TextArea in Qt 5.2 or higher expose the 'textDocument' property which is a QQuickTextDocument pointer, which in its turn can be casted to a QTextDocument (yes, the same as in QWidgets) and it can be used C++-side to get information from the TextEdit such as cursor position and current block format...

Yet for simple EDITING (no information retrieved), pure JS in QML-side could be sufficient (just modify the text property to insert HTML tags using e.g. RegExp...).