Steemit EasyEdit - Let's Make the Editor Great! (Again?)

in #steem8 years ago (edited)

Do you wish the editor toolbar stayed at the top? Wish you could just scroll your editing area instead of the whole page on the 'Submit a Story' page?

Steemit EasyEdit

Have you ever been writing a really long page, and you were working at the end and need to choose an option from the toolbar? It may look something like this:

So much scrolling, right?

My bookmarklet will let you have the editor toolbar always at the top, as well as letting the editing area be scrollable. Take a look to see how it works:

Install

To install, create a new bookmarklet in your browser (it helps to have the bookmark toolbar always shown) and enter the following for location:

Please see http://pastebin.com/QjpsjP5K

Here is an example of how to do it in Google Chrome:

Use

In Google Chrome, just click on the bookmarklet and you are ready to go:

Note that when you in the Submit a Story page, if there is not already saved text, it will be in MarkDown mode with no text. As soon as you type anything, you will stay in this mode and never be able to reach the Editor mode, which is the mode that has all the toolbar options. In this case, you can just click the CLEAR link next to the POST button to clear all text and start over.

You may also resize the scrollable editing area by grabbing the handle at the bottom right:

As you can see, you can toggle between Editor and Raw HTML and my bookmarklet will return the editor to the previous height and scroll position.

This bookmarklet will not work in Mozilla Firefox. I will make an update for Firefox soon.

Thoughts..

The editor and the submit page will likely be updated sometime in the future. When that happens, this bookmarklet may stop working or may cause unwanted behavior. But until then, this should work as a good enhancement. In fact, I am using this bookmarklet as I create this post. Without all the scrolling back and forth and losing focus, productivity has definitely increased!

I suppose it is possible to draft your post in a word processor and try to paste to the editor hoping all the formatting stays the same, but if it doesn't, then that would be a lot of reaching for the toolbar. For those using a MarkDown editor, more power to you! I personally spend most of the time in the visual editor and switch back and forth to the Raw HTML for finer control. My posts are mainly done in HTML instead of MarkDown as I do a lot of web dev and it is more comfortable, although I have learned a little bit of MarkDown since joining Steemit!

Anyway, that's my workflow. What is yours like?


Thanks! And Enjoy. Feedback is always welcome.

Follow me! @bitcoiner



Sort:  

I love your stuff.. these kinds of howtos make it easy for everyone. Thanks!!

Glad you like it! Thanks!

It was really kind that you developed your own fix for a huge problem. Many of us are used to those controls being in the menus or at least of the top view of the web-base editor. This tool will really help a lot of people that can now publish great content more efficiently.

HAHAHA! Great headline, well played sir, well played. And as Obama says "Hey, The Editor is already great, jerk!"
Anyways, I just love love love how the Steemit community is "all over" improving the platform. Yes I DO hate scrolling to post, thanks for offering a solution before Steemit managed to . Like I said this community just rocks.

Thanks!
I must say, this is a really great community here! Glad to be playing a part!

Fantastic idea. I always have this problem! I hate scrolling up and down like a yoyo.

Thank you! I've had this problem for as long as I've been here. Yoyo is right!

This is design 1 o 1. Really, the one who decided its better to scroll the whole page instead of the text edit section is... Stoopid.

Well, I'm sure the editor and the submit page will have an upgrade eventually. But you're right, having to scroll the whole page was annoying me for more than a month on this site! Haha

As i write stories or poems, editor makes it difficult for me to edit the content.
This will surely help. Thank you so much.
Great work.

My pleasure! And thank you! Hope it helps!

Installing this thing doesnt look simple to me, and I'm not a chrome user. Seems simpler to make a note of the html code and use it as you work.
pound space text gives me a large header

text gives me a large header

..... learn the easy code

Right, it depends on what someone adopts as their workflow. Some use MarkDown exclusively and use an external MarkDown editor. I personally use HTML with the visual editor here. Installing the bookmarklet could be tricky for someone who hasn't done it, which is way I've created the GIFs to follow along. And I will surely create a Firefox version soon and test in other browsers.

And to think I've learned all these HTML and markdown tricks for NOTHING! XD j/k, nice little plugin. I do the same thing with freezing frames in excel, blows people's minds.

Haha, well learning the markup/markdown languages do help when you want to fine tune your post. And freezing the top row in Excel is the best thing ever!

Fantastic. I actually do use Firefox (fnally decided that Google knows enough about me, haha, and also switched to Protonmail for that matter) but will look forward to either your update or the "the developers" to get around to it. Yes, it's a pain scrolling tho, thanks for doing your part to help us all.

That's http://www.protonmail.com if anyone's interested. It's literally a "Swiss email account" pretty much unhackable, develped by CERN and MIT geeks who wanted totally secure, private email, and like Steemit, if you lose your password, tough noogies. Governed by Swiss law as well. I'm not an affiliate btw, I just love it.

I was wondering about that and had to well.... Google... it! Haha.. Thanks for the share.

But Google has the moto don't be evil remember? Haha. But yes, I will make a Firefox solution soon. I completely agree with the painful scrolling. I've been doing it ever time I make a post since joining Steemit a month ago!

Yes, I think Google's "don't be evil" is nowdays pretty comparable to the phrase "We're from the government, and we're here to help"! And I must admit that I keep a Chrome tab open for searching, especially for my Steemit questions!

Haha, it's hard to completely leave Skyn... er, Google!

trying to use Editor but it doesn't work. can you help me about what am I doing wrong? does it work for windows?
when I push the bookmark, nothing happens.
May be I'm not the one who having such troubles?

Yes, this works for all operating systems. Right now, only tested for Google Chrome. Did you make sure to copy all the code from the pastebin I linked above in creating the bookmarklet? When you are first in the Submit a Story page, you will be in MarkDown mode. As soon as you type anything, you will stay in this mode and never able to reach the Editor mode, which is the mode that has all the toolbar options. You can click the CLEAR link next to the POST button to clear all text and start over.

Thank you for the support! It works! I think it is a very great option!
It must be a default future in steemit!

Cool! Glad I could help and get it working for you! Well, the Steemit team is always coming up with new updates, so maybe an update to the editor and/or the submit page will come very soon!

This looks good - thanks.
However, I can't find a "center" option?
I can't seem to add my own code to center either; ie,

Thanks!
Yes, the editor currently doesn't have a button to center text. You'll have to edit the HTML by going into the Raw HTML mode, find the text that you want to center, and wrap it with <center> and </center>.

Ok, I see now how to make that work. I use "center" a lot. Hopefully it will be added soon. Thank-you

No problem! Glad I could help

Can this work on puffin nd Firefox browser?
Plz follow and upvote my posts plz

This is awesome! Now I can save a thousand hours when writing. Thanks Bitcoiner :)

Thanks! Glad you like it! Well, after you write 9 posts, then you'll be saving over 9000 hours!! =D

Is this something that could be made to work for all browsers and checked in to the Steemit code base via a pull request?

Yes, it could definitely be done. It's not that it doesn't work for all browsers. It is basically some CSS inclusions done through some javascript. If the javascript is entered directly into the dev console, it will work. It's just that there is a content security policy in place for injected javascript (which the bookmarklet is essentially) that seems to be respected in Firefox but not Chrome. I would have to see if my CSS changes fit into the Steemit design and if there are things I'm not aware of.

It would definitely be a great feature to check in via a pull request. The users that would benefit the most are the ones that would not know how to install a plugin to their browser 😀

Right, I'm just wondering why they haven't made the visual editor behave like how I have it since the start. And I had created the GIFs especially to illustrate how to install the bookmarklet, knowing most people probably haven't done it.

Thank you! It seems pretty good!

This post has been linked to from another place on Steem.

Learn more about linkback bot v0.3

Upvote if you want the bot to continue posting linkbacks for your posts. Flag if otherwise. Built by @ontofractal

Does not seem to work anymore.

Hi, I created this solution 10 months ago when Steemit.com did not have the feature implemented. They do now, and I'm sure some new code changes have broken my solution.

Does this work while posting comments?

This will only impact the editor on the Submit a Story page.

I see. Thanks for letting me know this!
I was looking for something like this for comments section too. If you know of any such tool do suggest. Thanks!

Thanks!!! This information was very helpful. It just so happened that I was able to use this editor's toolbar when making my initial submission here
https://steemit.com/introduction/@ainsleyjo1952/ainsleyjo1952-here-getting-her-toes-wet-written-on-july-13-14-2017

but couldn't find it when starting to write my second one.

Guess I'll just have to look a bit more carefully...

Thanks, this is a great contribution. I wish it comes as a default feature. If you can create a a similar script for saving a post as a draft for future use, it would be really awesome.

So glad you developed this. Curious why there is not this function built in. I am constently looking up markup codes.

@ bitcoiner Wawooo thank you so much.I was looking for this thing.