KCFinder web file manager (open-source) ฟรี
23 มี.ค. 2016 , 4,781 Views , หมวดหมู่ jQuery,JavaScript,Ajax WebDesign ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:CKEditor, kcfinderKCFinder เป็นระบบจัดการไฟล์ใน TextEditor ฟรี สามารถนำไปใช้ได้กับ TextEditor ต่างๆ เช่น FCKeditor, CKEditor, และ TinyMCE WYSIWYG web editors (หรือนำมาปรับแต่งใช้กับเว็บของเรา) ใช้สำหรับบริหารจัดการไฟล์ต่างๆ สามารถอัพโหลดรูปภาพ ไฟล์ฟอร์แมตต่างๆ แล้ว embedded เป็น HTML ใส่ใน TextEditor
ตัวอย่างการใช้ KCFinder ร่วมกับ CKEditor
ดาวน์โหลดไฟล์จาก http://kcfinder.sunhater.com/
จากนั้นนำไปใว้โฟลเดอร์เดียวกับกับ CKEditor ตามรูป (ไฟล์ index.php คือไฟล์ที่ใช้ TextEditor)
ตัวอย่างโค๊ดในไฟล์ index.php ที่เรียกใช้ CKEditor
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="plugin/ckeditor/ckeditor.js"></script> </head> <body> <textarea id="newsdescription" name="newsdescription"></textarea> <script type="text/javascript"> //<![CDATA[ // This call can be placed at any point after the // <textarea>, or inside a <head><script> in a // window.onload event handler. // Replace the <textarea id="editor"> with an CKEditor // instance, using default configurations. CKEDITOR.replace( 'newsdescription', { } ); //]]> </script> </body> |
กำหนด KCFinder ให้เป็น Default file manager สำหรับ CKEditor
โดยเข้าไปแก้ไขไฟล์ใน ckeditor/config.js ตามโค๊ดด้านล่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; // ... config.filebrowserBrowseUrl = 'plugin/kcfinder/browse.php?opener=ckeditor&type=files'; config.filebrowserImageBrowseUrl = 'plugin/kcfinder/browse.php?opener=ckeditor&type=images'; config.filebrowserFlashBrowseUrl = 'plugin/kcfinder/browse.php?opener=ckeditor&type=flash'; config.filebrowserUploadUrl = 'plugin/kcfinder/upload.php?opener=ckeditor&type=files'; config.filebrowserImageUploadUrl = 'plugin/kcfinder/upload.php?opener=ckeditor&type=images'; config.filebrowserFlashUploadUrl = 'plugin/kcfinder/upload.php?opener=ckeditor&type=flash'; // ... }; |
หรือถ้าหากจะให้เฉพาะหน้านั้นใช้ KCFinder ก็ให้ใส่โค๊ดในหน้าที่ใช้ TextEditor ดังนี้ (ไฟล์ index.php คือไฟล์ที่ใช้ TextEditor)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<textarea id="newsdescription" name="newsdescription"></textarea> <script type="text/javascript"> //<![CDATA[ // This call can be placed at any point after the // <textarea>, or inside a <head><script> in a // window.onload event handler. // Replace the <textarea id="editor"> with an CKEditor // instance, using default configurations. CKEDITOR.replace( 'newsdescription', { filebrowserBrowseUrl : 'plugin/kcfinder/browse.php?opener=ckeditor&type=files', filebrowserImageBrowseUrl : 'plugin/kcfinder/browse.php?opener=ckeditor&type=images', filebrowserFlashBrowseUrl : 'plugin/kcfinder/browse.php?opener=ckeditor&type=flash', filebrowserUploadUrl : 'plugin/kcfinder/upload.php?opener=ckeditor&type=files', filebrowserImageUploadUrl : 'plugin/kcfinder/upload.php?opener=ckeditor&type=images', filebrowserFlashUploadUrl : 'plugin/kcfinder/upload.php?opener=ckeditor&type=flash', } ); //]]> </script> |
เปิดใช้งาน KCFinder
เข้าไปแก้ไขไฟล์ kcfinder/conf/config.php
เปลี่ยนจากโค๊ด
|
1 2 3 |
// GENERAL SETTINGS 'disabled' => true, |
มาเป็น
|
1 2 3 |
// GENERAL SETTINGS 'disabled' => false, |
แค่นี้เราก็ใช้ KCFinder web file manager ได้แล้วครับ
ตัวอย่างการใช้ KCFinder ร่วมกับ TinyMCE 4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <script src="plugin/tinymce/tinymce.min.js"></script> <script>tinymce.init({ // ... file_browser_callback: function(field, url, type, win) { tinyMCE.activeEditor.windowManager.open({ file: 'plugin/kcfinder/browse.php?opener=tinymce4&field=' + field + '&type=' + type, title: 'KCFinder', width: 700, height: 500, inline: true, close_previous: false }, { window: win, input: field }); return false; }, // ... selector:'textarea', height: 500, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools' ], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons', image_advtab: true, templates: [ { title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', '//www.tinymce.com/css/codepen.min.css' ] });</script> </head> <body> <textarea>Easy (and free!) You should check out our premium features.</textarea> </body> </html> |
หากหน้าจัดการไฟล์ขึ้นหน้าว่างๆขาวๆ
- ลองกำหนดสิทธิ์ให้โฟลเดอร์ kcfinder/upload เขียนได้ (chmod777) ดูครับ
- หากยังไม่ได้ลองเชค gd ว่าได้เปิดใช้งานหรือเปล่าใน phpinfo()
- หากยังไม่ได้ลองดูที่ไฟล์ kcfinder/conf/config พวกค่า uploadURL,uploadDir หรือ _sessionVar ว่ากำหนดถูกต้องหรือเปล่า
ดูข้อมูลเพิ่มเติม http://kcfinder.sunhater.com/integrate
