CKEditor template builder

Byphunsanit

builder, CKEditor, snipted, Template, WYSIWYG, บิวเดอร์, สนิปเพต, เทมเพลต

การใส่ content เดี่ยวนี้จะมีรูปแบบที่บังคับเหมือนๆกัน ทั้งที่เป็นเพราะว่า ต้องการให้เนื่อหาออกมาใน format รูปแบบเดียวกันและ พวก framework อย่าง bootstrap ก็ จะมีโครงสร้าง อย่าง tabs ก็จะมีโครงสร้าง
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 ประมาณ
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: '<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 ง่ายขึ้นเยอะเลย

CKEditor template builder