[tw5] Adding tool bar to an edit field

Google Group (Read Only)
#1

Is there a way to call the edit tool bar and apply it to a form created using the EditTextWidget?

Merv

#2

There is no such possibility at the moment, if your forms are in view mode. … Could you be more specific, how your forms look like?

-m

#3

I call the edit-text macro using the following code:

<$set name="tiddler" value={{$:/state/edit/hold!!hold}}>

<$edit-text tiddler=<<tiddler>> class="full-width"/>

</$set>

<style>
.full-width {width: 100%;}
</style>

Which allows me to edit the content of the indicated field. I hope this answers your question.

Merv

#4

I have hacked together the following in one of my wikis. I just wanted the toolbar hotkey functionality, so I included the style/class tagging to make the actual toolbar invisible. If you want to keep it visible, don’t use the and you can also remove the outer

. It seems the <$edit> here might be replaced by your setup.

<style>
.my-editor .tc-text-editor-toolbar-item-wrapper {
display:none;
}
</style>

<div class="my-editor"><$edit tiddler="Nicer Editor - Target" field="text" class="tc-edit-texteditor tc-edit-texteditor-body" placeholder={{$:/language/EditTemplate/Body/Placeholder}} tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}} cancelPopups="yes"><$set name="targetTiddler" value=<<currentTiddler>> ><$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"><$reveal type="nomatch" state=<<config-visibility-title>> text="hide" class="tc-text-editor-toolbar-item-wrapper"><$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode="inline"/></$reveal></$list></$set></$edit></div>

I’m not totally sure each option is required, though the <$set> for targetTiddler appears to ensure the toolbar adopts properties of the tiddler where this editor appears. This is important for me (perhaps less so for you) since I do a lot of work with type = text/x-markdown and the toolbar/hotkeys are different with this type than for default tiddlytext.

I have not used this extensively yet, so buyer beware!

#5

I appreciate the effort here. This solution is complicated, so I will need to sort through it and try to figure out how it fits into my use-case. Thank you.

Merv

#6

Here’s a simpler way to do what suggest @jason :

<div class="custom-editor">
{{YourTiddler||$:/core/ui/EditTemplate/body}}
</div>

<style>
.custom-editor :is(.tc-editor-toolbar,.tc-tiddler-preview-preview){display:none}
.custom-editor .tc-edit-texteditor.tc-edit-texteditor-body{width:100%}
</style>

However with this technique you can only edit the text field of a tiddler, not the other fields (or at least if there is a way to change the field I’m not aware of it)

1 Like
#7

Here’s what I came up with. I did not see the second solution until later, so I used the first. I inserted the following code into a template:

<$edit-text tiddler=<> field=“text” class=“tc-edit-texteditor tc-edit-texteditor-body” placeholder={{$:/language/EditTemplate/Body/Placeholder}} tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}} cancelPopups=“yes”><$set name=“targetTiddler” value=<> ><$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"><$reveal type=“nomatch” state=<> text=“hide” class=“tc-text-editor-toolbar-item-wrapper”><$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode=“inline”/></$reveal></$list></$set></$edit>

In a second tiddler, or third, or whatever tiddler decide needs to apply this function, I calle the template as follows:

<$set name=“tiddler” value={{Name of tiddler to be referenced}}>

{{||Name of Template}}

I plug the title of the tiddler that I wish to edit into the field transcribed in the $set function above. A point of interest, this could be used to apply the tool bar to fields other than ‘text’ by modifying the ‘field’ attribute of the edit-text function contained in the first tiddler mentioned above: ‘<$edit-text tiddler=<> field=“text”’

This solution is working for me right now; although I’m sure that it can be improved upon. Thank you for the help.

Merv

2 Likes