Selamat Datang

Menjadikan Browser Sebagai Text Editor

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

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

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

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

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

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

Salam Web Design & Development Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

12 thoughts on “Menjadikan Browser Sebagai Text Editor

  1. Keren gan…

    Ane baru tahu.

  2. keren-keren, baru tau beneran nih :D

  3. keren sih cuma kan ga memadai fitur nya

  4. Agus Salim says:

    Keren pisan eui… hehe,

  5. keren gan,, ijin share ke temen ane ya gan..

  6. invetClinic says:

    waw, mantep gan, kalo script buat browser supaya bisa dual screen di satu window tau ga ?

  7. Iant says:

    Keren nih tutorial’a :like

  8. dani says:

    Kerennn om …. ijin minta ilmunya …
    Sangat bermanfaat om …
    Boleh d share ?

  9. Anddrie says:

    waw, tutorial yg keren bos :D

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development