how can I load an image into my vuex action and get the value of image ?
enter image description hereenter image description hereenter image description here
import { RichTextEditorComponent, Toolbar, Image, Link, HtmlEditor, QuickToolbar } from “@syncfusion/ej2-vue-richtexteditor”;
import { mapActions } from “vuex”;
export default {
components: {
‘ejs-richtexteditor’: RichTextEditorComponent
},
methods: {
…mapActions([‘pushPicture’]),
handleImageUpload(files) {
return new Promise((resolve, reject) => {
this.pushPicture(files)
.then(response => {
resolve(response);
})
.catch(error => {
console.error(‘Error uploading image:’, error);
reject(error);
});
});
}
},
data() {
return {
height: 400,
quickToolbarSettings: {
image: [
‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘OpenImageLink’, ‘-‘,
‘EditImageLink’, ‘RemoveImageLink’, ‘Display’, ‘AltText’, ‘Dimension’,
]
},
toolbarSettings: {
items: [‘Bold’, ‘Italic’, ‘Underline’, ‘StrikeThrough’,
‘FontName’, ‘FontSize’, ‘FontColor’, ‘BackgroundColor’,
‘LowerCase’, ‘UpperCase’, ‘|’,
‘Formats’, ‘Alignments’, ‘OrderedList’, ‘UnorderedList’,
‘Outdent’, ‘Indent’, ‘|’,
‘CreateLink’, ‘Image’, ‘|’, ‘ClearFormat’, ‘Print’,
‘SourceCode’, ‘FullScreen’, ‘|’, ‘Undo’, ‘Redo’
]
},
insertImageSettings: {
saveUrl: this.handleImageUpload,
removeUrl: ‘https://ej2.syncfusion.com/services/api/uploadbox/Remove’
}
};
},
provide: {
richtexteditor: [Toolbar, Image, Link, HtmlEditor, QuickToolbar]
}
}
Ibrohimbek Muhsin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.