It is a very simple trick. Just follow these steps.
1) Open a browser, any browser like a Chrome or Firefox
2) Copy the below string and paste it in the URL or the address bar or your browser, and hit the Enter key.
data:text/html, <html contenteditable>
3) Set focus on the blank page and type what ever you want.
Note: This feature is also available for mobile browsers.
You can save what every you have typed on the page as an HTML file. To save the text that you typed, press Ctrl+s keys and choose a location to save the file.
It uses the Data URI’s format, which tells the browser to create an HTML page and it should be editable. Usually, a browser page is not editable for obvious reasons. It does not allow users to edit or change the contents of a page.
You can try a simple example by typing the below text on your browser’s address bar.
data:text/html, 'Hello World'
Looks good? You have created your first HTML page, in case you are not a programmer or a web designer. This will show the Hello World message on your browser.
To make a browser page editable, it uses an HTML5 feature called the contenteditable. It is an HTML attribute, that allow users to edit the contents inside an element.
HTML5 Semantic elements and its usage
You can experiment with other elements too. Usually the DIV element is used as a container to hold other elements in a group. We will transform the DIV element into a textarea or a notepad with a set of properties like setting its width and height and giving it a border.
Copy the below line and paste it in your browser URL or address bar and hit the enter key.
data:text/html, <div contenteditable style="width:500px; height:500px; border:3px dashed gray;">
Cool. We have not only made the DIV editable, but it has a width and height of 500px each. In addition, it has a border so you know where to start typing.
Save contents in a text file
Now, let’s take it to the next level.
This example can be very useful. As I have mentioned, you can save the contents of the browser notepad in an HTML format (link above). In addition, it allows you to save the contents in a .txt format using JavaScript and jQuery.
I will use the traditional BLOB (Binary Large Object) format to save the file in the local disk.
We are nowhere close to making a full-fledged browser editor, but this is definitely the first step towards achieving it.
In the example here, I'll use the DIV element and make it editable by using the contenteditable attribute. Adding a button on the top of the browser’s page will allow us to save the contents of the page in the local disk.
The attribute contenteditable is a Boolean type and accepts three different types of parameters.
01) contenteditable = "true"
Setting it to “true” will make it editable.
e.g.: <div contenteditable></div> or <div contenteditable></div>
02) contenteditable = "false"
Don’t want to allow any changes to elements contents, set it as false.
e.g.: <div contenteditable="false"></div>
03) contenteditable = "inherit"
True or false depends of the value of its immediate parent element.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 "contenteditable"</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body {
font:normal normal 16px/1.4 arial;
}
:focus {outline:0;}
div {
width:100%;
height:90%;
color:#333;
margin:20px 0;
}
ul {
list-style:none;
padding:0;
margin:0;
display:inline-block;
}
ul li {
float:left;
padding:0 10px;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li><input type="button" id="btSave" value="Save Text to File" /></li>
</ul>
<div contenteditable></div>
</body>
<script>
$(document).ready(function() {
$('div').focus();
$('#btSave').click(function() {
if ($('div').text() != '')
saveFile($('div').text());
else
alert('No notes to save');
});
});
// USING BLOB (BINARY LARGE OBJECT) TO SAVE THE TEXT.
function saveFile(Value) {
// CONVERT THE TEXT TO A BLOB.
var textToBLOB = new Blob([Value], { type: 'text/plain' });
var sFileName = 'myFile.txt'; // THE FILE IN WHICH THE CONTENTS WILL BE SAVED.
var newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
</script>
</html>>Also note that when an element is set as contenteditable = true, all child elements inside it will also become editable. In any case, if you do not want the child elements to be editable, then you have explicitly set them as false.
<div contenteditable>
Text inside DIV is editable.
<p style="border:solid 1px"> Inside paragraph </p>
</div>The DIV element in the above example, has been set as editable and see that it has a paragraph element <p> </p> as child and it too has become editable. If you do not want the paragraph to be editable then set it as false explicitly.
<p style="border:solid 1px" contenteditable="false">Inside paragraph</p>The browser’s URL or the address bar is not meant to be filled with HTML, CSS and JavaScript, but a little script like the one shown in the beginning, can at least give you the ability to transform your browser into an editor. However, to create an editor, you need to add many more features along with the HTML5 attributes.
There is one visible benefit we can see is that users can leave there remarks and views or even report a bug or error from any section of the webpage. It is a widely used feature in CMS (Content Management System) websites in general. These websites allow its users to edit the content of its pages.