Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Paste inline images

See original GitHub issue

Issue Description


First of all I’d like to thank you for putting this together, I’ve been trying to integrate CKEditor 4 & 5 within a react components library and I know how painful it is to integrate with a vDom, specially when not using a index.html file, so this is really helpful.

Now to the problem at hand:

I’m trying to set up the inline image pasting feature of CKEditor 4, I realize you use version 4.6 so it shouldn’t be a problem.

However, I’m encountering two blockers, that I’m sure you already thought/faced them before:

  1. As pointed in, I’d like to set some parameters to configure the file upload plugin, like the upload URL. But when trying to pass these parameters as a config prop to your component, I’m getting this error (sorry for no screenshots, I’m behind a proxy right now so cant upload):

Error: [CKEDITOR.resourceManager.load] Resource name "uploadimage" was not found at "".

My configuration object:

{ extraPlugins: 'uploadimage' }

  1. I’d like to subscribe to the fileUploadRequest event of the editor, as shown in, so the first problem I encountered is that I’m not sure how to get the instance of my CKEditor? so I thought of getting it from one of the events defined in your events prop, I wrote this:

onEditorAfterPaste = event => { event.editor.on('fileUploadRequest', evt => { console.log('file fileUploadRequest fired, ', evt); }); };

Hoping it would fire when trying to paste an image in. Of course it didn’t fire the console.log. I’m passing this onEditorAfterPaste callback on the events prop as the afterPaste value, and I already made sure that when pasting it triggers the callback, but the subscription isn’t happening, so maybe getting the instance of the editor through one of the events method is not the right thing to do it?

Thanks in advance for reading this and keep slaying!

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

codeslayer1commented, Jun 7, 2018


Please find my response to both your issues.

  1. To enable image upload plugin, you first need to have it in your build. Only then you can enable it via config. The standard 4.6.2 version does not include imageupload (not very sure), hence the error. The same code works using the latest standard version 4.9.2. You just need to make a minor change in config which is adding the upload url (Refer this)
          extraPlugins: 'uploadimage',
          uploadUrl: '/uploader/upload.php'

In case you still need to use the 4.6.2 version, you can either use the full build or create your custom build and use it by following the steps here. #7

  1. Your code is working fine for me. You must not be getting event fired because in your case the image upload plugin must not be working (it doesn’t work without a upload url). So try the above fix and recheck. You should get the event. A minor suggestion though, instead of listening for the afterPaste event and then again listening for fileUploadRequest event inside it, you can directly listen to fileUploadRequest event like this.
fileUploadRequest = event => {
    console.log("fileUploadRequest, ", event);

      extraPlugins: 'uploadimage',
      uploadUrl: '/uploader/upload.php'
      "fileUploadRequest": this.fileUploadRequest,
      "change": this.onEditorChange

Please let me know in case you still face any issue.

codeslayer1commented, Jun 19, 2018

Closing this issue due to no further activity.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Insert an Inline Image in an Outlook Message
In the Illustrations section, select Pictures. The Insert Picture window will open. You can search for images online without leaving Outlook by ...
Read more >
Solved: How to paste inline images in comments and worknot...
How to paste inline images in comments and worknotes without training agents to be front-end developers. Go to solution. Michael Culhan1. Kilo Guru....
Read more >
How to Insert an Inline Image in a Draft? - Missive
To insert an inline image, you can: Drag and drop the image directly to the draft composer, in the text area. Click the...
Read more >
Insert images inline/in email body in in Outlook
Insert images inline /in email body in in Outlook ; 1. In your composing email, place the cursor where you will insert the...
Read more >
Insert inline images on Pages - Edlio Help Center
Insert inline images · 1. Navigate to the page you want to edit. · 2. Add a new Content block or click into...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found