การใส่ content เดี่ยวนี้จะมีรูปแบบที่บังคับเหมือนๆกัน ทั้งที่เป็นเพราะว่า ต้องการให้เนื่อหาออกมาใน format รูปแบบเดียวกันและ พวก framework อย่าง bootstrap ก็ จะมีโครงสร้าง อย่าง tabs ก็จะมีโครงสร้าง
<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>Some content.</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Some content in menu 1.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div> </div>
ถ้าจะต้อง copy จาก template snipted ก็ไม่สดวก ไหนๆ ก็ใช้ WYSIWYG ตอนที่กรอกข้อมูลอยู่แล้วก็ทำให้มันใส่ เทมเพลต template ในเนื้อหาให้แล้วมาแก้ทีหลัง จะดีกว่า
เริ่มกันเลย
- โหลด CKEditor
- โหลด plugin Content Templates แตกไฟล์โพลเดอร์ ออกมา ในโฟลเดอร์ ckeditor\plugins\templates เป็น \ckeditor\plugins\templates
- เขียน code ประมาณ
<!doctype html> <html lang="th-TH"> <head> <meta charset="utf-8"> <title>CKEditor: Content Templates</title> </head> <body> <textarea name="editor" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea> <script src="ckeditor.js"></script> <script> CKEDITOR.replace( 'editor', { "extraPlugins": "templates", }); </script> </body> </html>
- สร้างเทมเพลตเพิ่มโดยเปิดไฟล์ \ckeditor\plugins\templates\templates\default.js
templates: [ ... { title: 'Bootstrap Tabs', image: 'bootstrapTabs.gif', description: 'add bootstrap tabs to content.', html: '<ul class="nav nav-tabs">' + '<li class="active"><a data-toggle="tab" href="#home">Home</a></li>' + '<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>' + '<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>' + '</ul>' + '<div class="tab-content">' + '<div id="home" class="tab-pane fade in active">' + '<h3>HOME</h3>' + '<p>Some content.</p>' + '</div>'+ '<div id="menu1" class="tab-pane fade">' + '<h3>Menu 1</h3>' + '<p>Some content in menu 1.</p>' + '</div>' + '<div id="menu2" class="tab-pane fade">' + '<h3>Menu 2</h3>' + '<p>Some content in menu 2.</p>' + '</div>' + '</div>' }, ... ] } );
ใส่ภาพตัวอย่างที่ \ckeditor\plugins\templates\templates\images
- ทดลองใช้งานดู ตัว icons จะอยู่ที่ เมนูชุดแรกหลังปุ่มพิมย์ ถ้าไม่เห็นเทมเพลตที่สร้างลอง clear cache ดูก่อน
เสียเวลาเขียนระบบเพิ่ม แต่อำนวยความสดวกให้ทำ content ง่ายขึ้นเยอะเลย