Content เนื้อหาสำคัญสุดบนหน้าเว็บไซต์ Editor เครื่องมือที่สุดแสนจะจำเป็นสำหรับคนใช้งานเว็บเพื่อการพิมพ์ข้อมูลต่างๆลงไป ดังนั้นตัวผู้ใช้เลยมักจะมองและให้ความสำคัญกับ Editor อยู่เป็นหลัก ในความสำคัญของระบบ
Editor ฟรีๆดีๆมีเยอะครับ หลายตัว หลากความสามารถกันไป แต่วันนี้มาดูเจ้านี้กันดีกว่า Editor.js เครื่องมือที่ทำให้ เราสามารถทำงานได้แบบ block styled เห็นแล้วนึกถึง Medium กับ Gutenberg อยู่ไม่น้อยเลย
อะไรคือ Block Styled Editor
จริงๆต้องบอกว่า ถ้าสมัยก่อน เวลาเราเขียน Content อะไร มันจะถูกสร้างขึ้นมาบน กล่อง Textarea ของ HTML ทั่วไป เวลาส่งข้อมูลออกมา จะเป็น HTML พร้อมกับ Data ต่างๆที่เรายัดลงไปมาแบบก้อนเดียวเลย
แต่พอมาเป็นแนวนี้ เราจะสร้างบนกล่องแบบเดิม แต่ข้อมูลจะส่งมาเป็น JSON และมองทุกอย่างเป็น Block ด้วยระบุตรงตัวมาว่าเป้น type อะไร paragraph หรือ header แล้วก็ data ข้างในเป้นอย่างไร แบบนี้
{
"time" : 1550476186479,
"blocks" : [
{
"type" : "paragraph",
"data" : {
"text" : "The example of text that was written in <b>one of popular</b> text editors."
}
},
{
"type" : "header",
"data" : {
"text" : "With the header of course",
"level" : 2
}
},
{
"type" : "paragraph",
"data" : {
"text" : "So what do we have?"
}
}
],
"version" : "2.8.1"
}
Key features
- It is a block-styled editor
- It returns clean data output in JSON
- Designed to be extendable and pluggable with a simple API
ความน่าสนใจนอกจาก การสร้างกลุ่มข้อความเป็น block แล้ว เค้ายังทำการ returns clean data ออกไปเป็น รูปแบบของ JSON อีกด้วยนะ ทำให้สะดวกต่อการนำไปใช้ ทั้ง Web, mobile, AMP หรือจะเป็น speech readers ก็ยังไหว
ทีนี้ เจ้าตัวระบบเอง เค้าก็มีความสามารถเบื้องต้น มาให้ยังไม่เยอะหนัก น่าจะเพื่อเรียกความเบา และนับว่าเป็นการใช้งานเท่าที่จำเป็นของแต่ละคน ดังนั้น ใครยากได้ความสามารถที่นอกเหนือกันไป ก็ไม่ใช่จะไม่มี
แต่เค้าทำออกมาเป็น API เหมือนเป็น feature ที่แยกกันออกมาให้เรา นำไปใช้งานได้อีก แต่ต้อง Load code ออกมาวางกันก่อน งานดีเลยแบบนี้
แถมตัวเราเอง ยังสามารถเขียน Plugin เสริมตามแต่สะดวกของเราลงไป เพื่อใช้งานเองก็ได้ด้วยนะ Format Code ก็ดูไม่ได้ยากเย็นอะไร
นับว่าการทำงานแบบนี้ น่าจะกลายเป็นวัฒนธรรมรูปแบบใหม่ หลังจากที่เห็น Gutenberg ก็ทำมา ให้ wordpress สามารถแยก แบ่ง และนำกลับมาใช้ใหม่ของในส่วน Block ได้ด้วย เหมือนกัน
งานดีๆแบบนี้ ฝากให้ทดลองกันหน่อยครับ ผมว่าผู้ใช้อาจจะดู งงในตอนแรกนิดหน่อย ไม่ชินเหมือนใช้ WYSIWYG ทั่วๆไป แต่ถ้าได้ลองเล่นแล้วจะติดใจนะจ๊ะ
Link :: https://editorjs.io/
คุณอาจกำลังมองหา CSS Framework ซักตัว ที่จะช่วยเปลี่ยนมุมมองของหน้าเว็บไซต์คุณ Link: NES-Style Framework
