I ended up solving this by creating a custom Directus interface extension that implements TinyMCE with its native behavior, which restores the drag-to-resize handles that were missing in the default Directus WYSIWYG interface.
What I Built: A custom interface called “WYSIWYG (Enhanced)” that provides:
-
Native TinyMCE image and video resize handles (drag-to-resize functionality)
-
Aspect ratio maintenance while resizing
- This also still uses the directus URL transformation params for optimizations like width, height, and quality
-
All standard WYSIWYG features preserved
-
Same configuration options as the default interface
Why This Works: Directus’s default wysiwyg strips inline width and height attributes from <img> tags, converting them to URL transformation parameters. This prevents TinyMCE’s native resize handles from functioning. By implementing TinyMCE directly with its native handlers, the resize functionality works as expected.
Result: Publishers can now intuitively resize images and videos directly in the editor by dragging the corner handles - no manual dimension calculations or source code editing required. This provides the user-friendly experience I was looking for.
Demo if it in action:
Screenshot of interface tab:
