Site icon บริษัท โค๊ดบี จำกัด

วิธีทำ ckeditor plugins แบบง่าย ๆ ติดตั้งใช้งานเอง

codebee
วิธีทำ-ckeditor-plugin-1

วิธีทำ-ckeditor-plugin-1

<h3>วิธีทำ ckeditor plugins แบบง่าย ๆ ติดตั้งใช้งานเอง<&sol;h3>&NewLine;<p>&NewLine;<strong>วิธีทำ ckeditor plugins แบบง่าย ๆ ติดตั้งใช้งานเอง<&sol;strong><br &sol;>&NewLine;ckeditor โปรแกรมจัดการเนื้อหาบนเว็บไซต์ นอกจากความสามารถและ plugins ที่มีให้เลือกใช้มากมายแล้ว ยังเปิดให้นักพัฒนาทั่วไปสามารถพัฒนา plugin ไว้ใช้งานเองอีกด้วย ขั้นตอนการพัฒนาและติดตั้งก็ไม่ได้ยุ่งยากอะไรมากมาย ลองมาดูกันครับว่าเราจะสามารถพัฒนา ckeditor plugin ได้อย่างไร <&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างไฟล์ plugin&period;js และ icon<&sol;h4>&NewLine;<p>1&period; สร้าง New Folder ในโฟลเด้อ plugin ของ ckeditor ตั้งชื่อให้สื่อความหมายว่า plugin ทำงานเกี่ยวกับอะไร ในบทความนี้ผมจะตั้งชื่อว่า plugin&lowbar;name<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>รูปแสดงตัวอย่างโครงสร้าง ckeditor plugin<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " >plugins&sol;ชื่อปลักอินที่เราสร้าง&sol;icons&sol;icon&period;png &NewLine;plugins&sol;ชื่อปลักอินที่เราสร้าง&sol;plugin&period;js<&sol;pre>&NewLine;<p><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;วิธีทำ-ckeditor-plugin-1&period;png" alt&equals;"วิธีทำ-ckeditor-plugin" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;2&period; ในโฟลเด้อ plugin&lowbar;name สร้าง New Folder ตั้งชื่อว่า icons<br &sol;>&NewLine;3&period; ในโฟลเด้อ icons ให้วางรูปไอคอนที่จะแสดงบน toolbar ของ ckeditor ตั้งชื่อว่า icons&period;png<br &sol;>&NewLine;4&period; ในโฟลเดื้อหลักของ plugin&lowbar;name สร้างไฟล์ plugin&period;js และเขียนคำสั่งเพิ่ม plugin ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >CKEDITOR&period;plugins&period;add&lpar; 'plugin&lowbar;name'&comma; &lbrace; &sol;&sol; ชื่อโฟลเด้อหรือชื่อ plugin &NewLine;&Tab;init&colon; function&lpar; editor &rpar; &lbrace; &NewLine;&Tab;&Tab;editor&period;ui&period;addButton&lpar; 'plugin&lowbar;name'&comma; &lbrace; &sol;&sol; เพิ่มปุ่มไปที่ ckeditor toolbar &NewLine;&Tab;&Tab;&Tab;&Tab;label&colon; 'ทดสอบเพิ่ม plugin'&comma; &NewLine;&Tab;&Tab;&Tab;&Tab;command&colon; 'plugin&lowbar;command'&comma; &sol;&sol; event เมื่อมีการคลิกปุ่มให้ไปทำฟังก์ชั่น plugin&lowbar;command &NewLine;&Tab;&Tab;&Tab;&Tab;toolbar&colon; 'tools&comma;1'&comma; &NewLine;&Tab;&Tab;&Tab;&Tab;icon&colon; this&period;path &plus; 'icons&sol;icon&period;png' &NewLine;&Tab;&Tab;&rcub;&rpar;&semi; &NewLine;&Tab;&Tab;editor&period;addCommand&lpar; 'plugin&lowbar;command'&comma; &lbrace; &sol;&sol; เมื่อคลิกที่ปุ่มไอคอนจะทำงานฟังก์ชั่นนี้ &NewLine;&Tab;&Tab;&Tab;exec&colon; function&lpar; editor &rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;&sol;&sol; ทำงานตรงนี้หลังจากกดปุ่ม &NewLine;&Tab;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;&rcub;&rpar;&semi; &NewLine;&Tab;&Tab;&Tab; &NewLine;&Tab;&rcub; &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>วิธีเปิดใช้งาน plugin<&sol;h4>&NewLine;<p>หลังจากที่ได้สร้างโครงสร้างโฟลเด้อ และไฟล์ plugin&period;js เรียบร้อยแล้วให้ทดลองเปิดใช้งาน plugin โดยการติดตั้ง plugin นั้นจะมีอยู่ 2 ส่วนด้วยกันคือ<br &sol;>&NewLine;1&period; เพิ่มการใช้งาน plugin เปิดไฟล์ config&period;js ของ ckeditor และเพิ่มคำสั่งใช้งาน plugin <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;config&period;extraPlugins &equals; 'plugin&lowbar;name'&semi; &NewLine;<&sol;pre>&NewLine;<p>2&period; เพิ่มปุ่มเข้าไปที่ toolbar ของ ckeditor เขียนคำสั่งที่ไฟล์ config&period;js ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >config&period;toolbar &equals; &lbrack; &NewLine;&Tab;&lbrace; name&colon; 'tools'&comma; items &colon; &lbrack; 'plugin&lowbar;name'&comma;'About' &rsqb;&rcub; &NewLine;&rsqb;&semi;<&sol;pre>&NewLine;<p>แต่ถ้าเราใช้งาน ckeditor จากไฟล์ sample&period;js ซึ่งเป็นตัวอย่างการทำงานที่ติดมาตอนดาวน์โหลดให้ไปเขียนที่ไฟล์ sample&period;js โดยเขียนในส่วนของ <strong>CKEDITOR&period;replace<&sol;strong> ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >CKEDITOR&period;replace&lpar; 'editor'&comma; &NewLine;&lbrace; &NewLine;&Tab;extraPlugins &colon; 'plugin&lowbar;name'&comma; &NewLine;&Tab;toolbar &colon; &NewLine;&Tab;&Tab;&lbrack; &NewLine;&Tab;&Tab;&Tab;&lbrack; 'Bold'&comma; 'Italic'&comma; '-'&comma; 'NumberedList'&comma; 'BulletedList'&comma; '-'&comma; 'Link'&comma; 'Unlink' &rsqb;&comma; &NewLine;&Tab;&Tab;&Tab;&lbrack; 'plugin&lowbar;name' &rsqb; &NewLine;&Tab;&Tab;&rsqb; &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ตัวอย่าง plugin เมื่ออยู่บน ckeditor toolbar<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;วิธีทำ-ckeditor-plugin-2&period;png" alt&equals;"วิธีทำ-ckeditor-plugin" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีเพิ่ม dialog เมื่อคลิกที่ไอคอน plugin<&sol;h4>&NewLine;<p>1&period; ในส่วนของ <strong>editor&period;ui&period;addButton<&sol;strong> เปลี่ยนจาก plugin&lowbar;command เป็น dialog&lowbar;command<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >command&colon; 'dialog&lowbar;command'<&sol;pre>&NewLine;<p>2&period; ใช้คำสั่ง addCommand เพื่อสร้างและเปิด dialog<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >editor&period;addCommand&lpar;'dialog&lowbar;command'&comma; new CKEDITOR&period;dialogCommand&lpar;'dialog&lowbar;command'&rpar;&rpar;&semi;<&sol;pre>&NewLine;<p>3&period; สร้าง dialog ui โดยเขียนโค๊ดดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >CKEDITOR&period;dialog&period;add&lpar; 'dialog&lowbar;command'&comma; function&lpar; editor &rpar; &NewLine;&lbrace; &NewLine; return &lbrace; &NewLine;&Tab; title &colon; 'Upload Image'&comma; &sol;&sol; ส่วนการตั้งค่าของ Window UI &NewLine;&Tab; minWidth &colon; 400&comma; &NewLine;&Tab; minHeight &colon; 200&comma; &NewLine;&Tab; contents &colon; &lbrack; &sol;&sol; ส่วนการตั้งค่าของ Tab UI &NewLine;&Tab;&Tab; &lbrace; &NewLine;&Tab;&Tab;&Tab;id &colon; 'UploadTab'&comma; &NewLine;&Tab;&Tab;&Tab;label &colon; 'First Tab'&comma; &NewLine;&Tab;&Tab;&Tab;title &colon; 'First Tab'&comma; &NewLine;&Tab;&Tab;&Tab;elements &colon; &sol;&sol; ส่วนการตั้งค่าของ Element UI &NewLine;&Tab;&Tab;&Tab;&lbrack; &NewLine;&Tab;&Tab;&Tab; &lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab; id &colon; 'filedata'&comma; &NewLine;&Tab;&Tab;&Tab;&Tab; type &colon; 'file'&comma; &NewLine;&Tab;&Tab;&Tab;&Tab; label &colon; 'Select image file' &NewLine;&Tab;&Tab;&Tab; &rcub; &NewLine;&Tab;&Tab;&Tab;&rsqb; &NewLine;&Tab;&Tab; &rcub; &NewLine;&Tab; &rsqb;&comma; &NewLine;&Tab; buttons&colon; &lbrack; &sol;&sol; ปุ่มที่อยู่ใน dialog &NewLine;&Tab;&Tab;&Tab;CKEDITOR&period;dialog&period;okButton&comma; &NewLine;&Tab;&Tab;&Tab;CKEDITOR&period;dialog&period;cancelButton &NewLine;&Tab; &rsqb;&comma; &NewLine;&Tab; onOk &colon; function&lpar;&rpar; &lbrace; &sol;&sol; callback เมื่อคลิกปุ่ม OK &NewLine;&Tab;&Tab; &Tab;&Tab; &NewLine;&Tab; &rcub; &NewLine; &rcub;&semi; &NewLine;&rcub; &rpar;&semi;<&sol;pre>&NewLine;<p>อธิบายโค๊ดด้านบน ผมได้สร้าง dialog ขึ้นมา 1 อัน ขนาด 400x200px มีแท็บเดียว ในแท็บนั้นผมได้เพิ่ม input field สำหรับ browse file และเลือกใช้งานปุ่ม ok และ cancel ที่เป็น default ของ ckeditor<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>หน้าตาของ dialog ที่สร้าง<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;วิธีทำ-ckeditor-plugin-3&period;png" alt&equals;"วิธีทำ-ckeditor-plugin" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;

Exit mobile version