wysiwyg field: Uploading images on pasting from clipboard

[a.slyzhko]

Hi there!

I noticed that in EspoCRM, when you paste a file (like an image or document) into a text field, it's handled and attached properly to the related entity (e.g., added to the attachments field).

However, this behavior doesn’t apply to the WYSIWYG field. Currently, pasting files into the WYSIWYG editor doesn't trigger the same file-handling logic, even though Summernote supports intercepting paste events.

Would it be possible to implement similar clipboard file-paste handling for the WYSIWYG field as is already done for text fields?

This would greatly improve user experience, especially for composing rich content with pasted screenshots or files.

Thanks for considering this!

[yuri]

It does work for me. Been supported for many years.

[a.slyzhko]

I mean redirect all files to attachment field. Especially images. In our case we use wysiwyg as description for tasks, and it is such a mess when users insert a lot of images to this field. We would really benefit from ability to redirect paste images to attachment field

[rabii]

If this is supported for the text field i bet it would be supported via wysiwyg too. i have checked and it is supported but you have to modify the code under custom folder. in your entityDefs > your entity > your field just add this to the field

"attachmentField": "attachments" 

then clear cache and rebuild and it should work now.

[rabii]

Just tested it and it works the image was added and a new attachment is created for the image with correct (related-to) entity.

[shalmaxb]

only for the record: is your image filename compatible? happened to me before, that one wrong character maybe th culprit.

[rabii]

I think i now understand what you mean. do you want to save the files saved to the multiple attachments field on your entity ? if that is the case you are right this function is not supported. But it makes sense hence the wyswig field supports inline images upload. You need to customise the field to act as you need in this case.

[a.slyzhko]

rabii
Can not reproduce.
custom/Espo/Custom/Resources/metadata/entityDefs/Task.json

{
    "fields": {
        "cDescription": {
            "type": "wysiwyg",
            "attachmentField": "attachments",
            "isCustom": true
        }
    }
} 

[rabii]

as mentioned in my last comment. (I mean redirect all files to attachment field) this will not work as the field wysiwyg supports only inline image upload (although the images will be created in attachment entity). You will need to customise the field in your case to behave similar to text field. should be an easy task hence all code already exist just adopt it.

[a.slyzhko]

If someone will ever need this functionality, here is the simplest way I was able to find for achieving that

define(['views/fields/wysiwyg'], function (WysiwygFieldView) {
    return class extends WysiwygFieldView {
        enableWysiwygMode() {
            super.enableWysiwygMode();

            if (!this.$element || !this.$summernote || !this.params.attachmentField) {
                return;
            }

            const context = this.$summernote.data('summernote');
            context.options = context.options || {};
            context.options.callbacks = context.options.callbacks || {};

            context.options.callbacks.onImageUpload = (files) => this.recordHelper.trigger('upload-files:' + this.params.attachmentField, files);
        }
    }
}) 

[shalmaxb]

Hi, thanks for the solution. Could you provide, in which folder you put this file?

[a.slyzhko]

It is individual. You can put it where ever you want in client/custom/src, but view param of your wysiwyg field should point exactly to this file.
In my case it is client/custom/src/views/task/fields/c-description.js and view param like this

{
"fields": {
"cDescription": {
"type": "wysiwyg",
"attachmentField": "attachments",
"view": "custom:views/task/fields/c-description",
"isCustom": true
}
}
}