Iso Web Id Tutorial Komputer
Related Articles
Pada Website yang dinamis sering dituntut untuk mengupdate dan mengedit File yg berisi artikel atau sebuah berita secara cepat. ketika baru pertama kali belajar membikin website kode yg pertama kali dipakai adalah textarea untuk menginput artikel dan Edit artikel. ternyata untuk mengatur fariasi tulisan agak mengalami kesulitan, karena harus menyisipkan script HTML untuk mengubah besar dan jenis tulisan, serta menginput gambar dalam artikel.
Setelah Churhat dengan kawan-kawan ternyata ada solusi yg jitu, yaitu dengan menyediakan sebuah editor WYSIWYG (What You See Is What You Get) dalam interface penginputan dan pengeditan berita or artikel di Website kita. Dengan Editor Wysiwyg, temen-temen yang hendak mengisi berita akan disediakan form yang dilengkapi berbagai toolbar untuk memudahkan melakukan pengaturan teks serta paragraf, sampai menginput image ke dalam teks. Di dalam wysiwyg setiap melakukan pengaturan, pengeditan secara otomatis akan menambahkan atau mengurangi kode HTML di balik layar dan yang ditampilkan kepada teman-teman ialah hasil pengaturan yang berformat Rich Text Format (RTF) atau mendekati preview tampilannya dalam halaman website.
Selanjutnya dalam penerapan Wysiwyg Editor pada Website yang Pertama dilakukan adalah mendownload OpenWysiwyg di http://www.openwebware.com/download.shtml
Setelah mendownload OpenWysiwyg, silahkan extract file OpenWysiwyg.zip ke folder Website yang akan kita buat.
Kedua masukkan scritp HTML dibawah ini di antara <head></head>
<head><title>openWYSIWYG</title><!-- Include the WYSIWYG javascript files --><script type="text/javascript" src="scripts/wysiwyg.js"></script><script type="text/javascript" src="scripts/wysiwyg-settings.js"></script><!-- Attach the editor on the textareas --><script type="text/javascript">//Use it to attach the editor to all textareas with full featured setup//WYSIWYG.attach('textarea1', full); // full featured setup// Use it to attach the editor directly to a defined textareaWYSIWYG.attach('textarea1'); // default setup</script></head>
Rubahlah script yg SRC yang berwarna merah sesuai dengan path foldernya.
setelah itu buat script <textarea></textarea>nya
<form action=”” method=”post”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”1″ align=”center”>
<tr>
<td align=”left”>Judul</td>
<td align=”left”>:</td>
<td align=”left”><input type=”text” name=”a_judul” size=”50″ maxlength=”100″></td>
</tr>
<tr>
<td align=”left”>Isi</td>
<td align=”left”>:</td>
<td align=”left”><textarea id=”textarea1” name=”a_isi” cols=”60″ rows=”10″></textarea></td>
</tr>
<tr>
<td align=”left” colspan=”3″>
<input type=”submit” value=”Submit”>
</form>
setelah memasukkan script diatas, maka akan menghasikan tampilan seperti berikut ini :
jika gambar toolbar diatas tidak kelihatan, maka yang harus dilakukan adalah mengubah path image pada file wysiwyg.js di Folder Script. Seperti script berikut:
var WYSIWYG = {
/**
* Settings class, holds all customizeable properties
*/
Settings: function() {
// Images Directory
this.ImagesDir = “images/”;
// Popups Directory
this.PopupsDir = “popups/”;
// CSS Directory File
this.CSSFile = “styles/wysiwyg.css”;
// Default WYSIWYG width and height (use px or %)
this.Width = “500px”;
this.Height = “200px”;
menjadi script seperti dibawah ini :
var WYSIWYG = {
/**
* Settings class, holds all customizeable properties
*/
Settings: function() {
// Images Directory
this.ImagesDir = “openwysiwyg/images/”; //sesuaikan dgn nama foldernya
// Popups Directory
this.PopupsDir = ” openwysiwyg/popups/”; //sesuaikan dgn nama foldernya
// CSS Directory File
this.CSSFile=“openwysiwyg/styles/wysiwyg.css”;//sesuaikan nm foldernya
// Default WYSIWYG width and height (use px or %)
this.Width = “500px”;
this.Height = “200px”;
setelah itu merubah script diatas selanjutnya merubah Path Addons pada file wysiwyg-setting.js masih di Folder script.
// openImageLibrary addon implementation
full.ImagePopupFile = “openwysiwyg/addons/imagelibrary/insert_image.php”;
full.ImagePopupWidth = 600;
full.ImagePopupHeight = 245;
langkah selanjutnya merubah script path SRC yg berfungsi untuk menampilkan gambar pada file conifg.inc.php di Folder addon/imagelibrary/ seperti script dibawah ini :
$imagebaseurl = ‘openwysiwyg/uploads’;
—————————————————-
Untuk sementara OpenWysiwyg pada Browser Chrome tidak bekerja
————————————————————————end >>
oke… selamat mencoba …
