Membuat Modul Editor dengan 4 Pilihan Editor Dinamis di CMS Lokomedia

Sekarang komunitas cms Lokomedia sudah sangat populer, apalagi dengan source code yang open source, memudahkan para anggota komunitas lokomedia untuk membantu mengembangkan lagi cms lokomedia ini, kali ini saya juga ingin belajar untuk membuat modul baru, dan supaya para pengguna lokomedia lain yang masih baru dalam pemprograman web seperti saya dapat mempelajari cara membuat modul baru.

Plugin editor yang banyak digunakan saat ini adalah tinymcpuk, termasuk saya juga menggunakannya, kali ini saya ingin berbagi teknik sederhana agar bisa gonta ganti editor standar cms lokomedia, konsep yang saya gunakan adalah sama dengan teknik gonta ganti template, hanya sedikit modifikasi ternyata juga bisa buat editor.

--iklan--

Sebelum tutorial ini kita bahas, ada baiknya kita liat hasilnya dulu, biar kawan-kawan jadi tau maksudnya dari tutorial ini. pertama-tama kita liat tampilan dari modul editor yang akan kita buat , yaitu seperti gambar berikut :

kalau kita mengaktifkan editor tinyMCEPUK, maka hasil editornya akan tampil seperti gambar dibawah ini :

Yang ini kalau mengaktifkan editor tinyMCE standard maka hasilnya seperti gambar dibawah ini :

kalau kita aktifkan editor tinyMCE simple, maka hasilnya seperti gambar dibawah ini :

dan kalau kita memilih editor biasa, tampilannya seperti gambar dibawah ini :

kalau yang terakhir ini cuman textarea biasa, tapi terkadang perlu kalau koneksi kita memang benar-bernar lemot, dan juga bisa untuk edit code tmlnya secara manual.

Cukup sudah basa basinya, kali ini kita langsung saja membuat Modul Baru untuk CMS kita dengan nama module "Editor". Pertama kita mulai dari modul editornya, silahkan download filenya klik disini. kemudian extract filenya di folder "Modul" (ex. di komputerkampus.com / adminweb / modul) dan kemudian bikin dulu databasenya di phpmyadmin, setelah itu klik tab SQL, agar bisa menjalankan perintah SQL di phpmyadmin. copykan code berikut :

CREATE TABLE `dblokomedia`.`editor` (
`id_editor` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`judul_editor` VARCHAR( 100 ) NOT NULL ,
`nama_editor` VARCHAR( 100 ) NOT NULL ,
`aktif` ENUM( 'Y', 'N' ) NOT NULL
) ENGINE = MYISAM ;
INSERT INTO `editor` (`id_editor`, `judul_editor`, `nama_editor`, `aktif`)
VALUES
(1, 'tiniMCEPUK', 'tinymcepuk', 'Y'),
(2, 'tiniMCE Standard', 'tinymce1', 'N'),
(3, 'tiniMCE Simpel', 'tinymce2', 'N'),
(4, 'Editor Biasa', 'najcaedit', 'N');

setelah itu kita modifikasi bagian "content.php" (ex. di komputerkampus.com/adminweb/content.php) tambahkan code berikut setelah bagian sekilas info atau terserah anda untuk menyesuaikannya.

--iklan--

// Bagian Script Editor di CMS Lokomedia
elseif ($_GET ['module']=='editor'){
  //tambahkan script berikut 
  if ($_SESSION ['leveluser' ]=='admin'){
     include "modul/mod_editor/editor.php";
  }
}

kemudian supaya menu editornya tampil di modul cms lokomedia, bikin dulu module editor di "Manajemen Modul" kemudian pilih "Tambah Modul" setelah itu isi seperti di bawah ini.

Nama Modul = editor
Link = ?module=editor
Publish = Y
Aktif = Y
Status = Admin

Setelah itu sebelum anda mengklik menu editor tadi, modifikasi lagi sedikit file "media.php" (ex di komputerkampus.com / adminweb / media.php) setelah itu ganti file dari script berikut setelah bagian title dan sampai script src untuk css style :

<script language="javascript" type="text/javascript">
tinyMCE_GZ.init({
plugins : 'style,layer,table,save,advhr,advimage, ...',
themes  : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script language="javascript" type="text/javascript" src="../tinymcpuk/tiny_mce_src.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,youtube,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,youtube",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade]",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
apply_source_formatting : true,
languages :'en',
disk_cache : true,
debug : false  
});
function fileBrowserCallBack(field_name, url, type, win) {
var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
var enableAutoTypeSelection = true;
var cType;
tinymcpuk_field = field_name;
tinymcpuk = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":
cType = "Flash";
break;
case "file":
cType = "File";
break;
}
if (enableAutoTypeSelection && cType) {
connector += "&Type=" + cType;
}
window.open(connector, "tinymcpuk", "modal,width=600,height=400");
}
</script>

ganti dengan script berikut sebagai pengganti script di atas.

<?php
include "../config/koneksi.php";
$pilih_editor=mysql_query("SELECT nama_editor FROM editor WHERE aktif='Y'");
$f=mysql_fetch_array($pilih_editor);
if($f['nama_editor']=='tinymcepuk' AND $_GET[menu]!='kontak') {
?>
<script language="javascript" type="text/javascript">
tinyMCE_GZ.init({
plugins : 'style,layer,table,save,advhr,advimage, ...',
themes  : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script language="javascript" type="text/javascript" src="../tinymcpuk/tiny_mce_src.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,youtube,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,youtube",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade]",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
apply_source_formatting : true,
languages :'en',
disk_cache : true,
debug : false 
});
function fileBrowserCallBack(field_name, url, type, win) {
var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
var enableAutoTypeSelection = true;
var cType;
tinymcpuk_field = field_name;
tinymcpuk = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":
cType = "Flash";
break;
case "file":
cType = "File";
break;
}
if (enableAutoTypeSelection && cType) {
connector += "&Type=" + cType;
}
window.open(connector, "tinymcpuk", "modal,width=600,height=400");
}
</script>
<?php
}elseif($f[nama_editor]=='tinymce1') {
?>
<script language="javascript" type="text/javascript">
tinyMCE_GZ.init({
plugins : 'style,layer,table,save,advhr,advimage, ...',
themes  : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script language="javascript" type="text/javascript" src="../tinymcpuk/tiny_mce_src.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced"});
</script>
<?php
}elseif($f[nama_editor]=='tinymce2') {
?>
<script language="javascript" type="text/javascript">
tinyMCE_GZ.init({
plugins : 'style,layer,table,save,advhr,advimage, ...',
themes  : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script language="javascript" type="text/javascript" src="../tinymcpuk/tiny_mce_src.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"});
</script>
<?php
}else{
}
?>

semoga berhasil kawan-kawan lokomedia.

DOWNLOAD SCRIPTNYA : DISINI