# 📝 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! 🚀