There is an issue with the alignment of images when using "quill-image-resize-vue" - they are supposed to align to the center or right, but end up being left aligned in the result.
This inconsistency does not occur in all cases, and it's been challenging to pinpoint when it fails.
The observation is that when it does work, the img property includes "display: block" and "margin: auto".
Below is the provided code:
import { VueEditor } from "vue2-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-vue";
export default {
name: "format-document-form",
components: {
VueEditor,
},
data: function () {
editorData: "<p>Desarrollo de la agenda...</p>",
customModulesForEditor: [
{ alias: "imageDrop", module: ImageDrop },
{ alias: "imageResize", module: ImageResize },
],
editorSettings: {
modules: {
imageDrop: true,
imageResize: {},
},
},
}
}
The HTML code snippet:
<vue-editor
v-model="editorData"
:customModules="customModulesForEditor"
:editorOptions="editorSettings"
></vue-editor>
During creation, the layout appears as shown here.
However, the HTML interpretation displays it differently here.