TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-03 18:22:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
63700eedb205be7ba9448c6bf3b2a886fc99fb5f
MyClub/DOCS/EDITOR_USER_GUIDE.md
T
Tomáš Dvořák 12cba639b9 upload
2025-10-16 13:32:05 +02:00

8.2 KiB
Raw Blame History

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

Reference in New Issue View Git Blame Copy Permalink