Nov. 11
25

TinyMCE ติดตั้งตัวอัปโหลดรูปภาพ

อันที่จริงในเว็บ TinyMCE เองเขาก็มีตัวอัปโหลดรูปภาพอยู่แต่เขาขาย ตัวTinmyMCEทำมาแจกให้ใช้กันฟรีๆ ไปหารายได้ด้วยการขายปลักอินติดตั้งเพิ่มแทน แต่ก็มีคนทำปลักอินจัดการอัปโหลดภาพมาให้ใช้ฟรีๆอยู่ ตัวที่ผมใช้และชอบมาจากเว็บ phpletter.com

หน้าตาตัวอย่าง
tinymce-image-manager-01

ดาวน์โหลดปลักอินอัปโหลดรูปภาพ TinyMCE AJAX File and Image Manager แตกซิปออกมาเอาเฉพาะโฟลเดอร์ ajaxfilemanager มันจะเก็บอยู่ใน ajaxfilemanagerv_tinymce1.1\jscripts\tiny_mce\plugins เรื่องของเรื่องที่เอาเฉพาะโฟลเดอร์นี้เพราะต้องการเอาเฉพาะปลักอิน TinyMCE AJAX File and Image Manager เท่านั้น ตัว TinyMCE ดาวน์โหลดมาจากเว็บหลักเขาดีกว่า จะได้เวอร์ชั่นใหม่ล่าสุด เอาโฟลเดอร์ ajaxfilemanager ไปรวมกับตัว TinyMCE ของเรา โยนมันไปใส่ไว้ในโฟลเดอร์ plugins

จากนั้นเขียนโค้ด

<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",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,
                file_browser_callback : "ajaxfilemanager",
 
		// 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"
	});
 
        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
                });         
        }
</script>

สิ่งที่เพิ่มเติมเข้าไปในโค้ด TinyMCE เพื่อติดตั้งปลักอินตัวนี้คือ

file_browser_callback : "ajaxfilemanager"
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
	});         
}

เปิดไฟล์ plugins\ajaxfilemanager\inc\config.base.php แก้ตำแหน่งสำหรับจัดเก็บรูปภาพให้เป็นตำแหน่งที่ต้องการ

define('CONFIG_SYS_DEFAULT_PATH', '../../../../uploaded/'); //accept relative path only
define('CONFIG_SYS_ROOT_PATH', '../../../../uploaded/');	//accept relative path only

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

บทความน่าสนใจ

  1. การติดตั้งและใช้งาน TinyMCE WYSIWYG
  2. ภาคขยายความ การใช้งาน TinyMCE
  3. tinyMCE เปลี่ยนการแสดงผลในตัวอีดิเตอร์
  4. tinyMCE ปรับแต่งตัว preview
  5. tinyMCE เพิ่มปุ่มใหม่และคำสั่งของเราเอง
This entry was posted in TinyMCE and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

8 Comments

  1. july8329 Firefox 9.0.1 Windows 7
    Posted 13/02/2012 at 11:46 | Permalink

    ตอนคลิ๊ก icon browse ขึ้น Permission denied: session/ is not writable. ต้องแก้ยังไงเหรอครับ

  2. july8329 Firefox 9.0.1 Windows 7
    Posted 13/02/2012 at 11:47 | Permalink

    แก้ได้แล้วครับลืม set 0777

  3. Posted 08/03/2012 at 09:33 | Permalink

    อยากสอบถามครับ คลิกแล้วมันไม่แสดงภาพตรง Thumb อ่ะครับ คลิกที่รูปถึงจะแสดง และอัพโหลดไฟล์ไม่ได้
    เป็นเพราะอะไรครับ ขอบคุณครับ

    • วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย Firefox 10.0 Windows 7
      Posted 08/03/2012 at 09:42 | Permalink

      อัปโหลดไฟล์ไม่ได้ ต้องไปกำหนดประเภทของไฟล์ที่ให้อัปโหลดได้เพิ่มเติมครับ

  4. Posted 08/03/2012 at 09:51 | Permalink

    คือถ้าใน appserv ก็ได้ปรกติครับ พอขึ้น server แล้วภาพตัวอย่างไม่ปรากฎ ไม่แน่ใจว่าเป็นที่ server หรือเป็นที่ตัวไหน
    รบกวนทีครับ ขอบคุณครับ

    • วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย Firefox 10.0 Windows 7
      Posted 08/03/2012 at 09:55 | Permalink

      แสดงว่าโฟลเดอร์ที่มันใช้สำหรับสร้างภาพ thumbnail ไม่ได้ถูกเซ็ตเป็น 777 ลองเซ็ตโฟลเดอร์ uploads ให้เป็น 777 ทั้งโฟลเดอร์ดูครับ

  5. Posted 08/03/2012 at 09:56 | Permalink

    ภาพตัวอย่างครับ

    ขอบคุณครับ

  6. Posted 08/03/2012 at 10:01 | Permalink

    เซ็ตแล้วครับ เพราะอัพโหลดจากคริปที่เขียนเอง ก็ได้ปรกติ งงจริง ๆ ครับเอาไปใช้กับเวปอื่นก็ใช้ได้
    แต่เว็บนี้ ทำไงรูปก็ไม่ขึ้น ต้องคลิกที่รูปถึงจะมองเห็นภาพตัวอย่างครับ

    link ภาพตัวอย่างครับ http://www.konovathai.com/images/img_thumb.jpg

Post a Comment

You must be logged in to post a comment.