组件/表单组件引入于 1.3.0

ETextEditor 富文本编辑

import EUI 1.0

示例与代码

富文本与格式工具

QML 代码QML

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 编辑器</h3><p>选择文字并设置<b>格式</b>。</p>") }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

只读内容

QML 代码QML

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 编辑器</h3><p>选择文字并设置<b>格式</b>。</p>") }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

隐藏工具栏

QML 代码QML

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 编辑器</h3><p>选择文字并设置<b>格式</b>。</p>") }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

选中文本格式

QML 代码QML

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 编辑器</h3><p>选择文字并设置<b>格式</b>。</p>") Component.onCompleted: { editor.select(0, 3) applyFormat("color", "#409eff") } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

占位与粘贴

QML 代码QML

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) }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

showToolbarbool

显示富文本格式工具栏。

默认值true

textalias

编辑器的 Qt RichText HTML 内容。

默认值editor.text

placeholderTextstring

空值时显示的占位文字。

默认值""

readOnlyalias

保持内容可见并禁止用户修改。

默认值editor.readOnly

editoralias只读

底层 TextEdit 实例。

默认值editor

canRedobool只读

是否有可以重做的编辑操作。

默认值editor.canRedo

canUndobool只读

是否有可以撤销的编辑操作。

默认值editor.canUndo

plainTextstring只读

富文本内容对应的纯文本。

默认值editor.getText(0, editor.length)

currentFormatvar只读

光标当前位置的字符格式与段落对齐信息。

默认值

展开默认值

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

信号

签名作用

formatApplied(string operation)

应用文字格式后触发，operation 为执行的格式操作。

方法

签名作用

redo()

重做已撤销的文字编辑。

undo()

撤销上一次文字编辑。

applyFormat(operation, value)

对选中文字应用 operation 指定的格式，value 为格式值；返回是否成功。