upload

DOCS/EDITOR_USER_GUIDE.md

@@ -0,0 +1,314 @@
+# 📝 Custom Rich Text Editor - User Guide
+
+## Quick Start
+
+Your enhanced editor is now available on all admin pages that use text editing (Articles, About, Activities, etc.).
+
+---
+
+## 🎨 Basic Text Formatting
+
+### Toolbar Features
+
+| Icon/Button | Function | Shortcut |
+|------------|----------|----------|
+| **H1, H2, H3** | Headings (different sizes) | - |
+| **B** | Bold text | Ctrl+B |
+| **I** | Italic text | Ctrl+I |
+| **U** | Underline | Ctrl+U |
+| **S** | Strike-through | - |
+| **🎨** | Text color | - |
+| **🎨** | Background color | - |
+| **≡** | Bulleted list | - |
+| **1.** | Numbered list | - |
+| **⬅️ ➡️** | Text alignment | - |
+| **🔗** | Insert link | Ctrl+K |
+| **🖼️** | Insert image | See below |
+| **📹** | Insert video | - |
+| **"** | Block quote | - |
+| **</>** | Code block | - |
+| **🧹** | Clear formatting | - |
+
+---
+
+## 📸 Image Management (The New Cool Features!)
+
+### 1. **Inserting Images with Crop**
+
+#### Step-by-Step:
+1. Click the **purple "Vložit obrázek"** button (or image icon in toolbar)
+2. **Select** an image file from your computer
+3. A **crop modal** appears with your image
+
+#### In the Crop Modal:
+- **Drag the blue rectangle** corners/edges to select the area you want
+- **Adjust settings**:
+  - **Max. šířka (Max Width)**: Default 1500px - reduces large images
+  - **Kvalita JPEG (Quality)**: Default 85% - good balance of quality/size
+- Click **"Oříznout a vložit"** (Crop and Insert)
+
+**Pro Tip**: Higher quality = larger file size. 85% is recommended!
+
+---
+
+### 2. **Resizing Images** ↔️
+
+Once an image is in the editor:
+
+1. **Click on the image** → It gets a **blue outline** and shows selected
+2. Look for the **blue circular handle** at bottom-right corner (it pulses!)
+3. **Click and drag** the handle to resize
+4. **Release** to set the size
+
+**Visual Cues**:
+- Blue outline = Image selected
+- Blue circle = Resize handle
+- Cursor changes to ↘️ when hovering over handle
+
+---
+
+### 3. **Repositioning Images** (Align Left/Right)
+
+Want to move an image to the left or right?
+
+1. **Click on the image** to select it
+2. **Click and drag** the image itself (not the handle):
+   - Drag **RIGHT** → Image moves to right side
+   - Drag **LEFT** → Image moves to left side
+3. **Release** to set position
+
+**Note**: Drag at least 20 pixels for the alignment to activate.
+
+---
+
+### 4. **Deleting Images** 🗑️
+
+Super simple:
+
+1. **Click on the image** to select it (blue outline appears)
+2. Press **Delete** or **Backspace** key
+3. Image is removed!
+
+**Alternative**: You can also use the toolbar "Clean" button to remove selected content.
+
+---
+
+## 🎭 Editor Modes
+
+### Visual Editor (Default)
+- WYSIWYG (What You See Is What You Get)
+- Toolbar with formatting options
+- Click and edit like Word
+
+### HTML Mode
+- Direct HTML code editing
+- For advanced users
+- Perfect for custom styling
+
+**Toggle**: Use the **"Editor"** / **"HTML"** buttons at the top.
+
+---
+
+## 💡 Pro Tips & Tricks
+
+### Image Best Practices
+1. **Optimize before upload**: Use 85% quality and 1500px max width
+2. **Crop first**: Select only the important part of images
+3. **Resize in editor**: Fine-tune size after insertion
+4. **Use alignment**: Drag images left/right for better layouts
+
+### Keyboard Shortcuts
+- **Ctrl+B**: Bold
+- **Ctrl+I**: Italic
+- **Ctrl+U**: Underline
+- **Ctrl+K**: Insert link
+- **Delete/Backspace**: Remove selected image
+- **Ctrl+Z**: Undo (browser default)
+- **Ctrl+Y**: Redo (browser default)
+
+### Text Formatting
+- **Headings**: Use H1 for main titles, H2 for sections, H3 for subsections
+- **Lists**: Great for organizing information
+- **Block quotes**: Perfect for highlighting important statements
+- **Code blocks**: For technical content or preserving formatting
+
+### Links
+- Always use full URLs for external links (https://example.com)
+- Internal links can use relative paths (/about, /contact)
+- Links to external sites automatically get ↗ indicator
+
+---
+
+## 🎯 Common Tasks
+
+### Creating a Blog Post with Images
+
+1. **Write your text** using the editor
+2. **Add headings** (H2 for sections)
+3. **Insert image**:
+   - Click "Vložit obrázek"
+   - Select file
+   - Crop to desired area
+   - Adjust quality if needed
+   - Insert
+4. **Resize if needed**: Click image → drag handle
+5. **Position**: Drag image left or right
+6. **Continue writing** around the image
+7. **Save** your post
+
+### Editing Existing Content
+
+1. **Click in the editor**
+2. **Select text** to format
+3. **Use toolbar** for formatting
+4. **Click images** to resize/reposition
+5. **Switch to HTML mode** if needed for advanced edits
+6. **Save** when done
+
+### Fixing Image Issues
+
+**Image too large?**
+- Click image → drag resize handle smaller
+
+**Image in wrong position?**
+- Click image → drag left or right
+
+**Need to re-crop?**
+- Delete image (select + Delete key)
+- Re-insert with new crop
+
+**Image quality poor?**
+- Delete and re-insert with higher quality setting
+
+---
+
+## 🎨 Visual Indicators
+
+### Image States
+
+| State | Visual Cue |
+|-------|-----------|
+| **Normal** | Rounded corners, subtle shadow |
+| **Hover** | Slight scale up, darker shadow |
+| **Selected** | Blue outline, cursor changes to move |
+| **Resizing** | Resize cursor (↘️), handle visible |
+
+### Editor States
+
+| State | Visual Cue |
+|-------|-----------|
+| **Active tool** | Blue background on toolbar button |
+| **Hover** | Light blue background |
+| **Focus** | Blue outline around entire editor |
+| **Empty** | Placeholder text in gray |
+
+---
+
+## 🔧 Troubleshooting
+
+### "I can't see the resize handle!"
+- **Make sure** you clicked on the image
+- **Look** for the blue outline (means selected)
+- **Check** bottom-right corner for pulsing blue circle
+
+### "My image won't move!"
+- **Click** the image first to select it
+- **Drag** (don't just click) for at least 20 pixels
+- **Try again** if it didn't register the drag
+
+### "Crop modal won't appear!"
+- **Verify** you have upload permissions
+- **Check** browser console for errors
+- **Try** a different image format (JPG, PNG)
+
+### "Image looks blurry after upload!"
+- **Increase quality** in crop modal (try 90-95%)
+- **Increase max width** (try 2000-2500px)
+- **Use higher quality** source images
+
+### "I deleted an image by mistake!"
+- **Press Ctrl+Z** to undo
+- Or **re-insert** the image
+
+---
+
+## 📱 Mobile/Tablet Usage
+
+The editor works great on mobile devices:
+
+- **Toolbar adapts** to smaller screens
+- **Touch gestures** work for image manipulation
+- **Tap** image to select
+- **Pinch/drag** the resize handle
+- **Swipe** to scroll through long content
+
+---
+
+## 🎓 Advanced Features
+
+### Custom HTML
+Switch to HTML mode to:
+- Add custom CSS classes
+- Insert iframes (for embeds)
+- Fine-tune spacing and layout
+- Add custom attributes
+
+### Paste from Word/Google Docs
+The editor automatically:
+- Strips unwanted formatting
+- Preserves basic styles (bold, italic, lists)
+- Cleans up messy HTML
+
+### Block Quotes
+Great for:
+- Highlighting quotes
+- Important announcements
+- Callout sections
+
+Just select text and click the quote button (")
+
+---
+
+## ✨ What's New (Compared to TinyMCE)
+
+### Better
+- ✅ **Faster loading** - No external dependencies
+- ✅ **Better image controls** - Drag, resize, crop all in one
+- ✅ **Cleaner interface** - Modern, minimal design
+- ✅ **Dark mode support** - Automatic theme detection
+- ✅ **Keyboard shortcuts** - Delete images with Del key
+- ✅ **Visual feedback** - Clear selected/hover states
+
+### Same
+- ✅ **All formatting options** - Bold, italic, lists, etc.
+- ✅ **Link management** - Easy link insertion
+- ✅ **Image uploads** - Same workflow
+- ✅ **HTML editing** - Direct code access
+
+### New
+- ✅ **Image cropping** - Built-in crop tool
+- ✅ **Drag positioning** - Move images easily
+- ✅ **Resize handles** - Visual resize controls
+- ✅ **Quality controls** - Optimize file sizes
+- ✅ **Pulsing handles** - Easy to find resize points
+
+---
+
+## 🎯 Summary
+
+Your new editor is **more powerful**, **easier to use**, and **looks better** than before!
+
+**Key Features**:
+- 📸 Advanced image editing (crop, resize, reposition, delete)
+- ✨ Beautiful, modern interface
+- ⚡ Fast and responsive
+- 🎨 Full text formatting
+- 📱 Mobile-friendly
+
+**Remember**:
+1. **Click** images to select
+2. **Drag handle** to resize
+3. **Drag image** to reposition
+4. **Press Delete** to remove
+
+Happy editing! 🚀