CKEditor WYSIWYG Editor สายพันธุ์ใหม่ รุ่นน้องท้องเดียวกับ FCKeditor

หัวข้อ บทความ แทก HTML | JavaScript

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

เนื่องจากเจ้า FCKeditor นั้นมีอายุการพัฒนามากว่า 6 ปีแล้ว (ตั้งแต่ปี 2003) ทางผู้พัฒนาจึงอยากจะ Rebrand มันซักกะหน่อยนั้นแหล่ะ :P

ผมในฐานะที่เป็นแฟนพันธุ์แท้ของ FCKeditor จึงรีบ Clear งานแล้วหาเวลามา Review เจ้า CKEditor นี้ให้ได้อ่านกันแบบหมดเปลือก เพื่อให้หลายๆคนนำมันไปพัฒนาต่อยอดกับระบบของตัวเองได้ ว่าแล้วเริ่มกันเลย

ไป Download มาซะทั้ง CKEditor + CKFinder

อย่างสับสนกับชื่อนะครับ เจ้า CKEditor คือตัว WYSIWYG Editor (ต่อไปจะขอเรียกว่า Text Editor นะครับถือว่าเข้าใจตรงกัน WYSIWYG Editor พิมพ์ลำบาก) แบบ Webbase ส่วน CKFinder นั้นคือ File manager แบบ Webbase ที่ผมเคย Review ไปแล้ว

เนื่องจากระยะหลังงานที่ผมเขียนเป็น CMS ให้ลูกค้านั้น มักพ่วง 2 ตัวนี้ไปพร้อมๆกันเนื่องจากสะดวกดี ไม่ต้องเสียเวลามาเขียน File manager ใช้เอง ผมก็เลยถือโอกาสเอาทั้ง 2 ตัวนี้ ต่อร่วมกัน Review

ไป Download มาซะก่อนครับที่ CKEditor , CKFinder

หน้าตา Website CKEditor.com

หน้าตา Website CKFinder.com

หลังจาก Download มาเรียบร้อยผมจึงแตก Zip ติดตั้งไว้บน Server2Go

ติดตั้ง CKEditor และ CKFinder ไว้บน Server2Go

เริ่มจากพื้นฐานการเรียกใช้งาน CKEditor กันก่อน

การเริ่มต้นที่ดีสำหรับผมคือ ... การดูตัวอย่างครับ :P ใน CKEditor นั้นมีตัวอย่างอยู่ที่ ckeditor/_samples/

การเรียกใช้งาน CKEditor นั้นเรียกว่าง่าย เข้าขั้นบ้า ไปแล้วครับ :P นั้นคือ

วิธีที่ 1 ใช้ class คืออยากให้ textarea อันไหนเป็นกรอบ Text Editor ก็ใส่ class="ckeditor" เข้าไป ว่าแล้วดูตัวอย่าง

<!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>class</title> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> <body> <textarea cols="80" id="message" name="message" rows="10" class="ckeditor">ทดสอบความหล่อ </textarea> </body> </html>

เรียก CKEditor แบบ Class
หน้าตาที่ได้จากการเรียกแบบ Class

วิธีนี้เรียกว่า ง่ายที่สุดเลยไม่ต้องคิดอะไรมาก เรียก javascript เข้าบรรทัดบน แล้ว class="ckeditor" อย่างเดียวจบ

วิธีที่ 2 ใช้ code เป็นวิธีการแบบดังเดิมของ FCKeditor คือให้ใช้ Javascript ระบุรายละเอียดกรอบที่ต้องการแล้วก็สร้างกรอบ Text Editor ขึ้นมาใช้งาน ว่าแล้วดูตัวอย่าง Code

จะเห็นว่าแบบ Code นี้คือถ้าอยากได้ช่องไหนเป็น Text Editor ก็ให้ CKEDITOR.replace ค่า textarea นั้นแค่นั้นเอง

เรียก CKEditor แบบ Code
หน้าตาที่ได้จากการเรียกแบบ Code ก็ได้เหมือนกันแหล่ะ

ซึ่งโดยส่วนตัวผมเป็นคนชอบทำอะไรลำบากๆ :P ฉะนั้น ในหัวข้อต่อๆไปผมจึงขอ Review แบบการเรียกใช้แบบ Code ละกันครับ ว่าแล้ว ไปต่อกันเลย

กำหนดคุณสมบัติของกรอบ Text Editor

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

วิธีการกำหนดคุณสมบัติ

<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'message',{ // อยากกำหนดอะไรก็ใส่ที่นี่ } ); //]]> </script>

คุณสมบัติต่างๆเช่น

Skin ปุ่มไอคอนต่างๆ

เจ้า CKEditor นี้มาพร้อมกับ skin หน้าตาดีใหม่ชื่อว่า kama (ประวัติไม่รู้ไปสืบกันเอาเอง) และ skin เดิมจาก FCKeditor เช่น office2003, V2 มาครบ วิธีเรียกก็ระบุไปว่า

skin : 'kama', skin : 'office2003', skin : 'v2',

อยากตัวไหนก็ระบุลงไปเช่น

<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'message',{ skin : 'office2003', } ); //]]> </script>

CKEditor แบบเลือก Office 2003 Skin
ตัวอย่าง Text Editor ที่เลือก Office 2003 Skin

กว้าง ยาว กำหนดได้

กำหนดความกว้าง ความยาวของ Text Editor ได้ด้วย

height : 400, width : 750,

เมื่อเรากำหนดลงไป Text Editor ที่ได้จะกำหนดขนาดเริ่มแรก ตามที่เราระบุไว้ แต่ CKEditor เจ๋งกว่านั้น คือ ที่มุมขวาล่างของกรอบ เราสามารถใช้ลาก Mouse ดึงเอาขนาดใหม่ได้ตามชอบใจเลย เหมือน TinyMCE นั้นแหล่ะครับ

ภาษาของปุ่มเครื่องมือ

อันนี้ก็กำหนดเองได้ครับเราสามารถกำหนดได้อยากใช้ปุ่มอะไร โดยปกติ CKEditor จะเปลี่ยนภาษาของเครื่องมือตาม Browser ที่ได้ระบุไว้ (ผมทดสอบโดยการใช้ IE เข้ามันจะส่งปุ่มเครื่องมือภาษาไทยให้แต่ถ้าใช้ Firefox จะได้ปุ่มเครื่องมือเป็นอังกฤษ)

ปุ่มเครื่องมือภาษาอังกฤษ
อันนี้ดูด้วย Firefox ได้ปุ่มภาษาอังกฤษ

อันนี้ดูด้วย IE ได้ปุ่มภาษาไทย

ภาษาตรงนี้ถ้าอยากระบุให้เลือกภาษาใดภาษาหนึ่งแน่นอนไปเลยให้ระบุว่า

language : 'en',

รายชื่อภาษาทั้งหมด อยากรู้ไปดูที่ ckeditor\lang มีให้เลือกเยอะแยะมากมาย

ตอแหลแต่งสีได้อีก

เป็นของเล่นที่ CKEditor เหนือกว่ารุ่นพี่ FCKeditor ไปอีกเนื่องจากเราสามารถแต่งสีพื้นหลังให้เข้ากับ CMS ที่เราออกแบบได้โดยระบุใช้ plugin เพิ่มเติม (CKEditor ออกแบบใหม่ทำให้บางส่วนจะถูกส่งไปเป็น Plugin แทน core ของระบบ)

extraPlugins : 'uicolor', uiColor : '#006699',

อยากได้ Code สีอะไรก็ระบุไปได้เลย

สีน้ำเงินสีโปรดของผมเอามาทำเป็นพื้นหลังได้แล้ว

ชอบปุ่มไหนไม่เอาปุ่มไหนเลือก เอาเข้าเอาออกได้ตามใจชอบ

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

toolbar : [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About'] ],

นี่เป็นชุดปุ่มเต็มทั้งหมด ถ้าไม่อยากได้ปุ่มไหนก็ลบทิ้งโลด เช่น

toolbar : [ ['Source','-','Templates'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ],

ระบุว่าใช้เครื่องมือแค่นี้เราก็จะได้หน้าตา Text Editor แบบนี้

ได้ปุ่มเครื่องมือชุดเล็ก

สุดท้ายแล้วก็เอา CKFinder มาต่อร่วมเข้าไปอีก

ก่อนจะเอาไปต่อร่วมอย่าลืม Config ตัว CKFinder ให้พร้อมใช้งานก่อนนะครับ ไปดูวิธีตาม บทความ นี้

แสนจะง่ายแค่เพิ่ม Code นี้ต่อท้ายเข้าไป

filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

เอา CKFinder มาประกอบร่วม
จะเห็นเมื่อเวลา Browse Image จะมีปุ่ม Browse Server เพิ่มเข้ามา

เมื่อคลิกเข้าไปก็จะพาเข้าไปสู่ CKFinder โดยสมบูรณ์

สรุป Code ทั้งหมดที่กล่าวมาน่าจะได้ประมาณนี้

<!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>Code</title> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> <body> <textarea cols="80" id="message" name="message" rows="10" >ทดสอบความหล่อ</textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'message',{ skin : 'kama', language : 'en', extraPlugins : 'uicolor', uiColor : '#006699', height : 400, width : 750, toolbar : [ ['Source','-','Templates'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], ], filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' } ); //]]> </script> </body> </html>

ทั้งหมดนี้น่าจะเป็นจุดเริ่มต้นที่ดี สำหรับหลายๆคนจะหัดอ่าน Manual กัน ยังมีบางส่วนที่ผมไม่ได้กล่าวถึงเช่นการทำ Template แม่แบบ การทำ Style อันนี้ขอทิ้งไว้เป็นการบ้านไปศึกษาเพิ่มเติมกันเอง :P

บทสรุป

หลังจากผมได้ Review เจ้า CKEditor ไปพร้อมๆกับเตรียมนำไปประกอบใช้งาน ส่วนตัวประทับใจเรื่องความเร็ว ความสวยงาม ที่ CKEditor ทำได้ดีกว่า FCKeditor มาก เนื่องจาก CKEditor เพิ่งเปิดตัวไป (จริงๆมันแอบติดไว้ใน Web FCKeditor นานแล้ว) อาจจะยังมี Bug อยู่บ้างหลายคนอาจรอดูท่าทีก่อนก็ได้ครับ ว่ามันนิ่งแล้วจริงๆ ค่อยสลับจาก FCKeditor มาใช้ CKEditor แทน

ซึ่งน่าจะแน่นอนแล้วที่ FCKeditor จะพับฐานการพัฒนาไป เนื่องจาก ทางผู้พัฒนาต้องการลุย CKEditor ให้เต็มที่นั้นเอง

เอาว่าใครพร้อมก็หัดใช้ได้แล้วนะครับ หน้าตาดีๆแบบนี้ลูกค้าชอบใจแน่นอน ฟันธง ^^

รูปคุณ Read (86,829) Comments (77) 2009-09-21 23:27:59

ความคิดเห็น

ว้าว ๆ บล็อกอัพเดทแล้ว

ปกติผมก็สาวกของ FCKeditor อยู่แล้ว เห็นเจ้าตัวนี้ออกมาต้องรีบหัดใช้แล้วซะแล้ว

ณ ตอนนี้ไม่ได้ลองส่วนตัวคิดว่ามันคงเร็วกว่า รุ่นพี่อย่าง FCKeditor แน่นอน

รูปคุณ ปั๊ม โดยคุณ ปั๊ม 2009-09-22 02:51:49

บ้านเชียงใหม่ | เกมส์

ยอดเยี่ยมครับ ยอดเยี่ยม

รูปคุณ platoosom โดยคุณ platoosom 2009-09-22 07:58:21

สุโค่ย เลยครับ

มันง่ายกว่าเจ้า FCKeditor เป็นไหนๆ เลย

ปรับนู่น แต่งนี่ เพิ่มเติม โอย ติดใจครับ ^-^

รูปคุณ YoYO โดยคุณ YoYO 2009-09-22 08:53:10

:: ศิษย์เก่าชาวเลือดหมู ::

][ สักวัน...ผมจะ... ][

เคยชอบ FCKeditor อยู่เหมือนกันครับ แต่พักหลังได้ไปลองใช้ เจ้า tinyMCE ใน Wordpress ก็หลงรักมันทันที สงสัยต้องกลับมาลอง CKeditor ดูใหม่ละ แต่คงต้องหาวิธีใช้กับ Drupal หละ เพราะตอนนี้ก็นั่งแงะเล่น Drupal ขอบคุณมากครับพี่

โดยคุณ ปิเก้ 2009-09-22 12:23:07

เยียมครับ เป็นประโยชน์มาก จะลองเอาไปใช้ดู

รูปคุณ โอม โดยคุณ โอม 2009-09-22 14:51:17

ขอบคุณบทความรีวิวเจ๋งๆครับ
โหลดมาลองใช้บ้างแล้ว ชอบครับ
เดี๋ยวรออีกสัก สอง-สามเวอร์ชั่นอัพเดท จะเปลี่ยนมาใช้บ้าง (ใช้แต่ fck )

"ใช้ง่ายเข้าขั้นบ้า" << จริงๆครับ

รูปคุณ ej_sing โดยคุณ ej_sing 2009-09-22 15:07:38

บทความนี้เจ๋งสุด ๆ ทำตามแล้วได้ผลเป็นที่น่าพอใจอย่างมาก สำหรับคนไม่ค่อยฉลาดอย่างผม

ขอบคุณมาก ๆ ครับ เกิดชาติหน้าฉันใด ขอให้ฉลาดยิ่ง ๆ ขึ้นไป

รูปคุณ Gook โดยคุณ Gook 2009-09-22 17:03:18

เอาไปใส่ในฟอรั่ม แล้วเวลา submit
มันไม่แสดงผลอ่ะครับ กลายเป็น tag html ครอบข้อความที่เราส่งไปแทน
จะแก้ยังไงครับ

รูปคุณ pongsak โดยคุณ pongsak 2009-09-22 20:20:48

มาตามเก็บความรู้ค้าบ วันนี้วิ่งวุ่นทั้งวัน

เลยพึ่งได้มา ment

ขอบคุณครับ

รูปคุณ ฉุย โดยคุณ ฉุย 2009-09-22 21:22:40

เว็บเพื่อความคิดสร้างสรรค์และแบ่งปันครับ www.narongrit.net
และขอฝากเว็บโปรโมทด้วยครับ www.diggbookmark.com
ขอบคุณเว็บ scriptdd แห่งนี้ที่เปิดโลกทัศน์ให้กว้างกว่าเดิมครับ

สงสัยมานานแล้วครับเกี่ยวกับ License ของตัวนี้
ตกลงมันสามารถใช้ได้ฟรีหรือเปล่าครับ
อ่านที่เขาเขียนไว้ในข้อตกลงในการใช้งานแล้วงง

ขอบคุณครับ

รูปคุณ iannnnn โดยคุณ iannnnn 2009-09-24 00:11:17

จาก http://ckeditor.com/license

เอาตามที่ผมเข้าใจนะ
CKEditor แบ่ง License เป็น 2 แบบ

1. Open Source Licenses
ใช้แบบ GPL,LGPL และ MPL โดยมีเงื่อนไข
- เอา CKEditor ไปใช้งานประกอบกับ Open Source ตัวอื่นๆ
- ใช้งานส่วนบุคคลและสำหรับการศึกษา
- เอาไปใช้ใช้งานเชิงธุรกิจแต่ไม่ต้องการการ Support ใดๆ
ผมมองง่ายๆว่า เอา CKEditor ไปพัฒนาทำพวก Open Source ต่อก็เอาไปใช้ได้เลย
แต่ไม่มีการให้การ Support นะ

2. แบบธุรกิจ ใช้ Licenses แบบ CDL ( CKSource Closed Distribution License)

นำ CKFinder ไปพัฒนาต่อโดยไม่ต้องการอ้างถึงที่มา Source ต้นฉบับ หรือไม่ต้องการทำเป็น OpenSource
แบบนี้ก็จ่ายเงินให้เค้าตามรายละเอียดที่ว่าไป

ผิดถูกยังไงก็ว่ากันด้วยแปล Eng ควายๆเหมือนกัน

รูปคุณ 9AuM โดยคุณ 9AuM 2009-09-24 08:38:47

http://www.servdd.com Web Hosting คุณภาพบริหารงานโดยนายอ้ำ
http://www.wp4seo.com wp4SEO ระบบช่วยบริหาร Wordpress Blog จำนวนมาก
http://www.welovetopup.com weLoveTopup เติมเงินออนไลน์ให้ส่วนลดมากที่สุดในตลาด

ขอบคุณคร้าบ สำหรับบทความ

รูปคุณ ตู่ โดยคุณ ตู่ 2009-09-25 14:40:03

ขอบคุณสำหรับสิ่งดีๆครับ

รูปคุณ kikok โดยคุณ kikok 2009-09-26 12:21:46

www.uttc.ac.th

วิทยาลัยเทคนิคอุตรดิตถ์

ผมเขียนไปบางส่วนแหละ แต่ยังไม่ได้ approv ขึ้น ฮิ ๆ คงไม่ต้องแล้วแหละ ให้มาอ่านตรงนี้เอา แจ่ม!!!!

รูปคุณ P@W โดยคุณ [email protected] 2009-09-26 18:35:09

ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ

www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com

ขอบคุณมากค่ะ สำหรับสาระ และวิธีการดีๆ

รูปคุณ อ๊อฟ โดยคุณ อ๊อฟ 2009-09-28 22:58:23

มันง่ายจนบ้าจริงๆ ผมลองแล้ว
ยังสงสัยเลยว่าแค่นี้เองหรอ (วะ) แล้วเสร็จงานโดย งง งง

ขอบคุณสำหรับ บทความเจ๋งๆนะครับ

รูปคุณ โอ้ว โดยคุณ โอ้ว 2009-09-30 15:41:10

ขอบคุณพี่อั้มมากเรยครับ ผมนั่งปวดหัวกะมันมานานแระอิอิอิ

รูปคุณ Beer โดยคุณ Beer 2009-10-01 12:21:26

รอกวนสอบถามนิดหนึ่งครับ
ผมลองทำตามดังตัวอย่างมันก็ได้อยู่ครับ แต่ติดปัญหาอยู่ที่ เวลาเอา toolbar บางตัวออกไปแล้ว ที่ ie toolbar ทั้งหมดจะหายไปเลยครับ คือไม่แสดงผล แต่ที่ firefox แสดงผลได้ตามปกติ ไม่ทราบจะแก้ไขอย่างไรได้บ้างครับ

รูปคุณ two-banana โดยคุณ two-banana 2009-10-14 13:48:20

มาอีกแล้ว ความรู้ดีๆ
ผมทำเว็บอยู่ ลอง CKEditor สักหน่อยน่าจะดี

รูปคุณ Silent โดยคุณ Silent 2009-10-14 14:00:10

ผู้ชายแสนจะธรรมดา

ขอเก็บไปลองหน่อยนะครับ

รูปคุณ ตั้ม โดยคุณ ตั้ม 2009-11-14 19:22:46

ขอบคุณครับเสียดายตัว CKFinder ไม่ฟรี

รูปคุณ ขอบคุณครับ โดยคุณ ขอบคุณครับ 2009-11-16 15:21:41

งมเองทั้งวัน ขอบใจมากๆๆๆ

รูปคุณ Themost โดยคุณ Themost 2009-11-24 22:19:59

รบกวนสอบถามวิธีการใช้ CKEDITOR ร่วมกับ drupal หน่อยครับ
เนื่องจากยังไม่มี module ของ Ckeditor ให้โหลด
เลยไม่ทราบวิธีนำไปประยุกต์ใช้ครับ
ว่าใช้กับ drupal ยังไง

รูปคุณ winddragon โดยคุณ winddragon 2009-12-02 15:51:58

แล้วถ้าต้องการ ทำข้อมูลใน ฐานข้อมูลมา แก้ไขอ่ะครับ

จะต้องทำเหมือนกันกับ FCKeditor หรือป่าวครับ

<?
$test = $test[test];
$test = eregi_replace("\n", '', $test);
$test= eregi_replace("\r", '', $test);
$test= addslashes($test);
?>

ประมาณนี้อ่ะครับ

รูปคุณ ARs_BeaL โดยคุณ ARs_BeaL 2009-12-07 12:58:24

It was not possible to complete the request due to file system permission restrictions.

พอกดปุ่ม Upload Selected File แล้ว ขึ้นข้อความข้างบนครับ
กำลังหาวิธีแก้ไขอยู่ ถ้าใครรู้วิธีช่วยบอกด้วยนะครับ

Best Regards,
Khun Au

รูปคุณ au โดยคุณ au 2009-12-12 14:30:51

ผมหัดทำวันแรกครับ ใช้ของใหม่หมดเลย รุ่นเก่าก็ไม่เคยใช้
ติดปัญหาเลยครับ
ตอนค้นหาภาพครับ มันขึ้นข้อความนี้ครับ
type Status report

message /ckfinder/ckfinder.html

description The requested resource (/ckfinder/ckfinder.html) is not available.
ผมใช้ tomcat6.0.18 ครับ ช่วยส่งเคราะห์มือใหม่หน่อยคร้บ

รูปคุณ sayan โดยคุณ sayan 2009-12-12 20:14:57

รันใน local ไม่เห็นความต่างคับ พอ ๆ กับ fck ต้องลอง ขึ้น โฮส จริง ก่อน

รูปคุณ sudej โดยคุณ sudej 2009-12-15 00:36:33

กอฟ มา เยือน

สุดเดช

คือผมเด็กฝึกหัดน่ะครับ
ลองเอา สองตัว คือ folder ckeditor กับ ckfinder มาอยู่ใน folder web โดยมีไฟล์ test.php
ซึึ่่งไฟล์ test.php เนี้ย copy เอาในกระทู้นี้แบบเต็ม ครับ และเพิ่มในส่วนหัวของไฟล์
<? @session_start();
$_SESSION["C_STATUS"]="ADMIN";
?>

และแก้ไข config.php ในส่วน CheckAuthentication เป็น
session_name("CONTENTDD");
session_start ();
ob_start();

function CheckAuthentication()
{
if ($_SESSION["C_STATUS"] !="ADMIN") {
return false;
}else{
return true;
}
}

มันก็มีปัญหา ตรง image properties -> tab upload เมื่อกด อัพ ก็ไม่มีไร แก้ไง ครับ
ลบกวนด้วย ต้องการใช้ด่วน ครับผม

รูปคุณ xman2548 โดยคุณ xman2548 2010-01-02 00:49:52

ทำไมเคาะ ent แล้วตอน view ดูข้อมูลมันเว้นบรรทัด 2 บรรทัดอ่ะครับ

รูปคุณ kt โดยคุณ kt 2010-01-22 19:27:40

session_name("CONTENTDD");
session_start ();
ob_start();

function CheckAuthentication()
{
if ($_SESSION["C_STATUS"] !="ADMIN") {
return false;
}else{
return true;
}
}
--------------------------
"ADMIN" ตรงนี้อ่ะครับ แก้ไขเป็น cookieที่ใช้ login ของ session ที่เข้ามาก็ใช้ได้แล้ว
แต่ว่า ตรงคำว่า Demo เอาออกไงเหรอ แล้วเข้าโฟรเดอร์ image มันอยู่ตรงไหนเหรอคับท่าน ผมหาไม่เจอ ท่านบอกหน่อยน่ะครับ

รูปคุณ roj โดยคุณ roj 2010-01-25 11:13:41

มันฟ้อง Folder not found. Please refresh and try again
ทั้งที่ระบุตำแหน่งแล้วอ่ะครับ
$baseUrl = 'http://ชือเว็บ/admin/ckfinder/userfiles/';

รบกวนผู้รู้ด้วยครับ

รูปคุณ Sarawut โดยคุณ Sarawut 2010-02-04 17:10:34

ผมลองลง ckfinder แล้วพอรัน standalone.html มันขึ้น XML request error: (0) ครับ มันเป็นเพราะ อะไรครับ

รูปคุณ song โดยคุณ song 2010-02-15 14:38:40

ทำไมลองทำดูแล้วแสดงกับ IE ไม่ได้อ่ะค่ะ ต้องไป config เพิ่มตรงไหนหรอป่าวค่ะ

รูปคุณ nangfah โดยคุณ nangfah 2010-03-13 21:27:34

ckfinder ของผมแต่ก็ก็อัพโหลดได้น่ะครับ แต่ตอนนี้มันไม่ให้อัพโหลดแล้วอ่ะครับ ไม่ทราบว่ามันหมดอายุหรือเปล่า งง นึกว่าใช้ได้ตลอดไป

รูปคุณ boy โดยคุณ boy 2010-03-16 02:16:09

ขอบคุณมากครับ ขอให้ความรู้ที่ให้ กลับไปมีแต่สิ่งดีๆ ขอบคุณครับ

รูปคุณ anuchas โดยคุณ anuchas 2010-03-28 00:21:27

ขอบคุณมากครับ ผมได้ไอเดียดีๆไปทำเว็บแบบ แนวๆ กับเขาเสียที งมมานานและ

รูปคุณ theteza02 โดยคุณ theteza02 2010-03-28 09:30:23

ไม่ทราบว่าเราจะ alert ข้อมูลใน CKEditor ทำไงเหรอครับ

ขอบคุณครับ

รูปคุณ patiphan โดยคุณ patiphan 2010-05-20 11:21:12

---------------------------------------------------------------------------------------------------
Not Found

The requested URL /FCKeditor/editor/fckeditor.html was not found on this server.
--------------------------------------
Apache/2.2.4 (Win32) PHP/5.2.3 Server at localhost Port 80
---------------------------------------------------------------------------------------------------

คือเวลาที่ผมจะทำการ upload browse จะเจอคำสั่งนี้ครับพี่รู้

พอดีบนดอยไม่มีคนรู้เรื่องก็เลยลบกวนช่วยหน่อยกครับ กำลังจะทำ project จบครับ

และคำสั่งอ่านข้อมูลที่ดึงมาจากฐานข้อมูล

คือว่า ผมอัพไปเป็น html ในฐานข้อมูลแล้วแต่เวลาอ่านคำสั่ง html เช่น คำสั่ง <table> เป็นต้น มันอ่านไม่ได้ มันจะโชว คำสั่ง html มาหมอเลย

ผมหามาได้ 2 วันแล้ว ... ช่วยตอบด้วยครับ หรือ Email:[email protected]

รูปคุณ kar โดยคุณ kar 2010-06-06 20:41:44

เห็นแล้วก้ออยากจะเขียนเว็บแล้วแทรก ตัวนี้เข้าไปอีกแหละ แต่ตอนนี้ขี้เกียจอ่ะ

รูปคุณ เอก โดยคุณ เอก 2010-06-06 22:45:07

naiake.com ผู้ชายสร้างรายได้บนโลกออนไลน์ , รับจ้างพิมพ์งาน

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

รูปคุณ แหม่ม โดยคุณ แหม่ม 2010-06-27 16:49:48

รับค่าจาก ckeditor แล้วสีมันไม่ตรงตามที่เซตไว้ แก้ไขอย่างไรครับ
งงมากๆๆๆ

ใส่สีชมพูเป็นสีเขียวซะงั้น

รูปคุณ porchn โดยคุณ porchn 2010-06-29 23:15:26

ผมแทรกในหน้า addproduct แล้วครับ มันขึ้นเครื่องมือ
แต่พอ submit มันไปค้างหน้า addproduct2 อ่ะครับ มันไม่ไปหน้าที่ระบุว่า เพิ่มสินค้าแล้ว
ทำไงดีครับ

รูปคุณ titatree โดยคุณ titatree 2010-08-11 16:32:40

คือว่า ใน textarea ที่กำหนดให้เป็น Ckeditor ถ้าไม่ได้พิมพ์อะไรลงไป เวลากด Submit มันจะมีค่า <br />

อยู่ในฐานข้อมูลอ่ะ ไม่ทราบว่าจะแก้อย่างไรค่ะ

รูปคุณ beer โดยคุณ beer 2010-09-02 17:07:27

ดึงค่ามาจาก text area ยังไงอ่ะคะ
ใช้ document.getElementById('ID ของ textarea').value;
alert ดูแล้วไม่ออกอ่ะค่ะ...ขอคำแนะนำบ้างนะคะ

รูปคุณ nong โดยคุณ nong 2010-09-09 12:14:23

ของผมมันโชเครื่องมือแล้วแต่ตอนส่งค่า ตอนกด submit ตัวอักษรมันไปส่งไปปริ้นค่าออกมาแล้ว แต่สีกับขนาดมันเห็นมีไรเกิดขึ้นเลย

รูปคุณ ิbank โดยคุณ ิbank 2010-09-10 19:54:55

Thanks krub :)

รูปคุณ superpong โดยคุณ superpong 2010-09-16 05:20:24

ถ้าจะเอาไปใช้ php nuke 8.1 ต้องทำยังไงครับ เอาไปไว้ตรงไหนและต้องไปแก้ไข และปรับ config ตรงไหนบ้างครับ

รูปคุณ nuke 8.1 โดยคุณ nuke 8.1 2010-09-19 22:47:30

print แล้วจะทำยังไงให้เหมือนกับที่จัด บนเว็บ เพราะทำเท่าไหร่ก็ไม่เหมือน ในส่วนของตัวหนังสือนะครับ ช่วยบอกทีครับ

รูปคุณ sudaki โดยคุณ sudaki 2010-09-28 16:42:13

ขอบคุณด้วยคน เยี่ยมจริงๆ

รูปคุณ exc9 โดยคุณ exc9 2010-11-18 15:51:52

เอามาเขียนให้ลูกค้าได้ ไม่เป็นไรใช่ป่าวคับ

รูปคุณ เอ็ม โดยคุณ เอ็ม 2010-12-22 01:07:46

เยี่ยมไปเลยครับ

รูปคุณ ตั้ม โดยคุณ ตั้ม 2011-03-03 19:49:19

ขอบคุณครับท่าน

รูปคุณ loso โดยคุณ loso 2011-03-13 13:03:20

อธิบายแจ่มมากค่ะ
เอาไปใช้แล้ววว
ขอบคุณค่ะ

รูปคุณ คนทำเวบ โดยคุณ คนทำเวบ 2011-03-19 02:03:10

แล้วจะเอาปุ่มออกนะมันอยู่ไฟล์ใหนระครับ

รูปคุณ nut โดยคุณ nut 2011-03-24 18:25:34

อยากจะทราบว่าจะฟิกซ์ขนาดของtext editor ได้ัมั้ยคะ

รูปคุณ ลองทำดู โดยคุณ ลองทำดู 2011-04-07 22:51:04

อยากจะทราบว่า จะให้ ckeditor แสดงข้อมูลยังไงครับ
ช่วยตอบหน่อยนะครับ

ขอบคุณครับ

รูปคุณ มิก โดยคุณ มิก 2011-04-08 07:35:13

แก้โค้ดที่ไฟล์ไหนอ่ะค่ะ จะเอาปุ่มบางปุ่มออกอ่ะค่ะ

รูปคุณ TarnNee โดยคุณ TarnNee 2011-04-26 14:54:57

คือตอนนี้เรียกใช้งานได้แล้ว

เก็บลง database แล้ว แต่เวลาแสดงผล แสดงออกมาเป่งแบบโค้ด HTML ครา

"<p> This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>"

ประมาณนี้น้าครา แก้ๆไงครา รบกวนด้วยน้าครา

รูปคุณ milk โดยคุณ milk 2011-06-16 15:54:29

ผมก้กำลังศึกษาเช่นกัน แต่จุดนี้ผมผ่านมาแล้วครับ สามารถแก้ไขด้วยการใช้ html_entity_decode เข้ามาช่วยตอนแสดงผลครับ

<?php echo $postedValue ; ?>

<?php echo htmlspecialchars($postedValue) ; ?>

<?php echo html_entity_decode($postedValue) ; ?>

ทั้ง 3 อันข้างบนให้ผลการแสดงต่างกันครับ
แบบล่างสุดคือแบบที่มี html_entity_decode น่าจะเป็นแบบที่แก้ปัญหาที่คุณเจอได้ครับ ลองดู ผมก็มือใหม่เหมือนกัน

รูปคุณ verawat โดยคุณ verawat 2011-06-17 00:58:41

ใช้ CKEditor ทำส่ง email ส่งได้ปกติ แต่
like ใน mail กด ไม่ไปคะ
จะมีวิธีแก้อย่างไรไ้ด้บ้าง...

รูปคุณ nee โดยคุณ nee 2011-06-25 13:31:46

รบกวนหน่อยคะพอดีติดปัญหา write file html
ไม่สามารถทำได้ เช่น
ใส่คำว่า ทดสอบ โดย ใส่สีอักษรคำว่า สอบ เป็นสีแดง ตัวหนา
เมื่อทำการบันทึก ปรากฎว่าได้คำ
ทดส่วนคำว่าสอบไม่แสดง

ดังด้านล่าง
ทด<span class=\

code write file html
$HTMLFileNameSpe = "$y1$g1$rn1$sn1"."_Spe.html";
$HTMLToolContentSpe='$inputspcename';
if ($HTMLToolContentSpe!=""){
$fp = fopen ($myModule_Path_HTMLFiles."/".$HTMLFileNameSpe, "w+");
fwrite($fp,$HTMLToolContentSpe);
fclose($fp);

ส่วนบันทึกลงฐานข้อมูล
$sqlSpe = "UPDATE ".$myModule_Table." SET frm_OCSpecific ='$HTMLFileNameSpe' WHERE frm_OCID= '$MaxID'";
$QuerySpe=MYSQL_DB_QUERY($System_DataBase_Name,$sqlSpe) OR DIE("Error: เกิดความผิดพลาด <br>$sqlSpe<br>\n");

เป็นเพราะอะไรคะ ช่วยหน่อยคะ ติดมานานแล้ว

รูปคุณ น้ำหอม โดยคุณ น้ำหอม 2011-09-01 14:05:44

เง้อไม่มีครายตอบเยย เศร้ามากมาย

รูปคุณ น้ำหอม โดยคุณ น้ำหอม 2011-09-02 11:07:43

พอคลิกเพื่อจะใส่รูปอะครับ มันบอกว่า

The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file

ต้องไปทำอย่างไรครับ

รูปคุณ Katob โดยคุณ Katob 2011-10-17 19:09:47

พอดีมีโอกาศได้ใช้ CKEditor ในเว็บตัวเอง
วันนี้ผ่านมาเห็นบทความนี้ เยี่ยมเลยครับได้ความรู้เพิ่มอีก

รูปคุณ นก โดยคุณ นก 2011-11-15 16:37:59

ขอบคุณอย่างแรง ครับ...

รูปคุณ batigo โดยคุณ batigo 2011-11-21 00:37:36

มันขึ้นว่า

It was not possible to properly load the XML response from the web server.
Raw response from the server:
แก้ไงครับ

ตรงตรวจสอบสถานะ ผมใช้
<?php
session_name("user_id");
session_start ();
ob_start();

function CheckAuthentication()
{
if ($_SESSION["status"] !="ADMIN") {
return false;
}else{
return true;
}
}

รูปคุณ วรสิทธื์ โดยคุณ วรสิทธื์ 2012-03-15 18:06:02

สุดยอดครับ

รูปคุณ บอล โดยคุณ บอล 2012-04-18 15:47:41

ตอนนี้ผมงงว่า จะเอา โฟลเดอ Ckfinder ไปไว้ที่ไหนอ่ะครับ ??
เพราะผมหา path ไม่เจออ่ะครับ T^T เริม่จนปัญญาแล้วด้วย
มันขึ้นว่าไม่พบหน้าเว็บนี้ คือหา path มันไม่เจอแหละครับ
แล้วโฟลเดอ เก็บรูปต้อง chmod777 ก่อนไหมครับ ผมรัน ใน localhost ยังไม่ขึ้นเชิพเวอจริงอ่ะครับ

รูปคุณ Jurng โดยคุณ Jurng 2012-06-05 11:44:00

รูปคุณ dd โดยคุณ dd 2012-07-18 12:34:46

The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.

มันขึ้นแบบเนี้ยอ่ะคับ ใครจะตอบผมได้บ้างครับ

รูปคุณ AkiTia Nai โดยคุณ AkiTia Nai 2012-08-24 01:13:24

ขอบคุณมากๆๆค่ะ ทำได้แล้ว ง่ายมากเลย

รูปคุณ nira โดยคุณ nira 2013-01-01 21:23:06

ขอบคุณมากๆครับ

รูปคุณ kwang โดยคุณ kwang 2013-01-07 17:49:45

ใช้รันใน appserve ได้ไหมค๊ะ มันไม่ขึ้นอ่ะ งง

รูปคุณ aaa โดยคุณ aaa 2013-07-08 15:49:10

ติด error It was not possible to properly load the XML response from the web server.
XML Parsing Error: unclosed token Location: file:///C:/AppServ/www/webschool/ckfinder/ckfinder.html Line Number 1, Column 1:Raw response from the server:

getDocumentRootPath() . $baseUrl; } $utilsSecurity =& CKFinder_Connector_Core_Factory::getInstance("Utils_Security"); $utilsSecurity->getRidOfMagicQuotes(); /** * $config must be initialised */ $config = array();

รบกวนช่วยตอบหน่อยนะค่ะ

รูปคุณ p โดยคุณ p 2013-10-07 11:18:12

รูปคุณ RonaldAnign โดยคุณ RonaldAnign 2018-04-14 13:17:07

รูปคุณ Sharonsloma โดยคุณ Sharonsloma 2019-03-29 23:26:25

รูปคุณ MergadAnign โดยคุณ MergadAnign 2019-09-20 20:18:58

Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

CKEditor WYSIWYG Editor สายพันธุ์ใหม่ รุ่นน้องท้องเดียวกับ FCKeditor

ไป Download มาซะทั้ง CKEditor + CKFinder

เริ่มจากพื้นฐานการเรียกใช้งาน CKEditor กันก่อน

กำหนดคุณสมบัติของกรอบ Text Editor

บทสรุป

ความคิดเห็น

ร่วมแสดงความคิดเห็น

เข้าระบบ

บทความล่าสุด

Gallery

Tags

เพื่อนบ้าน

สถิติส่วนตัว