1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-26 18:10:27 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid

40 lines
2.0 KiB
Plaintext
Raw Normal View History

title: EditTextWidget
created: 201310241419
2014-07-25 12:09:30 +00:00
modified: 201407250837
2014-09-10 23:06:19 +00:00
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 |
2014-10-10 20:06:48 +00:00
|tiddler |The tiddler to edit (defaults to the 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 |
2014-07-25 12:09:30 +00:00
! 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.
2014-10-10 20:06:48 +00:00
Instead, place the edit text widget in a [[template|TemplateTiddlers]] that references the tiddler you want to modify.
2014-07-25 12:09:30 +00:00
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"/>
```