javascript - 在 quill-image-resize-vue 中对齐时出错

Question

当我使用“quill-image-resize-vue”时，图像对齐有问题，对齐到中心或右边，但是当我去查看结果时，它是左对齐的。

并非在所有情况下都会发生，但我无法确定它在哪些情况下会失败。

我唯一注意到的是，当它工作时，img 属性有“display: block”和“margin: auto”。

这是我的代码:

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: {},
        },
      },
   }
}

HTML:

<vue-editor
  v-model="editorData"
  :customModules="customModulesForEditor"
  :editorOptions="editorSettings"
></vue-editor>

当我创建它时，它看起来像这样: form

但是当我解释 HTML 时，它看起来像这样: result html

Answer 1

我最近将 quill-image-resize-vue 添加到我的 vue2 编辑器中，发现编辑器中的以下一组步骤可以保持对齐:

1. 点击您需要的对齐方式。
2. 调整图片大小。
3. 保存 html 数据。

仅调整图像大小效果很好，但图像对齐作为一个独立的操作似乎不起作用。

Vue 编辑器主工具栏中可用的对齐选项似乎可以正确对齐图像，所以我只使用它们。要在调整图像大小时禁用对齐，我使用了:

editorSettings: {
                modules: {
                  imageResize: {
                    modules: ['Resize', 'DisplaySize']
                  },
                }
              }