I have a problem with alignment in the images when I use "quill-image-resize-vue", align to the center or right, but when I go to see the result, It is left aligned.
It doesn't happen in all cases, but I haven't been able to identify in which cases it fails.
The only thing I've noticed is that when it works, the img property has "display: block" and "margin: auto".
This is my 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:
<vue-editor
v-model="editorData"
:customModules="customModulesForEditor"
:editorOptions="editorSettings"
></vue-editor>
When I'm creating it looks like this: form
But when I interpret the HTML, it looks like this: result html