การใส่ content เดี่ยวนี้จะมีรูปแบบที่บังคับเหมือนๆกัน ทั้งที่เป็นเพราะว่า ต้องการให้เนื่อหาออกมาใน format รูปแบบเดียวกันและ พวก framework อย่าง bootstrap ก็ จะมีโครงสร้าง อย่าง tabs ก็จะมีโครงสร้าง[code language=”html” title=”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>
[/code]
ถ้าจะต้อง copy จาก template snipted ก็ไม่สดวก ไหนๆ ก็ใช้ WYSIWYG ตอนที่กรอกข้อมูลอยู่แล้วก็ทำให้มันใส่ เทมเพลต template ในเนื้อหาให้แล้วมาแก้ทีหลัง จะดีกว่า
เริ่มกันเลย
- โหลด CKEditor
- โหลด plugin Content Templates แตกไฟล์โพลเดอร์ ออกมา ในโฟลเดอร์ ckeditor\plugins\templates เป็น \ckeditor\plugins\templates
- เขียน code ประมาณ[code language=”html” title=”CKEditor: Content Templates”]
<!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>
[/code] - สร้างเทมเพลตเพิ่มโดยเปิดไฟล์ \ckeditor\plugins\templates\templates\default.js[code language=”javascript” title=”\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>’
},
…
]
} );
[/code]ใส่ภาพตัวอย่างที่ \ckeditor\plugins\templates\templates\images - ทดลองใช้งานดู ตัว icons จะอยู่ที่ เมนูชุดแรกหลังปุ่มพิมย์ ถ้าไม่เห็นเทมเพลตที่สร้างลอง clear cache ดูก่อน
เสียเวลาเขียนระบบเพิ่ม แต่อำนวยความสดวกให้ทำ content ง่ายขึ้นเยอะเลย
About the author