Menjadikan web browser sebagai editor seperti notepad
rasanya tidak mungkin bisa, tapi nyatanya kita bisa menggunakan Browser
yang kita miliki agar bisa menjadi sebuah teks editor untuk membuat
catatan, atau membuat file html.
Ini dapat digunakan untuk membuat catatan dengan cepat, biasanya dari
pada membuka-buka notepad lebih mudah jika kita tinggal klik link
bookmark yang sudah kita buat.
Kembali ke topik utama, menjadikan Web Browser seperti mozilla atau
chrome sebagai editor dapat kita lakukan dengan menuliskan script
singkat berikut di Address bar.
Tips:
- Untuk mencoba tinggal Copy Paste kode ke Address Bar di Browser
- Simpan di bookmark agar mudah di klik dengan cepat
- Gunakan Google Chrome Untuk Mencoba
Artikel Sejenis
Contoh 1 : Editor Standar
data:text/html, <html contenteditable>
Copy Paste script diatas ke Address Bar di browser kamu, Setelah itu
cobalah mengetik di halaman kosong yang terbentuk, anda bisa melakukan
penyimpanan dari apa yang diketik dengan menekan
CTRL+S atau Menu
File->Save
Mengubah Tampilan Editor.
Ternyata tampilan editor di browsernya pun kita bisa ubah, kita bisa
membuatnya mirip dengan notepad, sublime-text dan bahkan bisa kita buat
seperti kertas untuk menulis diary.
Contoh 2 : Seperti Notepad
Dengan ini kita bisa menambahkan Teks awalannya.
data:text/html, <html contenteditable><style>body {color: #333; width: 960px; margin: 0 auto; display: block; height: 100%; font-size: 36px; padding: 20px;}</style></html>
#TWDNotes:
Contoh 3 : seperti Sublime Text
Sublime Text di Browser
data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>
Contoh 4 : Diary / Text Notes
Seperti kita sebutkan tadi, kita bisa membuat seolah seperti kertas
diary yang siap untuk ditulis, silahkan copy paste script berikut ke URL
Address di browser.
Bergaya diary / notes
data:text/html;charset=utf-8, <title>TextEditor</title>
<style>
body {
background: -webkit-linear-gradient(#f0f0f0, #fff);
padding: 3%;
height: 94%;
}
.paper {
font: normal 14px "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;
}"><h1>Text Editor</h1>
</style>
<link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/>
<body OnLoad='document.body.focus();' contenteditable spellcheck="true" class="paper" >
Contoh 5 : Mirip Ruby Editor
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
Contoh 6 : Animasi transisi warna ketika mengetik kode
Background Merah
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;">
Contoh 7 : Agar kursor langsung fokus
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
Contoh 8 : Ditambah Placeholder
Ditambah Placeholder
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="TWD Editor..." />
Contoh 9 : Bisa diberi title
Agar ketika di bookmark ada judul yang bagus, kita bisa tambahkan tag
title
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;">
Contoh 10 : Dengan Merubah Font agar lebih keren
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>TWD Editor</h1><p>Start Here.
Contoh 11 : Kita juga bisa membuat file HTML
Tinggal jalankan, lalu bookmark, untuk mengetik tinggal arahkan kursor
Editor.html |
Demo
<!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>
Contoh 12 : Notes lebih rapih
Bergaya diary / notes
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>
Oke sekian trik menarik ini, sebagai catatan, untuk menjalankannya
anda cukup melakukan copy paste kode-kode diatas ke Address bar di
browser kamu, Disarankan Menggunakan Google Chrome
About the Author
0Awesome Comments!