🧩 Block Editor

Lightweight, framework-agnostic block-based content editor

Built with Quill.js for rich text and Sortable.js for drag-and-drop control.

---

✨ Overview

Block Editor is a lightweight, extensible block-based editor that lets users combine rich-text and media content in one simple UI — perfect for blog posts, product pages, or CMS use.

It provides:

• 📝 Rich Text Editor blocks (powered by Quill.js)
• 🖼️ Media blocks for uploads or URLs (Images, Videos, PDFs, YouTube/Vimeo embeds)
• 🧱 Drag-and-drop block reordering via Sortable.js
• 🔁 Duplicate / Toggle / Remove blocks
• 💾 Persistent content via localStorage
• 🔍 Live preview & JSON export
• ⚙️ Auto-injection of hidden fields for server submission

---

🚀 Quick Start

1. Include dependencies
   Add Quill.js, Sortable.js, and Block Editor files to your HTML:

   <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.7/quill.snow.css">
   <link rel="stylesheet" href="dist/block-editor.min.css">
   
   <script defer src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
   <script defer src="dist/block-editor.min.js"></script>
   

2. Add the editor container Insert this where you want the editor to appear (e.g. inside a form):

Save

The editor automatically injects two hidden inputs:

contents_json → serialized JSON blocks

contents_json_html → compiled HTML preview

3. Start editing!

Click + Add Editor for a new text block.

Click + Add Media to upload or link a file.

Use the ☰ handle to reorder.

Use Export JSON to download your content.

👉 See example/basic.html for a working demo.

4. Data Structure Your editor content is stored as JSON for easy rehydration: [ { "type": "editor", "id": "b1", "content": "

   Hello world!

   " }, { "type": "media", "id": "b2", "media": { "name": "cover.jpg", "type": "image/jpeg", "url": "https://example.com/cover.jpg", "width": "100%", "height": "auto" } } ]

6. File Structure block-editor/ ├── dist/ │ ├── block-editor.min.js │ ├── block-editor.min.css ├── example/ │ └── basic.html │ └── vue-basic.html ├── README.md ├── CONTRIBUTING.md ├── LICENSE └── package.json

🤝 Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

🛡️ License

Licensed under the MIT License.

Copyright © 2025 Shuaib B. A

🌐 Connect

💻 GitHub: @ShuaibBashiru Twitter: @ShuaibBashiru

🌍 Texlus Digital Technology – EduTech & Community Innovation

✉️ Feedback / Feature requests welcome via Issues tab