So far there are several answers on the desirability question. But no answers on the how-to question. I am tinkering with $:/core/ui/EditTemplate/body/editor, rearranging things, but to no avail.
Been using wikis since 2006. I still cannot stand wikitext/markup of any kind, or any markup of any kind. If I have a button, I will go to it every time.
All part and parcel of my cognitive challenges.
Keyboard shortcuts are also a challenge. Hard to learn, hard to remember, and the choices often don’t make sense to me.
Buttons, although usually easier, are often tough to if the choice of image is hard for me to process.
So yeah, I’m quite envious of folk who do just great with all those things.
A quick and dirty way is to cut all the contents between <$edit>… and </$edit> and put them between <div>...</div> tags after the last </$edit>. The tool buttons will be really small, which means the CSS needs to be hunted down and killed adjusted.
1 Like
It’s $:/core/ui/EditTemplate/body you need to tinker with
I think, it would be worth a request to make these elements more flexible by default. … IMO if it would be tagged, you only would need to move the tab below the body area …
I think it would be worth a “feature request” at Github with a link to your post here. … There is an upcoming change in the way Edit- and Viewtemplates are created. … So it may be possible to get this feature in 1 go … may be 
I think that the following @saqimtiaz’s experiment is more interesting, there are some editors with this behaviour.
Is there a trick to that? I saw no floating editor in that link.
Edit: oh I see, the toolbar appears when selecting text. But I cheat and use wrap buttons to stamp pre-set custom text into tiddlers without having to select from a dropdown. So I need something where the buttons are visible at all times.
If you put the contents outside of the <$edit> tags, then the buttons can’t be used to edit the text area.
I have a github account but I would have to take a course just to learn how to use it. What little I learned years ago has been forgotten. I find the ui of Github very unintuitive.
1 Like
You’re so picky – you want the buttons to work!
Try this. Start with a fresh $:/core/ui/EditTemplate/body/editor. Just above the first <$set> paste
<div class="bottom" style="position: absolute; height: 4em; border: none; bottom: 0; right: 0; left: 0; " >
and then insert a </div> just below the matching </$set> .
Then put this at the very bottom of tiddler:
<div style="height: 3em;" > </div>
This actually works pretty well until you hit “preview”. Oh well, one evil at a time.
Thanks Mark, fascinating. I tried putting a
before the toolbar, but then it moved down and covered the type and field sections.
Sorry I took so long to answer. I was marveling at the Trump impression by the new SNL cast member. Wow.
My reply may have changed while you were away. There’s instructions for inserting a set of div’s to leave space for the fields.
Here’s a screenshot:
David,
The floating editor Toolbar is not enough?
First a note the other toolbars;
Previously I simply cloned a toolbar tiddler, be it view or edit toolbar and placed the clone below the body text . It is also be possible to wrap the toolbar with a condition to only display if the tiddler content contains more than an adjustable number of lines eg 20.
As you point out the editor toolbar is a little different, $:/core/ui/EditTemplate/body/editor is the key.
I think such an additional editor toolbar solution would be reasonable with condition such as > 20 lines.
I too will investigate.
- Interesting how the edit widget doco says the below but that is exactly where the editorTool bar is.
-
The content of the
<$edit>widget is ignored.
-
- There ultimately appears to be no helpful documentation of this mechaisium.
- Another idea, is if the toolbar is not visible show it at the bottom as in a reply here using CSS? but then it always will be if if floats?
This overwrites one core tiddler, so be sure to have a backup before trying. The changes to the core tiddler were very small, just requiring an outside div in order to override the generated style attribute and a small spacer div that could be eliminated in some future edition if this was useful.
2 Likes
A little unrelated to the original topic, but I wanted to mention jd’s panulat-edittheme http://j.d.panulat-edittheme.tiddlyspot.com/ , which also styles the core edit template and allows you to make the the toolbar sticky.
Turns out you can get there with just CSS. There may seem to be excess space around the toolbar in some scenarios. This was to accommodate the scenario where the preview was an adjustable height and longer than the original wikitext. It might be with more tweaking it would be possible to fix that.
.tc-editor-toolbar {
position: absolute;
height: 4em;
border: none;
bottom: -0.5em;
right: 0; left: 0;
}
div.tc-dropzone-editor > div.tc-reveal {
padding-bottom: 2em ;
}
div.tc-tiddler-preview {
padding-bottom: 3.3em ;
}
@Mark_S On my end the toolbar overflow on the fields :
To re-arrange the toolbar location with CSS only, IMO the best and simplest way is to use CSS flexbox :
.tc-tiddler-edit-frame>.tc-keyboard>.tc-keyboard>.tc-reveal{
display:flex;
flex-direction:column-reverse;
}
EDIT
The above code will work if you use code mirror, otherwise use this instead :
.tc-tiddler-edit-frame span.tc-keyboard span.tc-keyboard div.tc-dropzone-editor div.tc-reveal {
display:flex;
flex-direction:column-reverse;
}
Probably because of code mirror.
That’s what I tough too at first but even without code mirror this issue can be reproduced :
It only happens when the width of the tiddler becomes a bit too small so it’s not a big deal, but that is why I prefer a non-floating solution.
For floating option you can use something like:
div.tc-dropzone-editor > div.tc-reveal {
display: flex;
flex-direction: reverse-column;
}
.tc-editor-toolbar {
position: sticky;
bottom: 0;
}