Menjadikan browser sebagai text editor..

Beranda

...

Website, Webmaster, Webdeveloper
Menjadikan browser sebagai text editor..

aiwatia

22-07-2013 09:09

Menjadikan browser sebagai text editor..

Ane mau sedikit membagikan sesuatu...

Spoiler for Buka:

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

Spoiler for 1. Editor Standar:

Quote:

1
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.

Spoiler for Contoh 2 : Seperti Notepad:

Dengan ini kita bisa menambahkan Teks awalannya.

Quote:

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>

Spoiler for Contoh 3 : seperti Sublime Text:

Quote:

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>[removed][removed][removed]var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");[removed]

Spoiler for 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.
http://www.tutorial-webdesign.com/wp...tes-editor.png

Quote:

data:text/html;charset=utf-8, <title>TextEditor</title>
2

3
<style>
4
body {
5
background: -webkit-linear-gradient(#f0f0f0, #fff);
6
padding: 3%;
7
height: 94%;
8

9
}
10

11
.paper {
12
font: normal 14px "Lucida Grande", arial, sans-serif;
13
width: 50%;
14
height: 80%;
15
margin: 0 auto;
16
padding: 6px 5px 4px 42px;
17
position: relative;
18
color: #444;
19
line-height: 20px;
20
border: 1px solid #d2d2d2;
21
background: #fff;
22
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
23
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
24
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
25
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
26
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
27
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
28
-webkit-background-size: 100% 20px;
29
-moz-background-size: 100% 20px;
30
-ms-background-size: 100% 20px;
31
-o-background-size: 100% 20px;
32
background-size: 100% 20px;
33
-webkit-border-radius: 3px;
34
-moz-border-radius: 3px;
35
border-radius: 3px;
36
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
37
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
38
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
39
}
40

41
.paper::before {
42
content: '';
43
position: absolute;
44
width: 4px;
45
top: 0;
46
left: 30px;
47
bottom: 0;
48
border: 1px solid;
49
border-color: transparent #efe4e4;
50
}
51

52
textarea {
53
display: block;
54
width:94%;
55
margin:0 auto;
56
padding:3.8% 3%;
57
border: none;
58
outline: none;
59
height: 94%;
60
background: transparent;
61
line-height: 20px;
62
}"><h1>Text Editor</h1>
63
</style>
64

65
<link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/>
66

67
<body>

Spoiler for 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>[removed][removed][removed]var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");[removed]

Spoiler for Contoh 6 : Animasi transisi warna ketika mengetik kode:

http://www.tutorial-webdesign.com/wp...red-editor.png

Quote:

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>[removed]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)}}[removed]</head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

Spoiler for Contoh 7 : Notes lebih rapih:

http://www.tutorial-webdesign.com/wp...tes-editor.png

Quote:

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

Sumber

Quote:

Kalo berkenan tolong di emoticon-Rate 5 Star