Блог

У меня проблема с выравниванием изображений, когда я использую «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>
  

Когда я создаю, это выглядит так:
форма

Но когда я интерпретирую HTML, это выглядит так: результат html

Недавно я добавил quill-image-resize-vue в свой редактор vue2 и обнаружил, что следующий набор шагов в редакторе сохраняет выравнивание:

1. Щелкните нужное выравнивание.
2. Измените размер изображения.
3. Сохраните данные html.

Просто изменение размера изображения работает нормально, но выравнивание изображения как отдельное действие, похоже, не работает.

Параметры выравнивания, доступные на главной панели инструментов редактора Vue, похоже, правильно выровняли изображения, поэтому я просто использую их. Чтобы отключить выравнивание при изменении размера изображения, я использовал:

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