Error with align in quill-image-resize-vue

Viewed 350

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

0 Answers
Related