Tag Archive CKEditor

Byphunsanit

CKEditor template builder

การใส่ 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 ในเนื้อหาให้แล้วมาแก้ทีหลัง จะดีกว่า

เริ่มกันเลย

  1. โหลด CKEditor
  2. โหลด plugin Content Templates แตกไฟล์โพลเดอร์ ออกมา ในโฟลเดอร์ ckeditor\plugins\templates เป็น \ckeditor\plugins\templates
  3. เขียน 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>
    
  4. สร้างเทมเพลตเพิ่มโดยเปิดไฟล์ \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

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

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