Notion-Clone : โคลนโอเพนซอร์สของเอดิเตอร์ Notion

• นำฟีเจอร์บางส่วนของ Notion มาสร้างด้วย Next.js + React.js + Express.js เป็นต้น

เอดิเตอร์

• แก้ไขแบบบล็อกต่อบล็อก

• คำสั่งสแลช ( พิมพ์ / เพื่อเปลี่ยนประเภทของบล็อก )

• รองรับการป้อนแท็ก HTML

• อัปโหลดรูปภาพ ( /image )

• เปลี่ยนลำดับบล็อกด้วยการลากและวาง

เซิร์ฟเวอร์

• รองรับการแก้ไขแบบ Guest

• ฟังก์ชันจัดการผู้ใช้

• การจัดตารางงาน (ลบบัญชีและหน้าที่ไม่ได้ใช้งาน)

[xguru]

มีเว็บเอดิเตอร์แบบ WYSIWYG ออกมาเยอะมากจริง ๆ.. แต่ก็หาตัวที่ถูกใจเป๊ะ ๆ ได้ยากเหมือนกันครับ

ก่อนหน้านี้ผมเคยรวบรวมโอเพนซอร์สเอดิเตอร์ที่เกี่ยวข้องไว้ทั้งหมด เลยเอามาฝากครับ

SummerNote: https://summernote.org - Super Simple WYSIWYG Editor on Bootstrap. เป็นโอเพนซอร์สเอดิเตอร์ที่คุณ Hong Young-taek สร้างขึ้น และมีชาวเกาหลีหลายคนร่วมพัฒนาอยู่

Quill: https://quilljs.com - An API Driven Rich Text Editor

Slate: https://www.slatejs.org - A completely customizable framework for building rich text editors

Trumbowyg: https://alex-d.github.io/Trumbowyg - A lightweight WYSIWYG editor

ContentTools: http://getcontenttools.com - A beautiful & small content editor

Squire: https://github.com/neilj/Squire - HTML5 rich text editor

Editor.js: https://codex.so/editor - เอดิเตอร์สไตล์บล็อกรุ่นใหม่ บันทึกผลลัพธ์เป็น JSON

ProseMirror: https://prosemirror.net/ - A toolkit for building rich-text editors on the web, เอดิเตอร์ที่รองรับการแก้ไขร่วมกัน

Gutenberg : https://wordpress.org/gutenberg/ - เอดิเตอร์ของ WordPress

webiny : https://www.webiny.com/ - CMS for Serverless Web Development

GrapesJS : https://grapesjs.com/ - Web Builder Framework

Craft.js : https://github.com/prevwong/craft.js - A React Framework for building extensible drag and drop page editors

Draft.js : https://draftjs.org/ - Rich Text Editor Framework for React

Outline Rich MarkDown : https://github.com/outline/rich-markdown-editor

Edtr.io : https://edtr.io/ - โอเพนซอร์ส WYSIWYG editor ที่เขียนด้วย React https://th.news.hada.io/topic?id=1625

[misolab]

ขอบคุณครับ