A view that can display and edit long-form text.
A text editor view allows you to display and edit multiline, scrollable
text in your app's user interface. By default, the text editor view styles
the text using characteristics inherited from the environment, like
``View/font(_:)``, ``View/foregroundColor(_:)``, and
``View/multilineTextAlignment(_:)``. The text editor view supports
attributed text formatting when initialized with
``init(text:selection:)-(Binding<AttributedString>,_)``.
You create a text editor by adding a `TextEditor` instance to the
body of your view, and initialize it by passing in a
``Binding`` to a string variable in your app:
struct TextEditingView: View {
@State private var fullText: String = "This is some editable text..."
var body: some View {
TextEditor(text: $fullText)
}
}
To style the text, use the standard view modifiers to configure a system
font, set a custom font, or change the color of the view's text.
In this example, the view renders the editor's text in gray with a
custom font:
struct TextEditingView: View {
@State private var fullText: String = "This is some editable text..."
var body: some View {
TextEditor(text: $fullText)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 13))
}
}
If you want to change the spacing or font scaling aspects of the text, you
can use modifiers like ``View/lineLimit(_:)``,
``View/lineSpacing(_:)``, and ``View/minimumScaleFactor(_:)`` to configure
how the view displays text depending on the space constraints. For example,
here the ``View/lineSpacing(_:)`` modifier sets the spacing between lines
to 5 points:
struct TextEditingView: View {
@State private var fullText: String = "This is some editable text..."
var body: some View {
TextEditor(text: $fullText)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 13))
.lineSpacing(5)
}
}
### Text formatting
When initialized with ``init(text:selection:)-(Binding<AttributedString>,_)``,
`TextEditor` supports editing and formatting styled text.
By default, `TextEditor` shows system text formatting controls in the
context menu and in the keyboard toolbar on iOS.
Use ``View/textInputFormattingControlVisibility(_:for:)`` to configure
visibility of system text formatting controls.
For more information on formatting attributed text with `TextEditor`, see
``init(text:selection:)-(Binding<AttributedString>,_)``.
Creates a styled text editor.
Use a ``TextEditor`` instance to create a view in which users can enter
and edit long-form styled text.
In this example the text editor is setup to edit styled text:
struct StyledTextEditingView: View {
@State private var text =
AttributedString("This is some editable text...")
var body: some View {
TextEditor(text: $text)
}
}
### Format text by combining attributes and view modifiers
If the AttributedString does not have a font and/or foreground color
specified for a given range of text, the rich text editor will use the
font and/or foreground color inherited from the environment for that
range of text, just like ``Text/init(_:)-(AttributedString)``. To
control what formatting options are available in the editor, use the
``AttributedTextFormattingDefinition`` protocol.
- Note: Other than ``Text``, this editor does not automatically
translate UIKit or AppKit formatting attributes into SwiftUI attributes.
For importing RTF documents, which encode formatting using UIKit and
AppKit attributes, use ``AttributedTextFormatting/Transferable``
to obtain an attributed string compatible with this editor.
### Build custom controls using the selection binding
Use ``AttributedTextSelection`` for implementing custom controls, e.g.
for applying formatting such as boldness:
struct StyledTextEditingView: View {
@State private var text: AttributedString = ""
@State private var selection = AttributedTextSelection()
@Environment(\.fontResolutionContext) private var fontResolutionContext
var body: some View {
TextEditor(text: $text, selection: $selection)
.toolbar {
// A toggle controlling whether the current selection in the
// editor has bold font.
Toggle(
"Toggle Boldness",
systemImage: "bold",
isOn: Binding(get: {
// Get the font for the current selection.
let font = selection.typingAttributes(in: text).font
// Resolve the font in the current environment.
let resolved = (font ?? .default).resolve(in: fontResolutionContext)
// Return whether the resolved font is bold.
return resolved.isBold
}, set: { isBold in
// Update each run in the current selection, including
// the typing attributes, to reflect the new `isBold`
// value.
text.transformAttributes(in: &selection) {
// Override the boldness of the font. If no font is
// present, use `Font.default` for the effective
// environment font as the basis.
$0.font = ($0.font ?? .default).bold(isBold)
}
})
)
}
}
}
- Note: When binding the `selection`, always make sure it is updated
after you mutate the `text`. Otherwise, the editor resets the selection
to the end of the `text`. For more details, see
``AttributedTextSelection/indices(in:)``.
- Parameter text: A ``Binding`` to the variable containing the
styled text to edit.
- Parameter selection: An optional ``Binding`` to the variable
containing the selection.
- SeeAlso: ``AttributedTextSelection``,
``View/attributedTextFormattingDefinition(_:)-uc57``,
``AttributedTextFormattingDefinition``,
``AttributedTextValueConstraint``, ``AttributedTextFormatting``
Creates a plain text editor that captures the current selection.
Use this initializer to create a view in which users can enter
and edit long-form text and access the current selection.
In this example, the text editor renders gray text using the 13
point Helvetica Neue font with 5 points of spacing between each line:
struct TextEditingView: View {
@State private var fullText: String = "This is some editable text..."
@State var selection: TextSelection? = nil
var body: some View {
TextEditor(text: $fullText, selection: $selection)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 13))
.lineSpacing(5)
}
}
- Parameters:
- text: A ``Binding`` to the variable containing the text to edit.
- selection: A ``Binding`` to the variable containing the selection.
Creates a plain text editor.
Use a ``TextEditor`` instance to create a view in which users can enter
and edit long-form text.
In this example, the text editor renders gray text using the 13
point Helvetica Neue font with 5 points of spacing between each line:
struct TextEditingView: View {
@State private var fullText: String = "This is some editable text..."
var body: some View {
TextEditor(text: $fullText)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 13))
.lineSpacing(5)
}
}
You can define the styling for the text within the view, including the
text color, font, and line spacing. You define these styles by applying
standard view modifiers to the view.
The default text editor doesn't support rich text, such as styling of
individual elements within the editor's view. The styles you set apply
globally to all text in the view.
- Parameter text: A ``Binding`` to the variable containing the
text to edit.
Skipped declarations
1 declarations were excluded from these bindings. Each reason comes from the generator or the iOS SDK compiler.
TextEditor.body
This protocol needs associated types that cannot yet cross the bridge.
