ช่วงนี้ผมกำลังโมดิฟายตัว tinyMCE เพิ่มการทำงานใหม่ๆเข้าไปในมัน เพราะบางอย่างที่ต้องการมันก็ไม่มีมาให้ บางอย่างที่มันมีมาให้ กลับไม่ชอบ แล้วตัว tinyMCE นี่ก็ดีใจหาย อนุญาติให้เพิ่มคำสั่งที่เขียนขึ้นเองเข้าไปในตัวมันได้
preview ที่ tinyMCE ให้มาผมไม่ค่อยชอบเพราะมันขึ้นมาเป็นหน้าต่างเล็กๆ ไม่พอกับการแสดงผลที่ผมต้องการ ผมก็เลยคิดว่าจะเปลี่ยนเสียใหม่ โดยเอาปุ่ม preview เดิมออก แล้วเอาปุ่มของตัวเองเข้าไป เขียนคำสั่งกำกับเสียใหม่
หน้าตาประมาณนี้
ส่วนโค้ดประมาณนี้
<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" }); } }); } |
ลองดูให้เข้าใจแล้วนำเอาไปประยุกต์ใช้กันนะ
Leave a Reply