Content ยุคใหม่สร้างด้วย Editor JS เครื่องมือแนว Block

Content เนื้อหาสำคัญสุดบนหน้าเว็บไซต์ Editor เครื่องมือที่สุดแสนจะจำเป็นสำหรับคนใช้งานเว็บเพื่อการพิมพ์ข้อมูลต่างๆลงไป ดังนั้นตัวผู้ใช้เลยมักจะมองและให้ความสำคัญกับ Editor อยู่เป็นหลัก ในความสำคัญของระบบ

content with editor js

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

Leave a Reply

Your email address will not be published. Required fields are marked *