ช่วงนี้ผมกำลังโมดิฟายตัว tinyMCE เพิ่มการทำงานใหม่ๆเข้าไปในมัน เพราะบางอย่างที่ต้องการมันก็ไม่มีมาให้ บางอย่างที่มันมีมาให้ กลับไม่ชอบ แล้วตัว tinyMCE นี่ก็ดีใจหาย อนุญาติให้เพิ่มคำสั่งที่เขียนขึ้นเองเข้าไปในตัวมันได้

preview ที่ tinyMCE ให้มาผมไม่ค่อยชอบเพราะมันขึ้นมาเป็นหน้าต่างเล็กๆ ไม่พอกับการแสดงผลที่ผมต้องการ ผมก็เลยคิดว่าจะเปลี่ยนเสียใหม่ โดยเอาปุ่ม preview เดิมออก แล้วเอาปุ่มของตัวเองเข้าไป เขียนคำสั่งกำกับเสียใหม่

หน้าตาประมาณนี้
tinymce-add-new-button-01

ส่วนโค้ดประมาณนี้

<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "exact",
        elements : "blogentry_body,blogentry_body_en",
        theme : "advanced",
        plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
 
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,help,code,custom_previewbutton",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,blockquote,|,undo,redo,|,link,unlink,image,sunandskyrelatedalbum,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,|,print,fullscreen",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        file_browser_callback : "ajaxfilemanager",
        save_onsavecallback : "ajaxSave",
 
        // Change tinyMCE body Class
        body_class : "entry",
 
        // Content CSS
        content_css : "./_mockup/css/main.css",
 
        // Style Lists
        theme_advanced_styles : "thumbnail-left=thumbnail-left;thumbnail-center=thumbnail-center;thumbnail-right=thumbnail-right;video-left=video-left;video-right=video-right;video-center=video-center",
 
        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",
 
        setup : function(ed) {
            // New Preview Button
            ed.addButton('custom_previewbutton', {
                title : 'Preview Content',
                image : 'imgs/btn/custom_previewbutton.png',
                onclick : function() {
                    // Add you own code to execute something on click
                    window.open("./include/tiny_mce/plugins/preview/preview-subnetwork-news.html","preview");                              
                }
            });
            // Add sunandskyrelatedalbum
            ed.addButton('sunandskyrelatedalbum', {
                title : 'Related Album',
                image : 'imgs/btn/sunandskyrelatedalbum.png',
                onclick : function() {
                    tinyMCE.activeEditor.windowManager.open({
                        url: "./include/tiny_mce/plugins/sunandskyrelatedalbum/sunandskyrelatedalbum.php",
                        width: 499,
                        height: 408,
                        inline : "no",
                        close_previous : "no"
                    }); 
                }
            });
        }
});
 
function ajaxfilemanager(field_name, url, type, win) {
        var ajaxfilemanagerurl = "./include/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: "./include/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php?view=" + view,
            width: 782,
            height: 440,
            inline : "yes",
            close_previous : "no"
        },{
            window : win,
            input : field_name
        });         
}
 
function ajaxSave(){
    jQuery("body").css("cursor", "progress");
    jQuery(".button-action").css("cursor", "progress");
  var msg = "";  
  var request = new Request.JSON({
    url: "user_blog_entry-mc.php",
    method: "post",
    data: jQuery("#blogform").serialize(),
    onSuccess: function(resp) {
        if(resp.result){
            jQuery("#blogentry_id").val(resp.blogentry_id);
            msg += "Save completed.";
            alert(msg);
        }else{
            msg += "Save failed. Please try again.";
            alert(msg);
        }
        jQuery("body").removeAttr("style");
        jQuery(".button-action").removeAttr("style");
    }
  }).send();   
  return false;
}    
</script>

โค้ดที่ใช้สำหรับเพิ่มปุ่มเข้าไปใหม่คือตรงนี้ ผมเพิ่มเข้าไป 2 ปุ่ม

 
        setup : function(ed) {
            // New Preview Button
            ed.addButton('custom_previewbutton', {
                title : 'Preview Content',
                image : 'imgs/btn/custom_previewbutton.png',
                onclick : function() {
                    // Add you own code to execute something on click
                    window.open("./include/tiny_mce/plugins/preview/preview-subnetwork-news.html","preview");                              
                }
            });
            // Add sunandskyrelatedalbum
            ed.addButton('sunandskyrelatedalbum', {
                title : 'Related Album',
                image : 'imgs/btn/sunandskyrelatedalbum.png',
                onclick : function() {
                    tinyMCE.activeEditor.windowManager.open({
                        url: "./include/tiny_mce/plugins/sunandskyrelatedalbum/sunandskyrelatedalbum.php",
                        width: 499,
                        height: 408,
                        inline : "no",
                        close_previous : "no"
                    }); 
                }
            });
        }

ลองดูให้เข้าใจแล้วนำเอาไปประยุกต์ใช้กันนะ