mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-01 05:49:55 +00:00
40 lines
2.0 KiB
Plaintext
40 lines
2.0 KiB
Plaintext
title: EditTextWidget
|
|
created: 201310241419
|
|
modified: 201407250837
|
|
tags: Widgets
|
|
caption: edit-text
|
|
|
|
! 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 propogated.
|
|
|
|
By default, the edit text widget generates a `<textarea>` as the HTML editing element when the `text` field is edited, and a `<input type="text">` element otherwise. 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 [[WidgetVariable: currentTiddler]]) |
|
|
|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 |
|
|
|tag |Overrides the generated HTML editing element tag |
|
|
|size |The size of the input field (in characters) |
|
|
|type |Overrides the generated HTML editing element `type` attribute |
|
|
|
|
! Notes
|
|
|
|
One trap to be aware of is that the edit text widget cannot be used to edit a field of the tiddler that contains it. Each keypress results in the tiddler being re-rendered, which loses the cursor position within the text field.
|
|
|
|
Instead, place the edit text widget in a [[template|TiddlerTemplates]] that references the tiddler you want to modify.
|
|
|
|
For example, if you wanted to edit the value of the "myconfig" field of the tiddler "AppSettings", you might do so by creating a separate tiddler "ChangeAppSettings" that contains the following:
|
|
|
|
```
|
|
<$edit-text tiddler="AppSettings" field="myconfig"/>
|
|
```
|