miniB HTML Editor – Documentation & Manual

License

MIT License

Copyright (c)  ColeNikol

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Features

Rich text formatting (bold, italic, underline, strikethrough)
Headings (H1–H6), blockquotes
Ordered & unordered lists
Text alignment (left, center, right, justify)
Text & background color pickers
Insert links (with rel, new tab options)
Insert/upload images (drag & drop, URL, alt, size)
Table creation & editing
Code blocks with language selection
Code Snippets Manager (add, edit, delete, filter, copy to clipboard)
Admin Panel for managing snippets and uploads
Undo/redo, history panel
Dark mode toggle & improved contrast
Mobile/touch optimization
Download & save as HTML
Live preview
Customizable styles & toolbar

New Features & Improvements

Code Snippets Manager: Use the Snippets tab in the toolbar to add, edit, delete, filter, and copy code snippets. Snippets are saved in assets/snippett.json and can be copied to clipboard for quick reuse.
Admin Panel: Access assets/admin.php (password: 123) to manage all code snippets and uploaded files. You can add, edit, or delete snippets, view and delete uploaded files, delete by type, or empty the uploads folder (except index.php).
Improved Code Block Insertion: Code blocks are now always inserted at the caret position in the editor, never at the top. Each new code block is a separate block, not nested inside previous ones.
Dark Mode Enhancements: All modal dialogs, buttons, and snippet lists have improved contrast and appearance in dark mode for better accessibility.
Uploads Management: The admin panel allows you to preview, delete, or bulk-manage uploaded files in assets/uploads.

Toolbar & Icons

Manual & Usage

Start Editing: Click in the editor area and begin typing. Use the toolbar for formatting and inserting elements.
Insert Elements: Use the toolbar to insert links, images, tables, code blocks, and code snippets. All insertions use modern, accessible modal dialogs.
Code Snippets: Click the Snippets tab in the toolbar. Add new snippets, filter or sort them, and click the copy icon to copy a snippet to your clipboard for pasting anywhere in the editor.
Admin Panel: Go to assets/admin.php and log in with password 123. Manage all code snippets and uploaded files from a single interface.
Upload Images: Drag and drop images into the editor or use the image modal to upload or link images.
Mentions & Tags: Type @ for user mentions or # for tags to trigger autocomplete.
Preview & Download: Use the Preview button to see your document in a new tab. Save will save your HTML file on the server in /assets/uploads. Download will download the file as HTML to your computer.
Dark Mode: Click the Dark Mode button for a comfortable editing experience at night.

Tip: You can use keyboard shortcuts for most toolbar actions (e.g., Ctrl+B for bold, Ctrl+S to save).

API Points

Function	Description
`showModal('modalId')`	Open a modal dialog by ID.
`closeModal('modalId')`	Close a modal dialog by ID.
`generateCompleteHTML(content, title)`	Generate a full HTML document for download/preview.
`insertImage(src, alt, width, height)`	Insert an image at the caret position.
`editor.innerHTML`	Get/set the editor's HTML content.

Customization & Advanced Usage

Remove Save Button: In index.php, remove or comment out the <button id="saveFile" ...> in the toolbar section.
Change Default Paths: In save.php and open.php, edit the $uploadDir and file path variables to your preferred directories for saving files and uploads.
Change Styles: Edit editor.css to adjust colors, fonts, spacing, or add your own custom styles. You can also modify the Tailwind config in index.php for global changes.
Toolbar Customization: Add, remove, or rearrange toolbar buttons in index.php as needed. Each button uses a data-command attribute for its action.
Modals: All insert dialogs (link, image, table, code) are in index.php and can be customized for your workflow.
Dark Mode: Tweak dark mode styles in editor.css under body.dark-mode and related selectors.
Keyboard Shortcuts: See editor.js for shortcut logic and add your own as needed.

FAQ & Troubleshooting

How do I save my work?

Click the Save button or use Ctrl+S. You can also download as HTML.

How do I upload images?

Use the image modal to upload from your device or enter an image URL. Drag & drop is also supported.

How do I change the editor's appearance?

Edit editor.css or the Tailwind config in index.php for global style changes.

Can I disable or hide certain features?

Yes, simply remove the relevant button or modal from index.php or comment out the related JavaScript in editor.js.

Where are my files saved?

By default, files are saved in assets/uploads/. You can change this in save.php and open.php.