Manual Draft Save - Save a draft on demand

Question

Screenshot

enter image description here

About

This small script adds a save button to the editor bar that allows you to instantly save the contents of the editor as a draft. Although this happens automatically every minute or so, now you can force it to save the contents whenever you want.

...and now you can also clear the saved draft with the touch of a button too!

License

MIT License

Download

http://files.quickmediasolutions.com/userscripts/draft.user.js

// ==UserScript==
// @name          Manual Draft Save
// @author        Nathan Osman
// @namespace     http://quickmediasolutions.com
// @description   Adds a button for manually saving a draft
// @include       http://stackoverflow.com/*
// @include       http://superuser.com/*
// @include       http://serverfault.com/*
// @include       http://meta.stackoverflow.com/*
// @include       http://stackapps.com/*
// @include       http://askubuntu.com/*
// @include       http://*.stackexchange.com/*
// ==/UserScript==

// Here I borrow a (slightly modified) function I wrote for another
// UserScript that makes it easy to provide functions
// with complete access to the page.
function EmbedFunctionOnPage(function_contents)
{
    var exec_script = document.createElement('script');
    exec_script.type = 'text/javascript';
    exec_script.textContent = "(" + function_contents.toString() + ")()";
    document.getElementsByTagName('head')[0].appendChild(exec_script);
}

// Now here is the function that we embed on the page.
EmbedFunctionOnPage(function() {

    $('.fl').first().append('<a href="javascript:void(0)" onclick="heartbeat.ping();">Save</a> | <a href="javascript:void(0)" onclick="$(\'#wmd-input\').val(\' \'); $(\'#wmd-preview\').html(\'\'); heartbeat.ping();" style="margin-right: 35px;">Clear</a>');

});

Platform

Since this little 'app' is a UserScript, it can be installed as-is in Chrome. Firefox users can use GreaseMonkey and Opera users can follow these instructions.

Contact

I can be reached at... admin@quickmediasolutions.com

Code

Nothing but JavaScript and jQuery!

Regarding your installation instructions: note that the script tag wiki has installation instructions for the various browsers. — Rebecca Chernoff, Feb 20 '11 at 21:16
@Rebecca: Ya... but a lot of people come here from external links (especially on Meta) so they don't see those. Still, I can remove it if you'd like. — Nathan Osman, Feb 20 '11 at 21:19
@JeffM: I fixed it, but I had to move it to the bottom of the editor. Thanks! — Nathan Osman, Feb 20 '11 at 21:45
Just have a refinement suggestion. The links shouldn't be shown when editing an existing post, it's just unnecessary (and potentially harmful). Detection shouldn't be too difficult. The URL is in the form, {site}/posts/{postid}/edit. Otherwise this is basically what SO should have had in the first place. Even works for new questions too. :) — Jeff Mercado, Feb 21 '11 at 04:00
@JeffM: Yeah... since it's a UserScript, I can limit the domain to certain URLs. — Nathan Osman, Feb 21 '11 at 05:52

score 6 · Answer 1 · answered Feb 20 '11 at 21:53

6

This is great. How about a feature request? Should be doable I think.

A matching clear button.

answered Feb 20 '11 at 21:53

Jeff Mercado

329
1
11

Sorry, I wasn't sure if I should be posting this as a comment or an "answer". Looking at other app pages, people seemed to put these here. – Jeff Mercado Feb 20 '11 at 21:54
I like it... but I don't think the StackExchange engine supports this. (Like the site itself doesn't even have a means of doing this.) – Nathan Osman Feb 20 '11 at 21:55
I noticed that if you clear the text and then save, it does actually save now (but with no message). Unlike in the past where it didn't save at all. Otherwise you could replace the text with a single space and it will save that. You should be able to alter the contents of a text box right? – Jeff Mercado Feb 20 '11 at 22:01
@JeffM: Sure... I didn't realize that blank submissions were accepted. I was getting 500's before. – Nathan Osman Feb 20 '11 at 22:02
@JeffM: Ya... still getting 500 errors when a blank entry is submitted... would a space (' ') be okay? – Nathan Osman Feb 20 '11 at 22:08
@George: I'd be okay with that. I'm sure other people will appreciate that not having to see their old post. – Jeff Mercado Feb 20 '11 at 22:10
@JeffM: ...and done! I just re-uploaded the new script. – Nathan Osman Feb 20 '11 at 22:16
@George: Now, even more awesome. Time to update the screenshot and description again. :) – Jeff Mercado Feb 20 '11 at 22:18
@Jeff M: A request won't do the trick. I've done a request few months ago, but was declined. – Robert Koritnik Feb 21 '11 at 09:07
@Robert: I know, I even supported it (I've been linking to it and other related requests everywhere). But this request was to add to the button to this app, not SO. ;) – Jeff Mercado Feb 21 '11 at 09:20

score 2 · Answer 2 · answered Jul 24 '11 at 02:21

Or, you could just do this...

-function EmbedFunctionOnPage(function_contents)
-{
-    var exec_script = document.createElement('script');
-    exec_script.type = 'text/javascript';
-    exec_script.textContent = "(" + function_contents.toString() + ")()";
-    document.getElementsByTagName('head')[0].appendChild(exec_script);
-}
-// Now here is the function that we embed on the page.
-EmbedFunctionOnPage(function() {
-    $('.fl').first().append('<a href="javascript:void(0)" onclick="heartbeat.ping();">Save</a> | <a href="javascript:void(0)" onclick="$(\'#wmd-input\').val(\' \'); $(\'#wmd-preview\').html(\'\'); heartbeat.ping();" style="margin-right: 35px;">Clear</a>');
-});
+document.querySelector("fl").firstChild.innerHTML += '<a href="#" onclick="heartbeat.ping();return false">Save</a> | <a href="#" onclick="$(\'#wmd-input\').val(\' \');$(\'#wmd-preview\').html(\'\');heartbeat.ping();return false" style="margin-right:35px;">Clear</a>';

I like using dom. It does escape your HTML. – Johannes Kuhn Dec 06 '13 at 07:54 — Johannes Kuhn, Dec 06 '13 at 07:54