-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathdocumentation.html
More file actions
178 lines (163 loc) · 13.8 KB
/
documentation.html
File metadata and controls
178 lines (163 loc) · 13.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>miniB HTML Editor – Documentation & Manual</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f8fafc; color: #222; margin: 0; padding: 0; }
.container { max-width: 900px; margin: 2rem auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 2.5rem 2.5rem 2rem 2.5rem; }
h1, h2, h3 { color: #222831; }
h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.5rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; }
ul, ol { margin-left: 2rem; }
code, pre { background: #f1f5f9; color: #374151; border-radius: 4px; padding: 2px 6px; }
pre { padding: 1rem; overflow-x: auto; }
.feature-list { columns: 2 300px; -webkit-columns: 2 300px; -moz-columns: 2 300px; }
.feature-list li { margin-bottom: 0.5em; }
.tip { background: #e3f2fd; border-left: 4px solid #1976d2; padding: 0.75em 1em; margin: 1.5em 0; border-radius: 6px; }
.kbd { background: #ececec; border-radius: 3px; padding: 2px 6px; font-size: 0.95em; border: 1px solid #ccc; }
.toolbar-icons { display: flex; flex-wrap: wrap; gap: 1.5em 2em; margin: 1.5em 0 2em 0; }
.toolbar-icon { display: flex; align-items: center; gap: 0.7em; min-width: 180px; }
.toolbar-icon i { font-size: 1.2em; width: 1.5em; text-align: center; color: #222831; }
.screenshot { display: block; margin: 1.5em auto; border: 1px solid #e0e0e0; border-radius: 8px; max-width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.api-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.api-table th, .api-table td { border: 1px solid #e0e0e0; padding: 0.5em 0.8em; text-align: left; }
.api-table th { background: #f1f5f9; }
.faq { margin-top: 2em; }
.faq h3 { margin-bottom: 0.2em; }
.footer { text-align: center; color: #888; font-size: 0.95em; margin-top: 2em; }
a { color: #1976d2; text-decoration: underline; }
a:hover { color: #0d47a1; }
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-book"></i> miniB HTML Editor – Documentation & Manual</h1>
<p class="footer">Licensed under <a href="https://opensource.org/license/mit" target="_blank">MIT license</a>. © <script>document.write(new Date().getFullYear())</script> miniB HTML editor by <a href="https://github.com/ColeNikol" target="_blank"><u>ColeNikol</u></a>.</p>
<h2><i class="fas fa-certificate"></i> License</h2>
<pre>MIT License
Copyright (c) <script>document.write(new Date().getFullYear())</script> 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.
</pre>
<h2><i class="fas fa-star"></i> Features</h2>
<ul class="feature-list">
<li><i class="fas fa-bold"></i> Rich text formatting (bold, italic, underline, strikethrough)</li>
<li><i class="fas fa-heading"></i> Headings (H1–H6), blockquotes</li>
<li><i class="fas fa-list-ul"></i> Ordered & unordered lists</li>
<li><i class="fas fa-align-left"></i> Text alignment (left, center, right, justify)</li>
<li><i class="fas fa-palette"></i> Text & background color pickers</li>
<li><i class="fas fa-link"></i> Insert links (with rel, new tab options)</li>
<li><i class="fas fa-image"></i> Insert/upload images (drag & drop, URL, alt, size)</li>
<li><i class="fas fa-table"></i> Table creation & editing</li>
<li><i class="fas fa-code"></i> Code blocks with language selection</li>
<li><i class="fas fa-scroll"></i> <b>Code Snippets Manager</b> (add, edit, delete, filter, copy to clipboard)</li>
<li><i class="fas fa-user-shield"></i> <b>Admin Panel</b> for managing snippets and uploads</li>
<li><i class="fas fa-history"></i> Undo/redo, history panel</li>
<li><i class="fas fa-moon"></i> Dark mode toggle & improved contrast</li>
<li><i class="fas fa-mobile-alt"></i> Mobile/touch optimization</li>
<li><i class="fas fa-download"></i> Download & save as HTML</li>
<li><i class="fas fa-eye"></i> Live preview</li>
<li><i class="fas fa-cogs"></i> Customizable styles & toolbar</li>
</ul>
<h2><i class="fas fa-bolt"></i> New Features & Improvements</h2>
<ul>
<li><b>Code Snippets Manager:</b> Use the <i class="fas fa-scroll"></i> Snippets tab in the toolbar to add, edit, delete, filter, and copy code snippets. Snippets are saved in <code>assets/snippett.json</code> and can be copied to clipboard for quick reuse.</li>
<li><b>Admin Panel:</b> Access <code>assets/admin.php</code> (password: <code>123</code>) 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 <code>index.php</code>).</li>
<li><b>Improved Code Block Insertion:</b> 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.</li>
<li><b>Dark Mode Enhancements:</b> All modal dialogs, buttons, and snippet lists have improved contrast and appearance in dark mode for better accessibility.</li>
<li><b>Uploads Management:</b> The admin panel allows you to preview, delete, or bulk-manage uploaded files in <code>assets/uploads</code>.</li>
</ul>
<h2><i class="fas fa-toolbox"></i> Toolbar & Icons</h2>
<div class="toolbar-icons">
<div class="toolbar-icon"><i class="fas fa-bold"></i> Bold</div>
<div class="toolbar-icon"><i class="fas fa-italic"></i> Italic</div>
<div class="toolbar-icon"><i class="fas fa-underline"></i> Underline</div>
<div class="toolbar-icon"><i class="fas fa-strikethrough"></i> Strikethrough</div>
<div class="toolbar-icon"><i class="fas fa-heading"></i> Headings</div>
<div class="toolbar-icon"><i class="fas fa-list-ul"></i> Bullet List</div>
<div class="toolbar-icon"><i class="fas fa-list-ol"></i> Numbered List</div>
<div class="toolbar-icon"><i class="fas fa-align-left"></i> Align Left</div>
<div class="toolbar-icon"><i class="fas fa-align-center"></i> Align Center</div>
<div class="toolbar-icon"><i class="fas fa-align-right"></i> Align Right</div>
<div class="toolbar-icon"><i class="fas fa-align-justify"></i> Justify</div>
<div class="toolbar-icon"><i class="fas fa-palette"></i> Text Color</div>
<div class="toolbar-icon"><i class="fas fa-highlighter"></i> Background Color</div>
<div class="toolbar-icon"><i class="fas fa-link"></i> Insert Link</div>
<div class="toolbar-icon"><i class="fas fa-image"></i> Insert Image</div>
<div class="toolbar-icon"><i class="fas fa-table"></i> Insert Table</div>
<div class="toolbar-icon"><i class="fas fa-code"></i> Insert Code</div>
<div class="toolbar-icon"><i class="fas fa-eye"></i> Preview</div>
<div class="toolbar-icon"><i class="fas fa-save"></i> Save</div>
<div class="toolbar-icon"><i class="fas fa-download"></i> Download</div>
<div class="toolbar-icon"><i class="fas fa-folder-open"></i> Open</div>
<div class="toolbar-icon"><i class="fas fa-moon"></i> Dark Mode</div>
</div>
<h2><i class="fas fa-book-open"></i> Manual & Usage</h2>
<ol>
<li><b>Start Editing:</b> Click in the editor area and begin typing. Use the toolbar for formatting and inserting elements.</li>
<li><b>Insert Elements:</b> Use the toolbar to insert links, images, tables, code blocks, and <b>code snippets</b>. All insertions use modern, accessible modal dialogs.</li>
<li><b>Code Snippets:</b> Click the <i class="fas fa-scroll"></i> 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.</li>
<li><b>Admin Panel:</b> Go to <code>assets/admin.php</code> and log in with password <code>123</code>. Manage all code snippets and uploaded files from a single interface.</li>
<li><b>Upload Images:</b> Drag and drop images into the editor or use the image modal to upload or link images.</li>
<li><b>Mentions & Tags:</b> Type <span class="kbd">@</span> for user mentions or <span class="kbd">#</span> for tags to trigger autocomplete.</li>
<li><b>Preview & Download:</b> Use the <b>Preview</b> button to see your document in a new tab. <b>Save</b> will save your HTML file on the server in <code>/assets/uploads</code>. <b>Download</b> will download the file as HTML to your computer.</li>
<li><b>Dark Mode:</b> Click the <b>Dark Mode</b> button for a comfortable editing experience at night.</li>
</ol>
<div class="tip"><i class="fas fa-info-circle"></i> <b>Tip:</b> You can use keyboard shortcuts for most toolbar actions (e.g., <span class="kbd">Ctrl+B</span> for bold, <span class="kbd">Ctrl+S</span> to save).</div>
<h2><i class="fas fa-plug"></i> API Points</h2>
<table class="api-table">
<tr><th>Function</th><th>Description</th></tr>
<tr><td><code>showModal('modalId')</code></td><td>Open a modal dialog by ID.</td></tr>
<tr><td><code>closeModal('modalId')</code></td><td>Close a modal dialog by ID.</td></tr>
<tr><td><code>generateCompleteHTML(content, title)</code></td><td>Generate a full HTML document for download/preview.</td></tr>
<tr><td><code>insertImage(src, alt, width, height)</code></td><td>Insert an image at the caret position.</td></tr>
<tr><td><code>editor.innerHTML</code></td><td>Get/set the editor's HTML content.</td></tr>
</table>
<h2><i class="fas fa-cogs"></i> Customization & Advanced Usage</h2>
<ul>
<li><b>Remove Save Button:</b> In <code>index.php</code>, remove or comment out the <code><button id="saveFile" ...></code> in the toolbar section.</li>
<li><b>Change Default Paths:</b> In <code>save.php</code> and <code>open.php</code>, edit the <code>$uploadDir</code> and file path variables to your preferred directories for saving files and uploads.</li>
<li><b>Change Styles:</b> Edit <code>editor.css</code> to adjust colors, fonts, spacing, or add your own custom styles. You can also modify the Tailwind config in <code>index.php</code> for global changes.</li>
<li><b>Toolbar Customization:</b> Add, remove, or rearrange toolbar buttons in <code>index.php</code> as needed. Each button uses a <code>data-command</code> attribute for its action.</li>
<li><b>Modals:</b> All insert dialogs (link, image, table, code) are in <code>index.php</code> and can be customized for your workflow.</li>
<li><b>Dark Mode:</b> Tweak dark mode styles in <code>editor.css</code> under <code>body.dark-mode</code> and related selectors.</li>
<li><b>Keyboard Shortcuts:</b> See <code>editor.js</code> for shortcut logic and add your own as needed.</li>
</ul>
<h2><i class="fas fa-question-circle"></i> FAQ & Troubleshooting</h2>
<div class="faq">
<h3>How do I save my work?</h3>
<p>Click the <i class="fas fa-save"></i> Save button or use <span class="kbd">Ctrl+S</span>. You can also download as HTML.</p>
<h3>How do I upload images?</h3>
<p>Use the image modal to upload from your device or enter an image URL. Drag & drop is also supported.</p>
<h3>How do I change the editor's appearance?</h3>
<p>Edit <code>editor.css</code> or the Tailwind config in <code>index.php</code> for global style changes.</p>
<h3>Can I disable or hide certain features?</h3>
<p>Yes, simply remove the relevant button or modal from <code>index.php</code> or comment out the related JavaScript in <code>editor.js</code>.</p>
<h3>Where are my files saved?</h3>
<p>By default, files are saved in <code>assets/uploads/</code>. You can change this in <code>save.php</code> and <code>open.php</code>.</p>
</div>
<div class="footer">
<span class="text-xs">This project uses <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> icons and portions of <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> for UI styling.</span><br><br>
<i class="fas fa-user"></i> Created by <a href="https://github.com/ColeNikol" target="_blank"><u>ColeNikol</u></a>.<br><br>
<i class="fas fa-heart"></i> Please consider <a href="https://cwallet.com/t/JZWJW87H" target="_blank"><u>supporting</u></a> this project.<br>
</div>
</div>
</body>
</html>