vue3 wangeditor图片大小

在Vue 3中使用Wangeditor编辑器插入图片时，你可以通过设置图片大小来控制其显示大小。以下是一种常见的方法：

1. 在Vue组件中，首先导入Wangeditor编辑器：

import Editor from '@wangeditor/fullscreen-editor'

2. 然后在组件的`mounted`钩子函数中初始化编辑器：

mounted() {
  const editor = new Editor(this.$refs.editor)
  editor.create()
}

3. 在模板中添加编辑器的容器元素和图片上传按钮：

<template>
  <div>
    <div ref="editor"></div>
    <input type="file" @change="handleImageUpload">
  </div>
</template>

4. 在Vue组件中定义`handleImageUpload`方法用于处理图片上传：

methods: {
  handleImageUpload(event) {
    const file = event.target.files[0]
    const editor = this.$refs.editor
    const editorInstance = editor.editorInstance

    // 使用Editor实例的insertImg方法插入图片，并设置图片大小
    editorInstance.command(null, 'insertHtml', `<img src="${URL.createObjectURL(file)}" style="width: 200px; height: auto;">`)
  }
}

在上述代码中，`<img>`标签的style属性中设置了图片的宽度为200px，高度自动调整。你可以根据需要自定义图片的大小。

请注意，上述代码只是一个简单示例，具体的实现方式可能会因你的项目需求而有所不同。你可以根据Wangeditor的文档和Vue 3的使用方式进行更详细的配置和调整。