การใส่ content เดี่ยวนี้จะมีรูปแบบที่บังคับเหมือนๆกัน ทั้งที่เป็นเพราะว่า ต้องการให้เนื่อหาออกมาใน format รูปแบบเดียวกันและ พวก framework อย่าง bootstrap ก็ จะมีโครงสร้าง อย่าง tabs ก็จะมีโครงสร้าง
Bootstrap Tabs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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
- โหลด plugin Content Templates แตกไฟล์โพลเดอร์ ออกมา ในโฟลเดอร์ ckeditor\plugins\templates เป็น \ckeditor\plugins\templates
- เขียน code ประมาณ
CKEditor: Content Templates12345678910111213141516171819<!
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
ใส่ภาพตัวอย่างที่ \ckeditor\plugins\templates\templates\images1234567891011121314151617181920212223242526272829templates: [
...
{
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>'
},
...
]
} );
- ทดลองใช้งานดู ตัว icons จะอยู่ที่ เมนูชุดแรกหลังปุ่มพิมพ์ ถ้าไม่เห็นเทมเพลตที่สร้างลอง clear cache ดูก่อน
เสียเวลาเขียนระบบเพิ่ม แต่อำนวยความสะดวกให้ทำ content ง่ายขึ้นเยอะเลย