Paste inline images

Hello,

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 https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html#basic-configuration, 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 "https://cdn.ckeditor.com/4.6.2/standard/plugins/uploadimage/plugin.js?t=H0CG".

My configuration object:

{ extraPlugins: 'uploadimage' }

1. I’d like to subscribe to the fileUploadRequest event of the editor, as shown in https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html#request-2, 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!

[codeslayer1]

Hi,

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)

config={{
          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);
};

<CKEditor
    config={{
      extraPlugins: 'uploadimage',
      uploadUrl: '/uploader/upload.php'
    }}
    content={this.state.content}
    events={{
      "fileUploadRequest": this.fileUploadRequest,
      "change": this.onEditorChange
    }}
/>

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

[codeslayer1]

Closing this issue due to no further activity.