karena trit yang kemaren dah hilang dari
ok kali ini mau share ttg HTML editor kayak W3S, dah tau kan?
ni simple kalau di w3 harus klik button kalau ni langsung keliatan hasilnya atau lebih di kenal dengan sebutan WSIGWIG
kalau salahpertama butuh library Jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
pakai yang v1.5 oke atau yang lebih tingii sekarang dah versi <style type="text/css">
body {
background-color: #818176;
color: #fff;
font-family: Arial, Tahoma, Arial, sans-serif;
}
/*footer, header, nav, section, aside {
background-color: #98988A;
padding: 5px;
margin: 5px 0;
}
article {
background-color: #5A5A5A;
padding: 5px;
margin: 5px 0;
} */
h1.introHeader {
font-family: 'Noticia Text', serif;
font-size: 120%;
padding-left: 15px;
}
a:link, a:visited {
color: #24c2de;
}
a:hover {
color: #fff;
}
a:active {
color: #de2452;}
</style>
gak usah di jelasin pasti dah pada tau
kemudian Javascript<script type="text/javascript">
$(function()
{
var code = $(window.opener.document).find("#" + window.location.hash.slice(1)).html().replace(/<br>/g, "\n").replace(/<\/?span.*?>/g, "").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
//var code = $(window.opener.document).find("#" + window.location.hash.slice(1)).text();
//$(window.opener.document).find("#" + window.location.hash.slice(1)).html()
$("#txtTest").text(code);
UpdatePreview();
});
function UpdatePreview()
{
$("#divTest").empty().html($("#txtTest").val());
}
</script>
fungsi ni yang urgen
Code:
function UpdatePreview()
{
$("#divTest").empty().html($("#txtTest").val());
} [/spoiler]
mengambil kode html di id textarea txtTest kemudian di simpan di id div divTest dan di tampilkan di html
Code:[spoiler] <div id="divTest" ...>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr style="background-color: #27d4f2;">
<td><h1 class="introHeader">Live Preview Editor</h1></td>
<td><h1 class="introHeader">Your Result</h1></td>
</tr>
<tr>
<td><textarea id="txtTest" cols="6" rows="5" style="width: 440px; height: 450px; float: left; margin-top:15px;" onchange="UpdatePreview();" onkeyup="UpdatePreview();"></textarea></td>
<td valign="top"><div id="divTest" style="float: left; width: 440px; margin: 15px 0 0 20px;"></div></td>
</tr>
</table>
<p>Edit the code above and see a live preview of your changes</p>
</body>
<textarea id="txtTest" cols="6" rows="5" style="width: 440px; height: 450px; float: left; margin-top:15px;" onchange="UpdatePreview();" onkeyup="UpdatePreview();"></textarea>
setiap ada perubahan di textarea lihat
onchange="UpdatePreview();"
maka langsung ti tampilkan ke id div
kalau
onkeyup="UpdatePreview();"
setiap kita berhenti melakukan pengetikan, lakukan perintah onCgane tadi
<div id="divTest" style="float: left; width: 440px; margin: 15px 0 0 20px;"></div>
ini yang tadi nampilkan hasil perubahan dari textarea
DEMO
Refrensi :
- jquery.com
- http://www.w3schools.com/jsref/event_onkeyup.asp
- lupa
<div id="divTest" style="float: left; width: 440px; margin: 15px 0 0 20px;"></div>