Skip to main content
GrN.dk

Main navigation

  • Articles
  • Contact
  • Your Digital Project Manager
  • About Greg Nowak
  • Services
  • Portfolio
  • Container
    • Excel Freelancer
    • Kubuntu - tips and tricks
    • Linux Apache MySQL and PHP
    • News
    • Image Gallery
User account menu
  • Log in

Breadcrumb

  1. Home

Pasting Images into Drupal: A Practical CKEditor 5 Setup

By Greg Nowak. Reviewed 19 July 2026.

Pasting a screenshot directly into Drupal can remove several small steps from publishing a support article, procedure, or internal guide. For a busy editorial team, that convenience adds up. But a partially configured editor creates a different kind of work: images disappear after saving, files become difficult to reuse, or oversized screenshots quietly make pages heavier.

On a modern Drupal site, this is primarily a CKEditor 5 and text-format configuration task. Core can handle clipboard image uploads; the more important decision is whether an image should remain a quick inline file or become a reusable Media item.

The short answer

For Drupal 10 or 11, start with core. The old Image from Word project is marked obsolete and explicitly says its functionality is provided by Drupal core with CKEditor 5 from Drupal 9.3 onward. The older CKEditor Upload Image module belongs to the CKEditor 4 ecosystem and has no supported stable release.

That does not mean every Drupal installation is ready without configuration. The text format must use CKEditor 5, the Image button must activate the image plugin, and image uploads must be enabled in that plugin’s settings. Drupal then uploads the clipboard image as a file instead of storing a large image blob in the body field.

Content need Recommended route Operational reason
One-off support or process screenshot Paste through CKEditor 5 image upload Fast to create and unlikely to require reuse.
Logo, campaign image, product photo, or shared diagram Media Library Provides a reusable asset with centralized metadata and display rules.
Image requiring consistent crops or view modes Media Library Keeps presentation decisions out of individual body fields.
Custom or decoupled editing interface Upload adapter and server endpoint Drupal’s standard editor integration does not automatically carry into a bespoke UI.
Drupal site still using CKEditor 4 add-ons Upgrade review first Legacy clipboard modules are not a sound basis for a current editorial workflow.
Use direct paste for disposable working images; use Media Library when the asset has value beyond one page.

Configure direct image pasting

  1. Find the real text format. Visit /admin/config/content/formats and identify the format used by ordinary editors. It may be Basic HTML, but confirm this on the content form rather than assuming.
  2. Select CKEditor 5. Edit that format and confirm CKEditor 5 is the configured text editor.
  3. Activate the Image button. Add the Image button to the active toolbar. Toolbar configuration also determines which CKEditor plugins Drupal enables.
  4. Enable image uploads. In the CKEditor 5 Image plugin settings, enable uploads and review the destination directory, file-size limit, and maximum dimensions. Choose limits that reflect real editorial needs rather than accepting full-resolution desktop screenshots indefinitely.
  5. Review the filters. Drupal validates the editor output against the text format when content is saved. Keep the image-related markup and file-reference handling expected by the current plugin. Do not copy old lists of data-cke-* attributes from CKEditor 4 tutorials.
  6. Test with an editor account. Site administrators often have broader format access and permissions. A successful administrator test does not prove that the publishing team has the same experience.

Paste an operating-system screenshot, wait for the upload to finish, save the page, reopen it, and check the published result. The complete save-and-reopen cycle matters: an image visible inside the editor may still be removed by a filter or fail to resolve on the front end.

When Media Library is the better choice

Direct image upload creates a Drupal file, but it does not automatically give the team a well-governed, reusable media asset. Media Library is the stronger route when an image will appear on several pages, needs structured metadata, or must use a controlled display mode.

Enable the core Media and Media Library modules, add the Media Library button to the relevant CKEditor 5 toolbar, and enable the Embed media filter. Drupal’s documentation recommends placing that filter last so other filters can process alignment, captions, and allowed HTML first. Also review which media types and view modes editors may select.

A simple publishing rule is usually more effective than a long manual: screenshots made for one article may be pasted; brand and reusable assets must enter through Media Library.

Test the clipboard sources your team actually uses

Clipboard contents vary by application. A screenshot copied from the operating system is not necessarily handled like an image copied from a web page, Word document, or Google Doc. A browser may place an external URL on the clipboard, which can produce a hotlinked image rather than an uploaded file.

  • Test Windows and macOS screenshot tools used by the team.
  • Paste from Word and Google Docs if those are common drafting tools.
  • Check the rendered image URL to confirm it belongs to your Drupal site.
  • Verify PNG, JPEG, and WebP behavior against the configured limits.
  • Confirm that editors can add meaningful alt text after pasting.
  • Test public and private file delivery if the site uses both schemes.

Avoid solving upload problems with Base64 images stored inside HTML. CKEditor’s documentation warns that Base64 content increases database and transfer size and cannot benefit from normal browser image caching. Uploaded files or Media items are a better production architecture.

Useful checks for a configuration-managed site

These commands provide a quick view of the enabled modules and the configuration behind the common basic_html format. Substitute the actual format machine name if your site uses another one.

drush pm:list --status=enabled --type=module | grep -E 'ckeditor5|editor|filter|media|media_library'
drush config:get editor.editor.basic_html
drush config:get filter.format.basic_html

After the change has been tested with the correct role and content type, export it through the team’s normal configuration workflow:

drush cex -y
drush cr

Where implementations usually go wrong

If the image disappears immediately, inspect the upload request and Drupal logs. If it survives editing but vanishes after saving, review the text format and filters. If administrators succeed while editors fail, compare roles, formats, and file permissions. If the image renders from another company’s domain, the clipboard supplied a URL rather than an uploadable image.

The technical fix is usually modest. The lasting improvement comes from agreeing which route editors should use, setting sensible upload limits, and testing the workflow as the people who publish every day.

If clipboard images are unreliable or your team has no clear boundary between quick screenshots and managed assets, Greg can review the CKEditor, Media Library, permissions, and publishing setup without turning it into a larger rebuild than necessary. Talk to Greg about your Drupal workflow.

Related on GrN.dk

  • Inline Image Pasting in Drupal: Faster Editing, Cleaner Media
  • Drupal 8 Inline Responsive Images: A Practical Legacy Setup
  • AI images need a media-library audit before they reach clients

Need help with this kind of work?

Discuss your Drupal publishing workflow Get in touch with Greg.

Sources

  • Image from Word | Drupal.org
  • CKEditor Upload Image | Drupal.org
  • Embedding media with CKEditor 5 | Drupal.org
  • Image upload overview | CKEditor 5 Documentation
  • Base64 upload adapter | CKEditor 5 Documentation
Last modified
2026-07-19

Tags

  • Drupal
  • CKEditor 5
  • Media Library
  • Content Operations
  • Log in to post comments

Review Greg on Google

Greg Nowak Google Reviews

 

Illustrated infographic summarizing: Your AI Workflow Needs an Acceptance Test Before It Meets Customers
Your AI Workflow Needs an Acceptance Test Before It Meets Customers
2026-07-19

A practical way to test AI workflows using realistic scenarios, tool checks, human rubrics, regression suites, and clear release gates.

Three cover candidates for The Goats Were Load-Bearing fanned on a dark background: an ember-lit door, three slow knocks, and a founders' ledger
The Goats Were Load-Bearing: a fantasy where the bill always comes due
2026-07-19

A teaser for the upcoming darkly comic fantasy novel The Goats Were Load-Bearing — a village, a door that must stay poor, and the worst possible time to sell the herd. Readers pick the cover.

Vegan Power game: the yellow player catches falling fruit while a chicken and a cow look on
Vegan Power: The Little Game About Eating Fruit, Not Friends
2026-07-19

Vegan Power is a free browser game where you catch fruit, dodge the animals, protect seven hearts, and chase a better high score.

KotobaMon title screen: the Japanese logo コトバモン over a low-poly 3D island with monsters, cherry-blossom trees and a trainer.
KotobaMon: Shipping a 3D Browser Game With No Build Step and Self-Hosted Voice
2026-07-19

A look at fantasy.grn.dk, a browser-based 3D game that teaches Japanese with no build step, procedural art and self-hosted AI voice, and what its constraints show about shipping interactive products fast and cheap.

Illustrated infographic summarizing: WordPress Forced an Emergency Update. Did Every Site Take It?
WordPress Forced an Emergency Update. Did Every Site Take It?
2026-07-18

WordPress pushed an emergency security update, but teams still need to confirm the right patched version and core integrity on every installation.

Illustrated infographic summarizing: IndexNow: Wire corrections and deletions into the CMS
IndexNow: Wire corrections and deletions into the CMS
2026-07-17

IndexNow works best when CMS workflows report updates, redirects and removals as well as new pages. Here is how to cover the full content lifecycle.

Illustrated infographic summarizing: The EU’s August AI Deadline Reaches Bots and Synthetic Content
The EU’s August AI Deadline Reaches Bots and Synthetic Content
2026-07-16

Article 50 applies from 2 August 2026. Businesses need to map AI touchpoints, clarify ownership, and put workable transparency controls in place.

Illustrated infographic summarizing: A Voice Agent Is Only Ready When the Human Handoff Works
A Voice Agent Is Only Ready When the Human Handoff Works
2026-07-15

A practical guide to voice agents that recognise failure, pass useful context to staff, protect customer data, and improve resolution after launch.

Illustrated infographic summarizing: If the Facts Need JavaScript, AI Search May Miss the Full Page
If the Facts Need JavaScript, AI Search May Miss the Full Page
2026-07-14

A practical guide to finding and fixing JavaScript rendering gaps that can hide services, prices, contact details and metadata from AI search crawlers.

Illustrated infographic summarizing: Search Console Can See Social Posts—Your Reports Need a New Map
Search Console Can See Social Posts—Your Reports Need a New Map
2026-07-13

Search Console now reports how social posts perform across Google. Here’s a practical way to manage properties, permissions, baselines and exports.

More articles
RSS feed

GrN.dk web platforms, web optimization, data analysis, data handling and logistics.