How to convert a web browser into a text editor
This little known trick is one of my favorites (see section Use a Web Browser as a Notepad). It is so simple and yet so powerful that I hope you too are going to love it.
Presentations are all about making an impression, and surely, your audience will appreciate it.
It works in the most modern web browsers such as Firefox, Chrome, Opera, and Safari. It does not work in Internet Explorer browser, thanks to Microsoft.
This is possible because of HTML5’s contentEditable attribute and the browsers’ ability to handle data URL.
Here is how it works.
Open your web browser (I am using Firefox in the examples below) or a new tab in your browser and type or copy & paste the following string in the URL field:
data:text/html,<html contentEditable>
Hit Enter. Then click anywhere in the browser body. Your browser has just turned into a Notepad. You can now type anything in it:
Instead of typing or copying the above code into the URL filed, I prefer to bookmark it so it is available every time I need to use this feature. In this case, I suggest the following line to be placed in the URL field:
data:text/html,<html contenteditable><title>Notepad</title>
This default web browser editor doesn't look pretty, does it? However, you can modify it to look better. You can use HTML tags and apply CSS styles to font (style, size, and color), margins, paddings, background and other CSS style attributes. For example, try the following line of code that is a slight variation from my SAS blog post:
data:text/html,<textarea style="width:100%; height:100%; padding:20px; font-size:1.5em; font-family: arial; color:darkblue; border:none; border-left: 10px solid lightblue; margin-left: 30px;" autofocus/>
Now your browser-notepad looks much better:
This web browser editor is very convenient in presentations when you switch between presenting a website in one tab to another tab where you can type your notes, questions or answers for your audience and anything you like.
To use your web browser as a notepad, however, you don't even have to be connected to the Internet...
Blog Home
Comments
Is it possible, and if yes, how to do it, to paste an already existing html file into the browser-turned-notepad, delete as wished some pictures in the html file and save the resulting file as html? Thanks in advance for your counsel. Walter De Haes
Hi Walter, it is possible. You can open your HTML file in a browser, then right click on the opened webpage and select View Page Source - your HTML code will open in another tab (or window) of your browser. Then you can Select All (Ctrl-A), then Copy (Ctrl-C). Then go to your browser-turned-notepad tab and Paste it there (Ctrl-V). After that you can edit your HTML code as needed, and then Save it going to the Menu and selecting Save Page As...
Hope this helps.
How do I make it secure?
Disconnect from the Internet.