mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-16 06:44:50 +00:00
2271f6885a
* Initial commit
* WIP
* Align implementation with @yaisog's suggestion
See https://github.com/Jermolene/TiddlyWiki5/pull/7222#issuecomment-1410194593
* Commit missing from 3262b8d77d
Thanks @pmario
* Fix version number
Thanks @yaisog
* Add two examples for text selection (#7286)
---------
Co-authored-by: yaisog <m@rcuswinter.de>
69 lines
4.9 KiB
Plaintext
69 lines
4.9 KiB
Plaintext
caption: edit-text
|
|
created: 20131024141900000
|
|
modified: 20230122210049893
|
|
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 |
|
|
|focusSelectFromStart |<<.from-version 5.2.6>> If the `focus` attribute is enabled, determines the position of the start of the selection: `0` (default) places the start of the selection at the beginning of the text, `1` places the start of the selection after the first character, etc. |
|
|
|focusSelectFromEnd |<<.from-version 5.2.6>> If the `focus` attribute is enabled, determines the position of the end of the selection: `0` (default) places the end of the selection at the end of the text, `1` places the start of the selection before the final character, etc. |
|
|
|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"|
|
|
|
|
! Examples
|
|
|
|
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}}
|
|
"""/>
|
|
|
|
!! Text Selection
|
|
|
|
If the edit field already contains text or a default value is provided, you can use the `focusSelectFromStart` and `focusSelectFromEnd` attributes to only select part of the text when using `focus="yes"`.
|
|
|
|
Partial selection when editing this tiddler's //caption// field:
|
|
|
|
<$macrocall $name=".example" n="2"
|
|
eg="""<$edit-text tiddler=<<currentTiddler>> field="caption" focus="yes" focusSelectFromStart="5" />
|
|
"""/>
|
|
|
|
!!! {{!!heading}}
|
|
|
|
Provide a dated heading for this example where only the placeholder (but not the date) is selected for easier text input:
|
|
|
|
<$macrocall $name=".example" n="3"
|
|
eg="""<$edit-text tiddler=<<currentTiddler>> field="heading" size="25" focus="yes" focusSelectFromEnd="13" default={{{ [[Heading Text (]] [<now YYYY-0MM-0DD>] [[)]] +[join[]] }}} />
|
|
"""/>
|