Components/Form componentsIntroduced in 1.3.0

ETextEditor Text editor

import EUI 1.0

Examples

Rich text and formatting

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETextEditor { height: 260 width: Math.min(650, parent.width) text: qsTr("<h3>EUI editor</h3><p>Select text and apply <b>formatting</b>.</p>") }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Read-only content

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETextEditor { height: 260 readOnly: true width: Math.min(650, parent.width) text: qsTr("<h3>EUI editor</h3><p>Select text and apply <b>formatting</b>.</p>") }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Hidden toolbar

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETextEditor { height: 260 showToolbar: false width: Math.min(650, parent.width) text: qsTr("<h3>EUI editor</h3><p>Select text and apply <b>formatting</b>.</p>") }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Selected text format

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETextEditor { height: 260 width: Math.min(650, parent.width) text: qsTr("<h3>EUI editor</h3><p>Select text and apply <b>formatting</b>.</p>") Component.onCompleted: { editor.select(0, 3) applyFormat("color", "#409eff") } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Placeholder and paste

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETextEditor { text: "" height: 260 placeholderText: "Start writing…" width: Math.min(650, parent.width) }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

showToolbarbool

Show the rich text formatting toolbar.

Defaulttrue

textalias

Qt RichText HTML content of the editor.

Defaulteditor.text

placeholderTextstring

Placeholder shown when the value is empty.

Default""

readOnlyalias

Keep content visible and prevent edits.

Defaulteditor.readOnly

editoraliasRead only

Underlying TextEdit instance.

Defaulteditor

canRedoboolRead only

Whether an edit can be redone.

Defaulteditor.canRedo

canUndoboolRead only

Whether an edit can be undone.

Defaulteditor.canUndo

plainTextstringRead only

Plain text representation of the rich content.

Defaulteditor.getText(0, editor.length)

currentFormatvarRead only

Character formatting and paragraph alignment at the cursor.

Default

Show default value

{ const position = editor.cursorPosition const revision = state.revision return document.formatAt(position) }

Signals

SignaturePurpose

formatApplied(string operation)

Emitted after applying text formatting; operation identifies the formatting action.

Methods

SignaturePurpose

redo()

Redo an undone text edit.

undo()

Undo the last text edit.

applyFormat(operation, value)

Apply formatting operation with value to the selected text; return whether it succeeds.