data:text/html, <html contenteditable>
At first it seems that nothing's happened. The browser pane is one large text entry field. It's a great way of being able to quickly copy snippets of text from a web page, or keep temporary notes. You can even bookmark the address so that you can quickly have a scratchpad available.
When I first saw this I was amazed! OK, maybe I'm easily impressed. :) I wanted to share it, so asked if I could mention it on G+. My colleague suggested that instead I link to the original page. When I searched for this, I had many hits returned, with the first being a blog post titled "One line browser notepad". The blog post's author described the method I mentioned above. I then went on to read some of the comments made in reply to the post and was amazed to see that there were at least 10 further enhancements and improvements suggested. I highly recommending you visit this blog post and try some of the methods.
For my purposes I settled on the example below. It goes a few steps further than the basic example, giving the tab a title, adding a [Save] button, increasing the text size, adding a favicon and setting the focus on the editing pane. One advantage of this solution over other solutions suggested is the ability to save the contents of the text box. It's not a fully-blown editor but you can at least save your notes if you want to do that. All credit for the code below goes to those who commented to the blog entry. It is entirely the result of cut-and-paste-ing some of their contributions.
data:text/html;charset=utf-8,<link%20rel="shortcut%20icon"%20href="http://g.etfv.co/http://www.sublimetext.com"/><title>Scratchpad</title><button%20onClick="SaveTextArea()">Save</button>%20<script%20language="javascript"%20type="text/javascript">%20function%20SaveTextArea()%20{%20window.location%20=%20"data:application/octet-stream,"%20+%20escape(txtBody.value);%20}%20</script>%20<textarea%20id="txtBody"%20style="font-size:%201.5em;%20width:%20100%;%20height:%20100%;%20border:%20none;%20outline:%20none"%20autofocus>%20</textarea>
No comments:
Post a Comment