created on Jan 13, 2017 and updated on Jan 31, 2020
In 2013, I started with this person’s code borgar.github.io/textile-js.
When testing the code in the summer of 2013, I found the flashing of the live preview to be annoying and distracting as I typed. I could see the live preview out of the corner of my eye.
My version accesses the API endpoints in my web publishing apps. Using REST and JSON, the editor sends markup to the server, and it receives back the formatted HTML.
Other functionality that I added to the editor includes a single-screen view to create a larger writing area, keyboard shortcuts, and auto-save. I also added a line of buttons across the top to switch to single screen or split screen and to save or preview a post.
The original code used jQuery. When I added my changes, I added the usage of the small minified.js framework.
- ctrl-s = save
- ctrl-p = preview (I don't use a printer, so this is fine for me). This sends markup to the server for formatting, and then the HTML is displayed in the right pane. If writing in single-screen mode, then the screen switches to the preview also in single-screen mode.
- ctrl-j = simpler, single screen view that removes the line of buttons at the top
- ctrl-h = provides a tiny, simplified window for writing that is only five lines tall
- ctrl-d = switches the default display from black text on white background to light grey text on a black background
- ctrl-b = return to the standard, split-screen view with the small row of buttons across the top
The editor works fine on the phone's web browser. Obviously, it's easier to write on the phone with the editor in single screen mode.
The default writing environment. The button with the arrows pointing right is used to switch to single screen mode. The button with the arrows point left is used to switch to split screen mode.
Single screen mode for writing.
Single screen mode for previewing a post.
This is a desktop / laptop view after hitting ctrl-j to create a simplified writing environment. No buttons.
This is a desktop / laptop view after hitting ctrl-d to change the default colors when using the simplified writing environment.
This is a desktop / laptop view after hitting ctrl-h to reduce the writing window to only five lines tall.