CKEditor template builder

phunsanit

13 ปี ago

การใส่ content เดี่ยวนี้จะมีรูปแบบที่บังคับเหมือน ๆ กัน ทั้งที่เป็นเพราะว่า ต้องการให้เนื่อหาออกมาใน format รูปแบบเดียวกันและ พวก framework อย่าง bootstrap ก็ จะมีโครงสร้าง อย่าง tabs ก็จะมีโครงสร้าง
Bootstrap Tabs

&lt;ul class="nav nav-tabs">
 &lt;li class="active">&lt;a data-toggle="tab" href="#home">Home&lt;/a>&lt;/li>
 &lt;li>&lt;a data-toggle="tab" href="#menu1">Menu 1&lt;/a>&lt;/li>
 &lt;li>&lt;a data-toggle="tab" href="#menu2">Menu 2&lt;/a>&lt;/li>
&lt;/ul>
 
&lt;div class="tab-content">
 &lt;div id="home" class="tab-pane fade in active">
 &lt;h3>HOME&lt;/h3>
 &lt;p>Some content.&lt;/p>
 &lt;/div>
 &lt;div id="menu1" class="tab-pane fade">
 &lt;h3>Menu 1&lt;/h3>
 &lt;p>Some content in menu 1.&lt;/p>
 &lt;/div>
 &lt;div id="menu2" class="tab-pane fade">
 &lt;h3>Menu 2&lt;/h3>
 &lt;p>Some content in menu 2.&lt;/p>
 &lt;/div>
&lt;/div>

ถ้าจะต้อง copy จาก template snipted ก็ไม่สะดวก ไหน ๆ ก็ใช้ WYSIWYG ตอนที่กรอกข้อมูลอยู่แล้วก็ทำให้มันใส่ เทมเพลต template ในเนื้อหาให้แล้วมาแก้ทีหลัง จะดีกว่า

เริ่มกันเลย

โหลด CKEditor
โหลด plugin Content Templates แตกไฟล์โพลเดอร์ ออกมา ในโฟลเดอร์ ckeditor\plugins\templates เป็น \ckeditor\plugins\templates

เขียน code ประมาณ
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>

สร้างเทมเพลตเพิ่มโดยเปิดไฟล์ \ckeditor\plugins\templates\templates\default.js

ใส่ภาพตัวอย่างที่ \ckeditor\plugins\templates\templates\images

 templates: [
...
{
  title: 'Bootstrap Tabs',
  image: 'bootstrapTabs.gif',
  description: 'add bootstrap tabs to content.',
  html: '&lt;ul class="nav nav-tabs">' +
'&lt;li class="active">&lt;a data-toggle="tab" href="#home">Home&lt;/a>&lt;/li>' +
'&lt;li>&lt;a data-toggle="tab" href="#menu1">Menu 1&lt;/a>&lt;/li>' +
'&lt;li>&lt;a data-toggle="tab" href="#menu2">Menu 2&lt;/a>&lt;/li>' +
'&lt;/ul>' +
'&lt;div class="tab-content">' +
'&lt;div id="home" class="tab-pane fade in active">' +
'&lt;h3>HOME&lt;/h3>' +
'&lt;p>Some content.&lt;/p>' +
'&lt;/div>'+
'&lt;div id="menu1" class="tab-pane fade">' +
'&lt;h3>Menu 1&lt;/h3>' +
'&lt;p>Some content in menu 1.&lt;/p>' +
'&lt;/div>' +
'&lt;div id="menu2" class="tab-pane fade">' +
'&lt;h3>Menu 2&lt;/h3>' +
'&lt;p>Some content in menu 2.&lt;/p>' +
'&lt;/div>' +
'&lt;/div>'
 },
...
 ]
} );

ทดลองใช้งานดู ตัว icons จะอยู่ที่ เมนูชุดแรกหลังปุ่มพิมพ์ ถ้าไม่เห็นเทมเพลตที่สร้างลอง clear cache ดูก่อน

เสียเวลาเขียนระบบเพิ่ม แต่อำนวยความสะดวกให้ทำ content ง่ายขึ้นเยอะเลย