43 lines
2.3 KiB
Plaintext
43 lines
2.3 KiB
Plaintext
caption: edit-text
|
|
created: 20131024141900000
|
|
modified: 20141025085449609
|
|
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 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 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. Use `textarea` for a multi-line editor |
|
|
|type |Overrides the generated HTML editing element `type` attribute |
|
|
|size |The size of the input field (in characters) |
|
|
|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 "%" |
|
|
|
|
! 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|TemplateTiddlers]] 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"/>
|
|
```
|