การจัดให้รูปภาพในเนื้อหาชิดซ้ายและมีข้อความล้อมรอบด้วย Text Edit

ก่อนอื่นต้องทำความเข้าใจกันก่อนว่า Text Editor บนเว็บ ไม่เหมือนกันกับ Text Editor เช่น Word ดังนั้น เราอาจไม่สามารถจัดการรูปแบบต่างๆของเนื่อหาที่เขียนได้เช่นเดียวกับ Word เหตุผลก็เพราะว่า Text Editor บนเว็บทำงานโดยการผูกติดกับ โค้ด HTML ทำให้การจัดรูปแบบจำต้องอ้างอิงตามลักษณะของ HTML เช่น หากเราต้องการจัดเอกสารชิดซ้าย Text Editor จะจัดข้อความให้ยู่ภายใน tag p และกำหนด align เป็น left
<p style="text-align:left">ข้อความนี้ชิดซ้าย</p>

ซึ่งอย่างไรก็ตาม เทคนิคด้านบน ไม่สามารถตอบสนองต่อความต้องการได้ทั้งหมด เนื่องจากคุณสมบัติของ tag p เอง เช่นไม่สามารถทำให้รูปอยู่ชิดซ้าย และ มีข้อความล้อมรอบได้ ผมยกตัวอย่างนี้



	
พยายามจัดข้อความและรูปภาพนี้ชิดซ้าย โดยใช้เครื่องมือของ Text Editor

แต่หากเราใช้ความรู้เกี่ยวกับ CSS มาช่วยจัดการแล้ว การจัดรูปแบบของเนื้อหาให้เป็นไปตามความต้องการก็ง่ายขึ้น โชคดีที่ Text Editor เช่น CKEditor ที่ผมเลือกใช้กับ GCMS ยอมให้เราแก้ไขโค้ด HTML โดยตรงได้ โดยการคลิกที่ปุ่ม "ดูรหัส HTML" ซึ่ง Text Editor จะแสดงเนื้อหาที่เป็น HTML ของ Text Editor ให้เราทำการแก้ไขให้มีผลตามต้องการโดยการระบุ CSS ที่ต้องการใช้ลงใน Text Editor โดยตรง



	แต่หากเราใช้ความรู้เกี่ยวกับ CSS มาช่วยจัดการแล้ว การจัดรูปแบบของเนื้อหาให้เป็นไปตามความต้องการก็ง่ายขึ้น โชคดีที่ Text Editor เช่น CKEditor ที่ผมเลือกใช้กับ GCMS ยอมให้เราแก้ไขโค้ด HTML โดยตรงได้ โดยการคลิกที่ปุ่ม "ดูรหัส HTML" ซึ่ง Text Editor จะแสดงเนื้อที่เป็น HTML ของ Text Editor ให้เราทำการแก้ไขให้มีผลตามต้องการโดยการระบุ CSS ที่ต้องการใช้ลงใน Editor โดยตรง

ตัวอย่างด้านบน เป็นการกำหนด CSS ให้กับ img โดยใช้ float:left เพื่อให้รูปภาพชิดซ้าย และสามารถมีข้อความล้อมรอบได้ครับ

<p>

<img alt="" src="https://www.goragod.com/datas/thumb/Images/8T1CRY8DQS.jpg" style="margin: 0px 10px 0px 0px; width: 70px; float: left; height: 70px" />

นี่คือการจัดให้รูปภาพชิดซ้าย โดยการใช้เทคนิค CSS ช่วยในการจัดการ

</p>

เทคนิคนี้ไม่ได้จำกัดเฉพาะรูปแบบใดรูปแบบหนึ่ง แต่สามารถใช้งานได้กับ tag อื่นๆ (หรือแม้แต่ tag ที่ไม่สนับสนุนบน Editor) ให้สามารถใช้งานได้อิสระเหมือนกับการนั่งเขียนหน้าเว็บเองเลยทีเดียว