ยินดีต้อนรับ กรุณา สมัครสมาชิก หรือเข้าสู่ระบบ

Home » webboard » PHP
เข้าชม : 691

ckeditor

โพสต์เมื่อ: วันพฤหัสบดี 16 มิถุนายน 2554  01:43 น.

ckeditor
[ ความเห็นที่ 1]
RE : ckeditor
โพสต์เมื่อ: วันพฤหัสบดี 16 มิถุนายน 2554  01:56 น.
plugin youtube
[ ความเห็นที่ 2]
RE : ckeditor
โพสต์เมื่อ: วันพฤหัสบดี 16 มิถุนายน 2554  21:43 น.
ckeditor
[ ความเห็นที่ 3]
RE : ckeditor
โพสต์เมื่อ: วันพฤหัสบดี 16 มิถุนายน 2554  23:57 น.
วีดีโอสอน ckeditor
[ ความเห็นที่ 4]
RE : ckeditor
โพสต์เมื่อ: วันศุกร์ 17 มิถุนายน 2554  02:10 น.

อันนี้ใช้ได้แต่เป็น flash

http://puszki.net/ckeditor-youtube-plugin/


flash
[ ความเห็นที่ 5]
RE : ckeditor
โพสต์เมื่อ: วันเสาร์ 18 มิถุนายน 2554  10:25 น.
plugins
[ ความเห็นที่ 6]
RE : ckeditor
โพสต์เมื่อ: วันเสาร์ 18 มิถุนายน 2554  16:07 น.
ckeditor
[ ความเห็นที่ 7]
RE : ckeditor
โพสต์เมื่อ: วันเสาร์ 18 มิถุนายน 2554  16:13 น.

เปลี่ยนจาก แท็ค <p> ให้เป็น <br>

เพิ่มไว้ในไฟล์ config.js

 config.shiftEnterMode = CKEDITOR.ENTER_P;
 config.enterMode = CKEDITOR.ENTER_BR;


tag p เป็น br
[ ความเห็นที่ 8]
RE : ckeditor
โพสต์เมื่อ: วันศุกร์ 24 เมษายน 2558  20:24 น.
ปุ่มเครื่องมือที่ CKEditor เตรียมมาไว้ให้เรานั้นมีอะไรกันบ้าง
[] ระบุขอบเขตของกลุ่มเครื่องมือ ปุ่มเครื่องมือที่มีการทำงานคล้ายคลึงกันจะถูกจัดไว้รวมกันในเครื่องหมาย [ ]
‘-‘ ตัวคั่นระหว่างกลุ่มเครื่องมือ
‘/’ ขึ้นบรรทัดใหม่


กลุ่มเครื่องมือสำหรับการแก้ไขเอกสาร

‘Source’ ดูรหัส html
‘Save’ บันทึก (แต่เท่าที่ผมทดลองมา ปุ่ม ‘บันทึก’ นี้เหมือนไม่ทำงาน ก็เลยไม่แน่ใจว่าจะต้องเพิ่มเติมอะไรที่ไหนอีกหรือไม่ และเนื่องจากปกติผมไม่ได้ใช้ฟีเจอร์นี้ ก็เลย disable มันไว้และก็ยังไม่ได้ค้นคว้าต่อไปว่าจะต้องทำอย่างไรบ้าง)
‘NewPage’ สร้างหน้าเอกสารใหม่ (หากมีข้อมูลเดิมอยู่ก็จะถูกลบหมด)
‘Preview’ ดูหน้าเอกสารตัวอย่าง
‘Templates’ ใช้เทมเพลตที่เตรียมไว้
‘Cut’ ตัดข้อความหรือตัวอักษรที่ต้องการ
‘Copy’ คัดลอกข้อความหรือตัวอักษรที่ต้องการ
‘Paste’ นำข้อความหรือตัวอักษรที่ถูกตัดหรือถูกคัดลอกไว้มาแปะ
‘PasteText’ วางแบบตัวอักษรธรรมดา
‘PasteFromWord’ วางสำเนาจากตัวอักษรเวิร์ด (เท่าที่ทดลองปุ่มนี้มีผลเหมือนกับปุ่ม ‘Paste’)
‘Print’ พิมพ์ข้อความที่พิมพ์ ออกทางเครื่องพิมพ์
‘SpellChecker’ ตรวจสอบการสะกดคำ
‘Scayt’ ตรวจสอบการสะกดคำขณะพิมพ์
‘Undo’ ยกเลิกคำสั่ง
‘Redo’ ทำซ้ำคำสั่ง
‘Find’ ค้นหาข้อความ
‘Replace’ ค้นหาข้อความและแทนที่
‘SelectAll’ เลือกข้อความทั้งหมดที่พิมพ์
‘RemoveFormat’ ลบรูปแบบออก (ผลของคำสั่งนี้จะเหลือเพียงแค่ html tag ปล่าวๆที่ไม่มี attribute ใดๆ เช่น จาก <img align=”left” height=”100″ style=”margin-right: 10px” width=”100″ /> เหลือเพียง <img />)


กลุ่มเครื่องมือสำหรับการสร้างแบบฟอร์ม

‘Form’ แทรกแบบฟอร์มลงในเอกสาร (ผลจากคำสั่งนี้จะได้แท็ก <form name=”enrolmentForm” id=”enrolmentForm” enctype=”text/plain” method=”post”></form>)
‘Checkbox’ แทรก check box ลงในแบบฟอร์มหรือเอกสาร
‘Radio’ แทรก radio button ลงในแบบฟอร์มหรือเอกสาร
‘TextField’ แทรก text input field ลงในแบบฟอร์มหรือเอกสาร
‘Textarea’ แทรก text input field แบบ multi-line หรือ text area ลงในแบบฟอร์มหรือเอกสาร
‘Select’ แทรก list box ลงในแบบฟอร์มหรือเอกสาร
‘Button’ แทรกปุ่มลงในแบบฟอร์มหรือเอกสาร
‘ImageButton’ แทรกปุ่มแบบรูปภาพ ลงในแบบฟอร์มหรือเอกสารd
‘HiddenField’ แทรก hidden field ลงในแบบฟอร์มหรือเอกสาร<


กลุ่มเครื่องมือสำหรับการจัดรูปแบบตัวอักษร, ข้อความ, รูปภาพ อนิเมชั่น ฯลฯ

‘Bold’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวหนา
‘Italic’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวเอียง
‘Underline’ ขีดเส้นใต้ตัวอักษรหรือข้อความในเอกสาร
‘Strike’ ขีดเส้นทับตัวอักษรหรือข้อความในเอกสาร (ตัวอย่าง A ก)
‘Subscript’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวห้อย
‘Superscript’ ทำให้ตัวอักษรหรือข้อความในเอกสารเป็นตัวยก
‘NumberedList’ แทรกลำดับรายการแบบตัวเลขลงในเอกสาร
‘BulletedList’ แทรกลำดับรายการแบบสัญลักษณ์ลงในเอกสาร
‘Outdent’ ลดระยะย่อหน้า
‘Indent’ เพิ่มระยะย่อหน้า
‘Blockquote’ แทรก block quote ลงในเอกสาร
‘CreateDiv’ แทรกแท็ก div ลงในเอกสาร
‘JustifyLeft’ จัดชิดซ้าย
‘JustifyCenter’ จัดกึ่งกลางหน้า
‘JustifyRight’ จัดชิดขวา
‘JustifyBlock’ จัดพอดีหน้า
‘Link’ แทรก/แก้ไขการเชื่อมโยงลงในเอกสาร
‘Unlink’ ลบการเชื่อมโยงออกจากเอกสาร
‘Anchor’ แทรก/แก้ไข จุดอ้างอิงสำหรับการเชื่อมโยงลงในเอกสาร
‘Image’ แทรกรูปภาพลงในเอกสาร
‘Flash’ แทรก flash animation ลงในเอกสาร
‘Table’ แทรกตารางลงในเอกสาร
‘HorizontalRule’ แทรกเส้นคั่นบรรทัดลงในเอกสาร
‘Smiley’ แทรกรูปสื่ออารมณ์ลงในเอกสาร
‘SpecialChar’ แทรกตัวอักขระพิเศษลงในเอกสาร (เช่น © ® ™ เป็นต้น)
‘PageBreak’ แทรก page break ลงในเอกสาร (สำหรับการพิมพ์ออกทางเครื่องพิมพ์เท่านั้น)


กลุ่มเครื่องมือสำหรับการจัดรูปแบบเอกสาร

‘Styles’ กำหนดรูปแบบหรือลักษณะการแสดงผลของบล็อกข้อความ
‘Format’ กำหนดรูปแบบหรือลักษณะของย่อหน้า
‘Font’ กำหนดรูปแบบหรือลักษณะของตัวอักษร (เช่น Tahoma, Courier New, Arial ฯลฯ)
‘FontSize’ กำหนดขนาดของตัวอักษร
‘TextColor’ กำหนดสีของตัวอีกษร
‘BGColor’ กำหนดสีของพื้นหลัง
‘Maximize’ ขยายขนาดของ editer ให้เต็มเฟรม
‘ShowBlocks’ แสดง/ซ่อนขอบเขตของย่อหน้า
‘About’ แสดงข้อมูลเกี่ยวกับ CKEditor

เอาละครับ เมื่อเรารู้ว่า CKEditor ได้จัดเตรียมปุ่มเครื่องมืออะไรไว้ให้เราใช้งานบ้าง คราวนี้เราจะมาเลือกเฉพาะปุ่มเครื่องมือที่เราต้องการและจัดหมวดหมู่เสียใหม่ของปุ่มเครื่องมือเสียใหม่ให้ตามใจเรากันเลยครับ

วิธีที่ 1 การกำหนดแถบเครื่องมือขณะออกแบบ โดยระบุปุ่มเครื่องมือที่ต้องการใช้ในขณะที่สร้าง instance ของ editor

<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>
CKEDITOR.replace(‘txbEditor1′, {
toolbar:
[ [‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’],

[‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’,
[‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’] ]
});

</script>

 รูปตัวอย่างการกำหนดแถบเครื่องมือของ CKEditor แบบ ad hoc รูปตัวอย่างการกำหนดแถบเครื่องมือของ CKEditor แบบ ad hoc

วิธีที่ 2 เป็นการเพิ่มชุดแถบเครื่องมือแบบถาวร โดยการเพิ่มลงไปในสคริปต์หลักของ CKEditor โดยตรง และทำการกำหนดชื่อให้กับชุดแถบเครื่องมือชุดใหม่ที่เราสร้างขึ้น วิธีนี้จะยุ่งยากซับซ้อนกว่าวิธีแรกสักนิดเพราะเราจะต้องเข้าไปยุ่งกับโค้ด java script ของ CKEditor (คือไฟล์ ckeditor.js)
เริ่มต้น
1. เปิดไฟล์ ckeditor.js (จะเห็นว่าโค้ด java script ของไฟล์นี้มันจะเรียงกันเป็นพืดไปหมด ดังรูปครับ ดังนั้นจะต้องค่อยๆหา) และค้นหาคำว่า ‘i.toolbar_Basic’ จะพบ ข้อความประมาณนี้
i.toolbar_Basic=[[‘Bold’,’Italic’,’-‘,’NumberedList’,’BulletedList’,’-‘,’Link’,’Unlink’,’-‘,’About’]]; ค่อยๆเลื่อนเคอร์เซอร์ไปจนถึง ‘;’ ที่เป็นตัวปิดประโยคของบรรทัด i.toolbar_Basic นะครับ จากนั้นแทรกโค้ดสำหรับแสดงแถบเครื่องมือที่เราต้องการ ดังตัวอย่างต่อไปนี้ครับ i.toolbar_Custom=[[‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘-‘, ‘Link’, ‘Unlink’], [‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’, [‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’]]; แล้วบันทึกไฟล์ให้เรียบร้อย

2. ที่หน้าออกแบบ
<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>

CKEDITOR.replace(‘txbEditor1′, {
toolbar: ‘Custom’
});
</script>
บันทึกและทดลองรันดู จะได้ผลเหมือนกับวิธีที่ 1 แต่ด้วยวิธีนี้เราไม่ต้องคอยกำหนดแถบเครื่องมือให้กับ editor ของเราในหน้าออกแบบทุกๆ ครั้ง

หากต้องการกำหนดให้ Custom toolbar ที่เราสร้างขึ้นเป็นค่าปริยายให้กับทุกๆ instance ของ editor ก็สามารถทำได้เช่นกันครับ โดย ค้นหาคำ “i.toolbar=’Full';” ใน ckeditor.js ซึ่งค่าปริยายที่เขามีให้เราในตอนแรกเลยก็คือ i.toolbar=’Full'; เราก็เพียงแต่ เปลี่ยนเป็น i.toolbar=’Custom'; เท่านั้น จากนั้นก็บันทึกไฟล์ให้เรียบร้อย ต่อไปนี้เวลาที่เราสร้าง instance ของ editor ในหน้าออกแบบ เราก็ไม่จำเป็นจะต้องกำหนดชื่อของชุดแถบเครื่องมืออีกต่อไป เราสามารถเขียนสั้นๆได้ดังต่อไปนี้ครับ

<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>

CKEDITOR.replace(‘txbEditor1′);
</script>

วิธีที่ 3 วิธีนี้ง่ายกว่าวิธีที่ 2 เยอะครับ และผมก็อยากจะขอแนะนำวิธีนี้ด้วย เพราะว่าวิธีที่ 2 นั้นค่อนข้างจะเกรียนไปสักนิด และทำให้เกิดข้อผิดพลาดได้ง่ายมาก เนื่องจากโค้ด java script ในไฟล์ ckeditor.js นั้น (เข้าใจว่า)เป็นโค้ดที่ถูก compress แล้ว เป็น minification file ทำให้โค้ดมันติดกันเป็นพรืดไปหมด นอกจากนี้ชื่อตัวแปรต่าง ๆ ก็ถูกเปลี่ยน/ย่อให้สั้นลง ทำให้โด้ดอ่านได้ยากขึ้นมาก แต่เนื่องจากวิธีที่ 2 นั้น เป็นวิธีที่ผมเคยใช้เมื่อสมัยยังเป็น FCKEditor อยู่ครับ ก็เลยนำมาลงในบทความด้วย

สำหรับวิธีที่ 3 นี้ เราไม่จำเป็นต้องแก้ไขโค้ดของไฟล์ ckeditor.js ในการเพิ่มหรือแก้ไขแถบเครื่องมือแต่อย่างใด แต่เราจะเพิ่มรายการแถบเครื่องมือลงในไฟล์ config.js แทน ดังตัวอย่าง:
// ไฟล์ config.js
CKEDITOR.editorConfig = function(config) {

// Custom toolbar
config.toolbar_Custom =
[ [‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’],
[‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’,
[‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’] ];
// Minimum toolbar : for just only necessary usage
config.toolbar_Minimum =
[ [‘Source’], [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’, ‘-‘, ‘About’] ];
};

เวลาเรียกใช้ในหน้าออกแบบ ก็ระบุชื่อแถบเครื่องมือที่เราต้องการใช้งาน เช่นเดียวกับตัวอย่างโค้ดที่หน้าออกแบบของวิธีที่ 2 ครับ

หากต้องการกำหนดให้ Custom toolbar ที่เราสร้างขึ้นเป็นค่าปริยายให้กับทุกๆ instance ของ editor ก็สามารถทำได้เช่นกันครับ โดยระบุชื่อชุดแถบเครื่องมือที่เราต้องการใช้งานเป็นแถบเครื่องมือปริยาย ใน config.js ได้เลย ดังตัวอย่าง:

// ไฟล์ config.js
CKEDITOR.editorConfig = function(config) {
// Custom toolbar
config.toolbar_Custom =
[ [‘Bold’, ‘Italic’, ‘Underline’, ‘-‘, ‘Subscript’, ‘Superscript’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’],
[‘Outdent’, ‘Indent’, ‘-‘, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’], ‘/’,
[‘Image’, ‘Flash’, ‘Smiley’, ‘-‘, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’] ];
// Minimum toolbar : for just only necessary usage
config.toolbar_Minimum =
[ [‘Source’], [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’, ‘-‘, ‘About’] ];

config.toolbar = ‘Custom’;
};

ส่วนการเรียกใช้ในหน้าออกแบบก็เพียงแค่ใช้สคริปต์ <script type=”text/javascript” language=”javascript”>CKEDITOR.replace(‘txbEditor1′);</script> เท่านั้นเองครับ




คุณต้องสมัครสมาชิก ถึงจะโพสกระทู้ได้




คำยอดฮิต :- ckeditor