Menggabungkan Plugin Text Editor Tiny MCE dan Ajax File Manager


Berikut kombinasi antara Plugin text editor tiny mce dan ajax file manager. sedikit penjelasan apa itu Tiny MCE?

TinyMCE merupakan salah satu solusi WYSIWYG(What You See It Will You Get) yang banyak dipakai pada sebagain website. atau bisa dikatakan Tiny MCE adalah sebuah Plugin untuk text area yang berbasis java script dan bersifat Opensource dibawah GPL lisensi. sedangkan ajax file manager adalah Plugin tambahan untuk menambah kekurangan dari TIny MCE dari segi upload gambar. karna Tiny MCE tida menyertakan Fasilitas Upload Gambar di Product free nya. untuk mengakali hal tersebut maka bisa dikombinasi dengan ajax file manager yang merupakan product free karna bersifat opensource, tapi perlu digaris bawahi karna Free bukan berarti murahan atau jelek tapi justru cenderung mengagumkan. jadi silahkan dicoba, ini file pada index.php nya.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combine TinyMCE dan AjaxFilemanager</title>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "elm2",
theme : "advanced",
plugins : "advimage,advlink,media,contextmenu",
theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,separator,",
theme_advanced_buttons3_add_before : "",
theme_advanced_buttons3_add : "media",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "hr[class|width|size|noshade]",
file_browser_callback : "ajaxfilemanager",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});

function ajaxfilemanager(field_name, url, type, win) {
var ajaxfilemanagerurl = “../../../../jscripts/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php”;
var view = ‘detail’;
switch (type) {
case “image”:
view = ‘thumbnail’;
break;
case “media”:
break;
case “flash”:
break;
case “file”:
break;
default:
return false;
}
tinyMCE.activeEditor.windowManager.open({
url: “../../../../jscripts/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php?view=” + view,
width: 600,
height: 440,
inline : “yes”,
close_previous : “no”
},{
window : win,
input : field_name
});

return false;
var fileBrowserWindow = new Array();
fileBrowserWindow[“file”] = ajaxfilemanagerurl;
fileBrowserWindow[“title”] = “Ajax File Manager”;
fileBrowserWindow[“width”] = “600”;
fileBrowserWindow[“height”] = “440”;
fileBrowserWindow[“close_previous”] = “no”;
tinyMCE.openWindow(fileBrowserWindow, {
window : win,
input : field_name,
resizable : “yes”,
inline : “yes”,
editor_id : tinyMCE.getWindowArg(“editor_id”)
});

return false;
}
</script>
<!– /TinyMCE –>
</head>
<body>

<form method=”post” action=””>
Judul : <input type=”text” name=”judul” size=”50″><br /><br />
Isi Berita : <br />
<textarea id=”elm2″ name=”isi” >
</textarea>
<br />
<input type=”submit” name=”simpan” value=”Simpan” />
<input type=”reset” name=”batal” value=”Batal” />
</form>
</body>
</html>

dan bisa download file lengkapnya disini

atau mau download  Tiny MCE dan Ajax File Manager


4 thoughts on “Menggabungkan Plugin Text Editor Tiny MCE dan Ajax File Manager

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s