I’m using vue-email-editor (a Vue wrapper for unlayer) to integrate an email editor in my Vue 3 project. Everything works fine, but I want to disable the “Upload Image” button that allows users to upload their own images. I’ve been unable to find a solution in the documentation or source code.
Here’s my current setup:
I’ve initialized the editor with the following configuration:
<template>
<div>
<EmailEditor
ref="emailEditor"
:appearance="emailEditorConfits.appearance"
:options="emailEditorConfits.options"
:tools="emailEditorConfits.tools"
:project-id="emailEditorConfits.projectId"
@ready="editorLoaded"
/>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { EmailEditor } from 'vue-email-editor';
const emailEditor = ref(null);
const emailEditorConfits = {
appearance: {
panels: {
tools: { dock: 'right' }
}
},
options: {
features: {
userUploads: false,
},
imageUploader: {
shouldRender: {
dropzone: false, // Disable dropzone for image uploads
uploadButton: false, // Disable the upload button
userUploads: true, // Keep user uploaded images visible
stockImages: true, // Enable stock images
moreImages: true, // Enable more images
},
},
},
tools: {},
projectId: <abc-123>,
};
const editorLoaded = () => {
emailEditor.value.registerProvider('userUploads', function (params, done) {
const images = [
{
id: Date.now(),
location: 'https://picsum.photos/id/1/500',
width: 500,
height: 500,
contentType: 'image/png',
source: 'user'
}
];
done(images);
});
};
</script>
What I’ve Tried:
- I’ve attempted to disable the “Upload Image” button by setting shouldRender.uploadButton and shouldRender.dropzone to false within the imageUploader configuration, but the button and dropzone are still visible.
- I’ve looked through the unlayer documentation and vue-email-editor issues but haven’t found a way to specifically disable the “Upload Image” button.
- I’ve checked the node_modules code of ImageUploader, and the relevant part seems to allow customization through shouldRender, but it doesn’t seem to work as expected.
Question:
How can I disable the “Upload Image” button in unlayer when using the vue-email-editor package? Is there any way to fully hide this button or the entire user-upload option?
I appreciate any guidance or examples on how to achieve this!