Last Updated: August 11, 2024
·
531.4K
· jjperezaguinaga

One line browser notepad

Introduction

Sometimes I just need to type garbage. Just to clear out my mind. Using editors to type such gibberish annoys me because it clutters my project workspace (I'm picky, I know).

So I do this. Since I live in the browser, I just open a new tab and type in the url tab.

data:text/html, <html contenteditable>

Voila, browser notepad.

Why it works?

You don't need to remember it. It's not rocket science. We are using the Data URI's format and telling the browser to render an html (try "javascript:alert('Bazinga');"). The content of said html is a simple html line with the html5 attribute contenteditable. This works only on modern browsers that understand this attribute. Click and type!

125 Responses
Add your response

This is great. Made a bookmark from it.

over 1 year ago ·

You can use textarea and make it "invisible" if you want autofocus.

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
over 1 year ago ·

I'm making it as my default page from now on. :) Thanks for the tip.

over 1 year ago ·

This is very clever; I dig it. Thanks for the tip!

over 1 year ago ·

Really cool! :D

over 1 year ago ·

I made a version that is a full blown Ruby editor with syntax highlighting from Ace.

https://gist.github.com/4666256

over 1 year ago ·

@jakeonrails Quoting @jessereese01, this is very clever, I dig it. Smallest html5/css/js editor competition anyone?

over 1 year ago ·

I'm going to use the hell out of this. thanks.

over 1 year ago ·

Reminds me of how you could do this in IE (up to 6 at least; last version I tried) by using about:html here

I missed this feature a lot and am very happy I can just have html render on the fly again!

over 1 year ago ·

Forgive me for the shameless plug, but thought this might be useful for others. I put together a little project that uses the browsers localstorage so you can jot notes down and come back to them at http://a5.gg

over 1 year ago ·

neat, but would be good if someone implemented some sort of dirty checking to prevent lost work by accidentally closing the tab.

over 1 year ago ·

do you know if there is a mobile safari version of iOS?

over 1 year ago ·

Here is a variation on the theme that changes the background color as you type:

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
over 1 year ago ·

Really cool, I liked @fvsch version, I just added a title so the text on the tab makes a bit more sense

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
over 1 year ago ·

Fantastic.

over 1 year ago ·

@bgrins that is strange. i like it :)

over 1 year ago ·

for Safari browser too, base64 needed

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPg==

br

over 1 year ago ·

This is fantastic, thanks for sharing

over 1 year ago ·

Its really cool!

over 1 year ago ·

Cool. Added the date
////data:text/html, <html contenteditable>

</p> <script> var d = new Date(); var x = document.getElementById("demo"); x.innerHTML=d.toDateString(); </script>
///

over 1 year ago ·

tres' kuhl, very useful

over 1 year ago ·

Cool! It's crazy. I love it.

over 1 year ago ·

seems usefull.. .cool

over 1 year ago ·

(My install of) Firefox defaults to ISO-8859-1, which turns non-iso-8859-1 characters to html entities when saving to a file. This version is more int'l friendly:

data:text/html;charset=utf-8, <html contenteditable></code>

over 1 year ago ·

You're such a bunch of nerds ;-)

over 1 year ago ·

Very cool. Bookmarked. Thanks.

over 1 year ago ·

Hi, excellent article - and excellent discussion too.

I've combined several of the ideas above into the following :

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"></code></pre>

Features :


Nice layout : whitespace, bigger font, easier on eyes.
UTF-8 / international characters compatible
Titled tab
No spellcheck


It's still missing some big features though, for example :


localStorage : the code from 3lv_1 doesn't work, at least on Chrome. 


This is critical and essential - it's like AutoSave. You can forget about saving, it's done automatically for you. Zero data loss.

http://a5.gg works & looks great, but you can't scroll (on Chrome) once there are more lines than screen space == showstopper 

Once localStorage works, then I can start using this; will move my scratch pad from my Text Editor :)

Thanks again to everyone for this awesome thread.
over 1 year ago ·

I've copied @sufehmi but added font-family: monaco and a H1

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.
over 1 year ago ·

Plus a favicon maybe:

data:text/html, <link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/><html contenteditable>
over 1 year ago ·

@oumu, yes, would be visually nice and faster to find in my bookmarks bar, anyone up for embedding favicon in base64 into 3lv1 version so fully local loading (i know will be cached from afar but.. the nerd power!)?
Edit.. @3lv
1, what browser does your code work in again? Can't make it play along in neither firefox nor chrome

over 1 year ago ·

Nice!<br>
Also this works as a parameter in the 'target' field of a Windows shortcut. Eg:<br>
opera.exe "data:text/html, <html contenteditable>"</code>

But, how to open an existing text/html file into this 'browser acting as a text editor' mode?<br>
I've always wished browsers could flip back and forth between editing html source as plain text, and viewing it as formatted html.<br>
Seems there's hope of this yet.

over 1 year ago ·

Nice trick ....... I am going to bookmark it .........

over 1 year ago ·

it's cool.. thank you

over 1 year ago ·

I made a bookmarklet that takes highlighted text on a web page and when you press the button then opens the new edit window with that text in it: http://ednortonengineeringsociety.blogspot.com/2013/01/cool-trick-with-contenteditable-in-html.html

over 1 year ago ·

It's like typing on paper...

data:text/html, <html contenteditable><style>body{font-family:helvetica;font-size:15px;line-height:22px;color:#666;width:600px;margin:40px auto;background:#FFF;border:1px solid #DADADA;padding:50px; }</style>

over 1 year ago ·

I added one which combines loads of the above, but makes it look like lined paper. So; includes autofocus, a favicon, a title, some basic styling for text and a nice css-only lined paper effect.

data:text/html;charset=utf-8, <title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;} </style> <body spellcheck="false"> <div class="paper"> <textarea autofocus="autofocus"></textarea> </div> </body> </html>

over 1 year ago ·

@iamfriendly, yours does not work. It seems it is missing things.

over 1 year ago ·

@iamfriendly: nice! but you forgot the body... Heres the fixed version:

http://pastebin.com/dpW1vwB8

over 1 year ago ·

AS A SIDE NOTE to the above in Firefox
1) Bookmark it on the tool bar
2) Edit the Properties for the book mark
3) Set the 'Load this bookmark on the sidebar'
4) Save

over 1 year ago ·

Annoying, the comment must have got cut off. Mine uses a textarea rather than the body, here:

https://gist.github.com/4675347

over 1 year ago ·

This is the better application of the data uri scheme:
data:text/html; base64, PHNjcmlwdD5sb2NhdGlvbi5ocmVmPSJodHRwOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9b0hnNVNKWVJIQTAiOzwvc2NyaXB0Pg==

over 1 year ago ·

I went the textarea route so that I could add the ability to save the contents to a file http://pastebin.com/U8658H5c

over 1 year ago ·

Wow! Works like a charm here in my Opera. Very kewl!

over 1 year ago ·

Under windows at least in Chrome, Crtl B Crtl I and Crtl U work on highlighted text (Bold, Italic, Underline), and Crtl S will save for later retrieval - under what ever file name(s) you designate. Any one else know of any more Crtl sequences?

over 1 year ago ·

Hm...seems Chrome throws security errors when trying to access localStorage from data-uri. Otherwise you'd just tack on:

<script>(function(b,l,k){b.innerHTML=l.getItem(k);b.addEventListener("keypress",function(e){l.setItem(k,b.innerHTML)},false)})(document.body,localStorage,"bkmlt.ntpd")</script>
over 1 year ago ·

@paulnormannz whoa, font styles! ctrl+s doesn't actually save the content for me, just the blank datauri page.

over 1 year ago ·

Like @zaus said, Chrome throws "SECURITY_ERR: DOM Exception 18" for localStorage. So, simply save the code into some HTML file. Here's a version with saving every time Enter is pressed:

<!DOCTYPE html><head><meta charset="utf-8"><title>TextEditorLocal</title><script>window.onload=function(){f1()}; 
function f1(){a=window.localStorage['e'];if(a) document.body.innerHTML=a};function f2(t,e){if(e.keyCode==13){window.localStorage['e']=t.innerHTML}}</script>
<body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;word-wrap:break-word;background:black;color:green;" spellcheck="false" onkeypress="f2(this,event);"></body></html>
over 1 year ago ·

Just use opera, it has Notes window builtin

over 1 year ago ·

Cool I did something similar a while back that gave you a live preview.

https://gist.github.com/1044282

over 1 year ago ·

Instant Web Editor: http://editme.so

over 1 year ago ·

Never saw 1000 votes protip before. This one worth it :)

over 1 year ago ·

@zaus Ok, I'm using Chrome Version 26.0.1398.0 Canary, under Wondows Xp SP3

Actually this has taken of for us here for quickly gathering snippets - In Chrome Google Canary Open a tab as editor---from book mark- drag it off to other screen. Drag/ Copy and Paste into it snippets and useful stuff of other web pages (and their http://-s)

Crtl-S and save (as complete web page) some where (just a temp project folder). Fom bookmark make a new 'editor' page when needed rather than everything in one 'editor'.

When ready, use Sigil to import these pages (from temp project folder) into a new (or existing) ePub.

Create or make some lines into Headings <H1-6> then use Sigil's auto TOC maker, save as ePub for personal reference. (I'm using Cailbre for reading/organising ePub-s)

By opening the 'editor' Crtl-S-ed html files in Sigil, and not trying to just paste into Sigil (it uses webkit so almost responds well enough to Chrome copy/pastes), you'll get more of the original formatting images', tables' placements etc... that's where this simple in browser editor is so useful in gathering snippets and saving to disk - for those that works for :)

https://code.google.com/p/sigil/
http://calibre-ebook.com

over 1 year ago ·

I guess I'm late to the game but here's my 15 minute hack for persistent notes using local storage: http://samhuri.net/f/note.html

over 1 year ago ·

My faith in humanity is restored!

over 1 year ago ·

I love the code that displays the save button and launches a save dialog. But the save dialog (at least with FF) doesn't allow the file to be saved as anything other than an 8 character name followed by the "part" extension, and it only saves to the default download location.

Is there any way to call the 'save.as' dialog where the file name, extension, and location may be selected by the user? If so, it would make a great tool even better.

Thanks in advance,
Andrew

PS: And will it work in IE? If so, how, as I'm not getting it.

over 1 year ago ·

@terrahertz firefox already gives you the ability to edit HTML of a page on the fly. I just did it now on this page and edited some text via HTML and viewed the changes. It's called "Inspect" and it's under the Web Developer menu. Control-Shift-I is the shortcut. cheers.

over 1 year ago ·

trivia: it works because of our loved hated IE, it was first implemented in IE (in a bugged weird way), than firefox simplified it, then chrome implemented and then html5 made it a standard. awesome!

over 1 year ago ·

The best ideas are usually the simplest.... so long TextEdit!!

over 1 year ago ·

Took the best bits (IMHO) from all the code above:
- Paper styling.
- Auto focus.
- No TextEdit field (so Ctrl+S works).
- Fav icon from google docs.
- Slightly larger font.
- Spell checking on (easy to turn off if you like)

http://pastebin.com/rqLd7TdK

over 1 year ago ·

My own contribution:

data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %233a3; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="wake up Neo..." />
over 1 year ago ·

@iconify awesome job!

over 1 year ago ·

this is brilliant !

over 1 year ago ·

@chinchang Thanks. Perfect use case for that, I think. :-)

over 1 year ago ·

With the same idea in mind I've developed this notepad http://memo-pad.appspot.com

over 1 year ago ·

my autofocus bookmark:

data:text/html, <html contenteditable> <script>document.documentElement.focus();</script>

over 1 year ago ·

@iconify Well done! Very nice! =D

over 1 year ago ·

@sjg999 Thanks.

over 1 year ago ·

so cool

over 1 year ago ·

@jasecoop I actually use http://a5.gg/ every day for taking quick notes and keeping track of my timesheet. Thanks!

over 1 year ago ·

Awesome!

over 1 year ago ·

Great thread!

over 1 year ago ·

pretty... pretty... pretty... pretty.... pretty good.

over 1 year ago ·

This is awesome, since everybody's throwing their hats into the ring, here's the short version of my notepad app:

<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>

it uses localStorage, so it needs to be hosted, but that means it'll save your notes between visits... I have the long version of my simple html5 notepad app, which is a little beefier code-wise (there's a polyfil & css), but still butt-simple.

over 1 year ago ·

I made my own notes system using cookies a few months ago : http://romain.parage.free.fr/notes/
You can add a note with right click

over 1 year ago ·

thanks...

over 1 year ago ·

jajaja nice trip.

over 1 year ago ·

My 2cents!
Awesome bookmarklet, from a marklet lover =)

data:text/html;base64,PHRpdGxlPkZsYXRwYWQ8L3RpdGxlPjxodG1sIHN0eWxlPSJmb250LWZhbWlseTogJ1JvYm90bycsIHNhbnMtc2VyaWY7YmFja2dyb3VuZDogIzFBQkM5QztwYWRkaW5nLXRvcDo1MHB4OyI+PGhlYWQ+PGxpbmsgaHJlZj0naHR0cDovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9Um9ib3RvJyByZWw9J3N0eWxlc2hlZXQnIHR5cGU9J3RleHQvY3NzJz48L2hlYWQ+PGJvZHkgY29udGVudGVkaXRhYmxlIHN0eWxlPSJtYXgtd2lkdGg6NjByZW07bWFyZ2luOjAgYXV0bztwYWRkaW5nOjRyZW07YmFja2dyb3VuZDojZmZmO2JvcmRlcjojNjY2IHNvbGlkIDFweDtib3gtc2hhZG93OiAxcHggNHB4IDhweCAtNHB4O21pbi1oZWlnaHQ6IDUwMHB4OyI+PC9ib2R5PjwvaHRtbD4gIA== </code>

PS: sorry for the overflow =|

over 1 year ago ·

really nice!

over 1 year ago ·

Awesome!
Minimal notepad editor, and it is easily forkable, customizable, ...
Thanks!
/DaniSanti.com

over 1 year ago ·

so so brilliant, just make it simple and stupid, finally i bookmark my black and white verion :->

data:text/html; charset=utf-8, <style>html,body{margin:0; padding:0;}</style><textarea style="font-size:2em; font-family: source code pro; line-height:1.5em; background:18191A; color:azure; width:100%; height:100%; border:none; outline:none;margin:0;padding:150px;" autofocus placeholder="wake up mo..." spellcheck="false" />
over 1 year ago ·

Has anybody tried this on a Chromebook?

over 1 year ago ·

Brilliant! No more extensions needed. Thanks :)

over 1 year ago ·

Wow, great post!

over 1 year ago ·

Great shit, thanks)

over 1 year ago ·

I prefer http://knotable.com for obvious reasons

over 1 year ago ·

Good tip!

I made a version for Javascript editor with ACE, as @jakeonrails did: in particular it lets you to execute the written code through CTRL + SHIFT + Y shortcut.

https://gist.github.com/wilk/7908404

over 1 year ago ·

Awesome. Love it. Thanks. <3

over 1 year ago ·

Here is mine http://pastebin.com/0jdqrPyk

Save it as htm file somewhere.

Click on top left + to add note above current note.

Click on bottom left + to add note under current note.

Click x on the right to delete the note.

Save to localstorage with CTRL+S or CMD+S on mac.

When the notes are not save the background is red and the page title is "Unsaved"

over 1 year ago ·

I have created a styled version using localStorage which has the ability to download the contents.

https://gist.github.com/nunull/8807030

over 1 year ago ·

awesome stuff. thanks!

over 1 year ago ·

Noscript disable that by default:

javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks.
Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference.

over 1 year ago ·

This is awesome, when you have something like a Chromebook

over 1 year ago ·

Very Nice and useful for writing notes in emergency when working/browsing webpages...

over 1 year ago ·

This is fantastic.
Anyone know how to turn this into a Chrome extension, or to at least pin to the taskbar?

over 1 year ago ·

jecxjo's version is awesome! http://pastebin.com/U8658H5c

i gave it a black background. but is there a way to make the page body around the text area also black?

over 1 year ago ·

Superb...........

over 1 year ago ·

www.typehere.co is a good alternative, also has some kind of localstorage.

over 1 year ago ·

Just wow! Thanks for sharing, it's really something new for me. ;)

over 1 year ago ·

Cool~

over 1 year ago ·

Cool

over 1 year ago ·

super-simple, but here's one w/ a text area on the left for taking text notes & an image paste-pad on the right, handy for pasting images, etc....


data:text/html, <html style="font-weight: bold; font-family:Georgia; background:rgb(108, 108, 29); font-size:20px;padding:15px;" contenteditable><title>JD NOTEPAD</title><body><div style="width:49%;float:left;"><textarea style="width:99%; height:99%;padding:20px;border: 10px solid darkseagreen;">TEXT NOTEPAD....</textarea></div><div style="border: 10px solid darkseagreen;width: 49%;height: 97%;position: relative;left: 50%;">

IMAGE PASTEPAD...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></div></body>

</pre>

over 1 year ago ·

This is great. Really clever. Unfortunately they dropped keyboard input in fullscreen.
In Safari you can no longer pass Element.ALLOWKEYBOARDINPUT to webkitRequestFullScreen -> https://fullscreen.spec.whatwg.org

over 1 year ago ·

太厉害啦!

over 1 year ago ·

Anyone know how to support markdown rendering like iA Writer with this?

over 1 year ago ·

This was an amazing idea. Not sure of it usefulness, but the creativity in it is outstanding!

over 1 year ago ·

Hi, this little trick even works in browsers for Android phones. Yes, I have Firefox for Android and tried this little trick and it worked just fine! This is a real kickass trick! Thanks!

over 1 year ago ·

This is mine! https://codepad.co/snippet/XxFu3CXs

No hosting needed, just save the location string as bookmark!!
[ctrl+shift+t] -or- [⌘+shift+t] to restore data

Features:

  • autosave every 10 seconds after any non-special-key pressed
  • last modification date and time
  • title
  • * added to document title while data is not saved
  • dynamic document.title
  • favicon
  • markdown support
  • download document as text
  • download document as .html from with markdown formatting
  • trash document
  • handles correctly copy/paste text from other sources
  • nice style
over 1 year ago ·

@sun2rise looks like your link is broken

over 1 year ago ·
over 1 year ago ·

cool~

over 1 year ago ·

Here is a modification I made to one of the previous examples so as to include a favicon:

data:text/html,<link rel="shortcut icon" href="https://raw.githubusercontent.com/Microsoft/Windows-classic-samples/master/Samples/Win7Samples/winui/shell/appplatform/aerowizards/migratingtoaerowizardssdksample/wizard97/notepad.ico" type="image/x-icon"><title>Text Editor</title><button onClick="SaveTextArea()">Save</button> <script language="javascript" type="text/javascript"> function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.value); } </script> <textarea id="txtBody" style="font-size: 2em; width: 100%; height: 100%; boarder: none; outline: none" autofocus> </textarea>

Enjoy.

over 1 year ago ·

Hi, another option is to keep things simple as per original bookmarklet and then use Stylish to make a user style for the page. That's what I did and it works great, avoids needing a crazy long URL with endless inline presentation. Styles in the URL is never good! In addition, you might like to use Greasemonkey to add a button to the page that saves or uploads your note, or does whatever you want. For this to work, you need to make sure 'extensions.greasemonkey.dataIsGreaseable' is set to true in about:config.

over 1 year ago ·

This is just awesome. Loved it :)

over 1 year ago ·

This is beautiful.

over 1 year ago ·

Lot of great use, can drag pictures into the contenteditable. Here is a texteditor with a regular expression textfilter and headless popout of the textareas value. Type !html then press enter. Could add more buttons and macros, I tried to keep the amount of chars down for mobile passwordmanager limits. For FireFox or mobiles with data: protocol scheme.

data:text/html, <html><style>html,body{height:100%;width:100%;margin:0;border:none;}textarea{height:80%;width:inherit;background:black;color:white;font-family:courier;}</style><textarea id="ta" name="ta" onkeyup="get('ta')" onkeydown="get('ta')" onblur="x=this.value"></textarea><br><button onclick="blx()">TEST</button><script>function blx(){myWindow = window.open("about:blank","myWindow1","height=550 width=1000");myWindow.document.write(x);}</script><script>function get(e){var tax = document.getElementById(e);var rgx = /!html\n/gi;tax.value = tax.value.replace(rgx,'<!DOCTYPE html>\n<html>\n <head></head>\n<body>\n\n</body>\n</html>');}</script></html>

over 1 year ago ·

It was very good. Thank you.

over 1 year ago ·

Thanks

over 1 year ago ·

How about, instead of using LocalStorage to keep the same copy open, adding the ability to e-mail the notes to yourself? This is a little better if you don't want to just keep the same notes open all the time.

Here's my version. I'm a little biased, but I think it's the best. Make sure to change your e-mail address in the snippet from email@example.com to whatever your personal address is.

data:text/html;charset=utf-8,<title>In-Browser Text Editor</title><style>body%7Bbackground%3A%23123%3Bcolor%3A%23333%3Bpadding%3A20px%3Bmargin%3A0%2520auto%3Bwidth%3A90%25%7Dtextarea%7Bbackground%3A%23fbfbfb%3Bborder%3A0%3Bcolor%3A%23333%3Bfont-family%3Asans-serif%3Bfont-size%3A2rem%3Bheight%3A98%25%3Bline-height%3A1.4%3Bmargin%3A0%2520auto%3Boutline%3A0%3Bpadding%3A4rem%3Bwidth%3A100%25%7Dbutton%7Bbackground-color%3A%23fbfbfb%3Bborder%3A1px%2520%23ccc%2520solid%3Bcolor%3A%23999%3Bcursor%3Apointer%3Bfloat%3Aright%3Bmargin%3A10px%25200%3Bpadding%3A5px%252010px%7D%40media%2520%28max-width%3A768px%29%7Bbody%7Bwidth%3A100%25%3Bpadding%3A0%7Dtextarea%7Bpadding%3A10px%7Dbutton%7Bfloat%3Anone%7D%7D</style><body><button%20onclick="sM();%20return%20false">Email%20this</button><textarea%20contenteditable%20id=TE%20spellcheck=false%20placeholder=Write...%20autofocus></textarea><script>function%20sM(){var d=new Date();var t=d.toDateString()+' '+d.toLocaleTimeString();var%20a="mailto:email@example.com?subject="+escape("In-browser%20Notes " + t)+"&body="+escape(document.getElementById("TE").value);window.location.href=a};var d=new Date();var t=d.toDateString()+' '+d.toLocaleTimeString();var x = document.getElementById("TE"); x.innerHTML=t+'\n\n';</script>
over 1 year ago ·

This method is good for fun but not practical. Better install this chrome extension https://chrome.google.com/webstore/detail/tabnotes/omgomlnnfccahaaicaphjjgkjplfkjai

over 1 year ago ·

Hello, I would likee to change the entire background color of my content editable page data:text/html, <html contenteditable> to grey. How can i do it? Hope you can help me. Best regards

over 1 year ago ·

Nice, I tweaked it to: data:text/html, <html style="font:200% monospace" contenteditable> for a more readable sized font in monospace. I usually just use notepad++ for my random notes throughout the day and keep my workspace in VS Code, but this might be conditionally useful as well.

over 1 year ago ·

Modified someone else's work and fixed a few errors and changed it to be in monospace (for code notes) for a nicer looking notepad with ability to email the notes:

data:text/html;charset=utf-8,<title>Notepad</title><style>body%7Bbackground%3A%23123%3Bcolor%3A%23333%3Bpadding%3A20px%3Bmargin%3A0%25 auto%3Bwidth%3A90%25%7Dtextarea%7Bbackground%3A%23fbfbfb%3Bborder%3A0%3Bcolor%3A%23333%3Bfont-family%3Amonospace%3Bfont-size%3A2rem%3Bheight%3A96%25%3Bline-height%3A1.4%3Bmargin%3A0%25 auto%3Boutline%3A0%3Bpadding%3A4rem%3Bwidth%3A100%25%7Dbutton%7Bbackground%3A%23fbfbfb%3Bborder%3A1px %23ccc solid%3Bcolor%3A%23123%3Bcursor%3Apointer%3Bfont-family%3Amonospace%3Bfloat%3Aright%3Bletter-spacing%3A.1ch%3Bpadding%3A5px 10px%7D%23dateline%7Bcolor%3A%23fff%3B%7D</style><body><button onclick="sendMail();return false">Email this</button><div id="dateline"></div><textarea contenteditable id=TE spellcheck=true placeholder=Write... autofocus></textarea><script>function sendMail(){var d=new Date();var t=d.toDateString()+' '+d.toLocaleTimeString();var a="mailto:email@example.com?subject="+escape("Browser Notes " + t)+"&body="+escape(document.getElementById("dateline").value);window.location.href=a};var d=new Date();var t=d.toDateString();document.getElementById("dateline").innerHTML=t+'\n\n';</script>

Change your browsers default monosapce font to whatever your favorite is.

over 1 year ago ·

Firefox: Won't save the typed in text any longer, just the tag. I paused using this for a few months, used it a lot before. Today I tried to save and it would only save the tag. Tried it in Vivaldi and it still works like I remember.
Really dig the simplicity.

over 1 year ago ·

That's cool, thank you very much

over 1 year ago ·

Simple & working - that was something I was looking for! Thanks!

over 1 year ago ·