texteditor.qml Example File
texteditor/qml/+touch/texteditor.qml
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.3
import QtQuick.Window 2.0
import io.qt.examples.texteditor 1.0
ApplicationWindow {
id: window
visible: true
title: document.fileName + " - Text Editor Example"
header: ToolBar {
leftPadding: 5
RowLayout {
anchors.fill: parent
spacing: 0
ToolButton {
id: doneEditingButton
font.family: "fontello"
text: "\uE80A"
opacity: !textArea.readOnly ? 1 : 0
onClicked: textArea.readOnly = true
Material.foreground: Material.accent
}
Label {
text: qsTr("Text Editor Example")
font.bold: true
font.pixelSize: 20
elide: Label.ElideRight
Layout.fillWidth: true
}
ToolButton {
font.family: "fontello"
text: "\uF142"
onClicked: menu.open()
Menu {
id: menu
MenuItem {
text: qsTr("About")
onTriggered: aboutDialog.open()
}
}
}
}
}
DocumentHandler {
id: document
document: textArea.textDocument
cursorPosition: textArea.cursorPosition
selectionStart: textArea.selectionStart
selectionEnd: textArea.selectionEnd
Component.onCompleted: document.load("qrc:/texteditor.html")
onLoaded: {
textArea.text = text
}
onError: {
errorDialog.text = message
errorDialog.visible = true
}
}
Flickable {
id: flickable
flickableDirection: Flickable.VerticalFlick
anchors.fill: parent
TextArea.flickable: TextArea {
id: textArea
textFormat: Qt.RichText
wrapMode: TextArea.Wrap
readOnly: true
persistentSelection: true
leftPadding: 6
rightPadding: 6
topPadding: 0
bottomPadding: 0
background: null
onLinkActivated: Qt.openUrlExternally(link)
}
ScrollBar.vertical: ScrollBar {}
}
footer: ToolBar {
visible: !textArea.readOnly && textArea.activeFocus
Material.primary: "#E0E0E0"
Material.elevation: 0
Flickable {
anchors.fill: parent
contentWidth: toolRow.implicitWidth
flickableDirection: Qt.Horizontal
boundsBehavior: Flickable.StopAtBounds
Row {
id: toolRow
ToolButton {
id: boldButton
text: "\uE800"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.bold
onClicked: document.bold = !document.bold
}
ToolButton {
id: italicButton
text: "\uE801"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.italic
onClicked: document.italic = !document.italic
}
ToolButton {
id: underlineButton
text: "\uF0CD"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.underline
onClicked: document.underline = !document.underline
}
ToolSeparator {}
ToolButton {
id: alignLeftButton
text: "\uE803"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.alignment == Qt.AlignLeft
onClicked: document.alignment = Qt.AlignLeft
}
ToolButton {
id: alignCenterButton
text: "\uE804"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.alignment == Qt.AlignHCenter
onClicked: document.alignment = Qt.AlignHCenter
}
ToolButton {
id: alignRightButton
text: "\uE805"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.alignment == Qt.AlignRight
onClicked: document.alignment = Qt.AlignRight
}
ToolButton {
id: alignJustifyButton
text: "\uE806"
font.family: "fontello"
focusPolicy: Qt.NoFocus
checkable: true
checked: document.alignment == Qt.AlignJustify
onClicked: document.alignment = Qt.AlignJustify
}
}
}
}
RoundButton {
id: editButton
font.family: "fontello"
text: "\uE809"
width: 48
height: width
y: parent.height - height - 12
anchors.right: parent.right
anchors.margins: 12
visible: textArea.readOnly
highlighted: true
onClicked: {
textArea.readOnly = false
textArea.forceActiveFocus()
}
}
Dialog {
id: aboutDialog
standardButtons: Dialog.Ok
modal: true
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
contentItem: Label {
text: qsTr("Qt Quick Controls 2 - Text Editor Example")
}
}
}