51 lines
3.6 KiB
Plaintext
51 lines
3.6 KiB
Plaintext
caption: edit-text
|
|
created: 20131024141900000
|
|
modified: 20211104200554064
|
|
tags: Widgets
|
|
title: EditTextWidget
|
|
type: text/vnd.tiddlywiki
|
|
|
|
! Introduction
|
|
|
|
The edit text widget provides a user interface in the browser for editing text tiddler fields. The editing element is dynamically bound to the underlying tiddler value: changes to the tiddler are instantly reflected, and any edits are instantly propagated.
|
|
|
|
By default, applying the EditTextWidget to the `text` field of a tiddler will generates an HTML `<textarea>` element, i.e. a multi-line editor. Applying the EditTextWidget to any other field generates an HTML `<input type="text">` element, a single-line editor. This behaviour can be overridden with the `tag` and `type` attributes.
|
|
|
|
! Content and Attributes
|
|
|
|
The content of the `<$edit-text>` widget is ignored.
|
|
|
|
|!Attribute |!Description |
|
|
|tiddler |The tiddler to edit (defaults to the [[current tiddler|Current Tiddler]]) |
|
|
|field |The field to edit (defaults to `text`). Takes precedence over the `index` attribute |
|
|
|index |The index to edit |
|
|
|default |The default text to be provided when the target tiddler doesn't exist |
|
|
|class |A CSS class to be assigned to the generated HTML editing element |
|
|
|placeholder |Placeholder text to be displayed when the edit field is empty |
|
|
|focusPopup |Title of a state tiddler for a popup that is displayed when the editing element has focus |
|
|
|focus |Set to "yes" or "true" to automatically focus the editor after creation |
|
|
|tabindex |Sets the `tabindex` attribute of the input or textarea to the given value |
|
|
|autocomplete |<<.from-version 5.1.23>> An optional string to provide a hint to the browser how to handle autocomplete for this input |
|
|
|tag |Overrides the generated HTML editing element tag. For a multi-line editor use `tag=textarea`. For a single-line editor use `tag=input` |
|
|
|type |Overrides the generated HTML editing element `type` attribute |
|
|
|size |The size of the input field (in characters). This exact result depends on browser and font. Use the `class` attribute to style width for precise control |
|
|
|autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (defaults to "yes") |
|
|
|minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%" |
|
|
|rows|Sets the rows attribute of a generated textarea |
|
|
|cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus |
|
|
|inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea.<br><<.from-version "5.2.1">> The variable `actionValue` is available to the `inputActions` and contains the value of the input field. |
|
|
|refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes |
|
|
|disabled|<<.from-version "5.1.23">> Optional, disables the text input if set to "yes". Defaults to "no"|
|
|
|fileDrop|<<.from-version "5.2.0">> Optional. When set to "yes" allows dropping or pasting images into the editor to import them. Defaults to "no"|
|
|
|
|
|
|
! Example
|
|
|
|
If you wanted to change the field //myconfig// of the tiddler //AppSettings//, you could use an EditTextWidget to edit the field, and then show the result anywhere else by using `{{AppSettings!!myconfig}}`. Note that this will create tiddler AppSettings if it doesn't already exist.
|
|
|
|
<$macrocall $name=".example" n="1"
|
|
eg="""<$edit-text tiddler="AppSettings" field="myconfig"/><p/>
|
|
Value of ''myconfig'' : {{AppSettings!!myconfig}}
|
|
"""/>
|
|
|