membuat-modul-editor-dengan-4-pilihan-editor-dinamis-di-cms-lokomedia/

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.

Sebelum tutorial ini dijelaskan, ada baiknya kita liat hasilnya dulu, biar kawan-kawan jadi tau maksudnya dari tutorial ini. pertama-tama tampilan dari modul editor yang kita buat, sebagai berikut :

...

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 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.


// Bagian editor
elseif ($_GET['module']=='editor'){
  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>


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') {
    ?>
<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. 
