Membuat Rich Text Editor (Compose box seperti di Blogspot) dengan Javascript dan HTML

Setelah Bertahun2 Mengembara mencari hmmm........ akhirnya nemu juga di situs tetangga yang lagi iseng, tapi isengnya bagus lho...

Idenya si gini, q kan pengen buat form yang kayak di blogspot itu loh... yang di buat Ponting artikel.
kan disitu kita bisa input text n' gambar. Nah itu yang namanya Rich Text Editor.

Memang sih ada aplikasi yang langsung plug n play. Tapi kita kan gak tau sistem kerjanya oleh karena itu lebih baik kita buat sendiri itung2 nambah ilmu.

Oke langsung saja...
berikut script untuk pembuatan Rich Text Editor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript">
 function iFrameOn(){
richTextField.document.designMode="On";
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size=prompt('Enter a size 1 - 7','');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color=prompt('Type a basic color or hexadecimal you wont to aplly:','');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand('insertunorderedlist',false,"newUL");
}
function iOrderedList(){
richTextField.document.execCommand('insertorderedlist',false,"newOL");
}
function iLink(){
var linkURL=prompt("Insert a link:","http://");
richTextField.document.execCommand('Createlink',false,linkURL);
}
function iUnlink(){
richTextField.document.execCommand('Unlink',false,null);
}
function iImage(){
var imgSrc = prompt('Insert a image link/location:','');
if(imgSrc !=null){
richTextField.document.execCommand('insertimage',false,imgSrc);
}
}
function submit_form(){
var theForm = document.getElementById("myform");
theForm.elements["textEditor"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
function iCodeView(){
var html = prompt('HTML?');
richTextfield.document.execCommand('inserthtml',false,html);
}

  </script>
 </HEAD>
 <body onload="iFrameOn();" bgcolor="#6600CC" text="#EEEEEE">
<form action="" method="post" name="myform" id="myform">
  <p>
    <strong>Title:</strong><br>
    <input type="text" name="title" id="title" size='110%'>
  </p>
  <p><strong>Content:</strong><br>
</p><div id="wysiwyg_cp" style="padding:8px; width:700px">
<input type="button" onclick="iBold()" value="B">
    <input type="button" onclick="iUnderline()" value="U">
    <input type="button" onclick="iItalic()" value="I">
    <input type="button" onclick="iFontSize()" value="Font Size">
    <input type="button" onclick="iForeColor()" value="Font Color">
    <input type="button" onclick="iHorizontalRule()" value="HR">
    <input type="button" onclick="iUnorderedList()" value="UL">
    <input type="button" onclick="iOrderedList()" value="OL">
    <input type="button" onclick="iLink()" value="Link">
    <input type="button" onclick="iUnlink()" value="Unlink">
    <input type="button" onclick="iImage()" value="Image">
    <input type="button" onclick="iCodeView" value="View Code">
</div>


    <textarea style="display:none" name="textEditor" id="textEditor" cols="80" rows="15"></textarea>
<iframe name="richTextField" id="richTextField" style="border:1 #000000 1px solid; width:700px; height:300px; background-color:#FFFFFF;"></iframe>
  <p></p>
    <br>
    <input type="button" name="myBtn" id="myBtn" value="Preview" onclick="javascript:submit_form();">
</form>
 </BODY>
</HTML>
</MAP>


Klu script dijalankan akan seperti ini :



Penjelasan :

}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}

Perintah diatas digunakan untuk membuat tulisan tebal atau fungsinya sama dengan Bold pada penulisan HTML.

sedangkan ini adalah tombolnya
<input type="button" onclick="iBold()" value="B">

jadi kalau tombol ini di klik maka tulisan akan menjadi tebal.
untuk perintah lain adalah sbb :
iUnderline=Garis Bawah, iItalic=Tulisan Miring, iLink=Memasukkan link, iImage=Memasukkan Gambar dsb.

Sumber : http://hatakeizawa.blogspot.com/2012/06/membuat-rich-text-editor-compose-box.html



Related Search