Qt Quick Controls - Text Editor

/**************************************************************************** ** ** Copyright (C) 2017 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:BSD$ ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see https://www.qt.io/terms-conditions. For further ** information use the contact form at https://www.qt.io/contact-us. ** ** BSD License Usage ** Alternatively, you may use this file under the terms of the BSD license ** as follows: ** ** "Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions are ** met: ** * Redistributions of source code must retain the above copyright ** notice, this list of conditions and the following disclaimer. ** * Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in ** the documentation and/or other materials provided with the ** distribution. ** * Neither the name of The Qt Company Ltd nor the names of its ** contributors may be used to endorse or promote products derived ** from this software without specific prior written permission. ** ** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." ** ** $QT_END_LICENSE$ ** ****************************************************************************/
import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQuick.Controls.Material 2.12 import QtQuick.Layouts 1.12 import QtQuick.Window 2.0 import io.qt.examples.texteditor 1.0 // TODO: // - make designer-friendly 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" // icon-ok 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" // icon-ellipsis-vert 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 // textColor: TODO 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 // Different styles have different padding and background // decorations, but since this editor is almost taking up the // entire window, we don't need them. 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" // icon-bold font.family: "fontello" // Don't want to close the virtual keyboard when this is clicked. focusPolicy: Qt.NoFocus checkable: true checked: document.bold onClicked: document.bold = !document.bold } ToolButton { id: italicButton text: "\uE801" // icon-italic font.family: "fontello" focusPolicy: Qt.NoFocus checkable: true checked: document.italic onClicked: document.italic = !document.italic } ToolButton { id: underlineButton text: "\uF0CD" // icon-underline font.family: "fontello" focusPolicy: Qt.NoFocus checkable: true checked: document.underline onClicked: document.underline = !document.underline } ToolSeparator {} ToolButton { id: alignLeftButton text: "\uE803" // icon-align-left font.family: "fontello" focusPolicy: Qt.NoFocus checkable: true checked: document.alignment == Qt.AlignLeft onClicked: document.alignment = Qt.AlignLeft } ToolButton { id: alignCenterButton text: "\uE804" // icon-align-center font.family: "fontello" focusPolicy: Qt.NoFocus checkable: true checked: document.alignment == Qt.AlignHCenter onClicked: document.alignment = Qt.AlignHCenter } ToolButton { id: alignRightButton text: "\uE805" // icon-align-right font.family: "fontello" focusPolicy: Qt.NoFocus checkable: true checked: document.alignment == Qt.AlignRight onClicked: document.alignment = Qt.AlignRight } ToolButton { id: alignJustifyButton text: "\uE806" // icon-align-justify 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" // icon-pencil width: 48 height: width // Don't want to use anchors for the y position, because it will anchor // to the footer, leaving a large vertical gap. y: parent.height - height - 12 anchors.right: parent.right anchors.margins: 12 visible: textArea.readOnly highlighted: true onClicked: { textArea.readOnly = false // Force focus on the text area so the cursor and footer show up. 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") } } }