wangEditor组件图片设置大小（包含完整的图片/视频上传逻辑）

最新推荐文章于 2025-01-02 10:17:40 发布
最新推荐文章于 2025-01-02 10:17:40 发布
阅读量2.2k 收藏 7
点赞数 10
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69418779/article/details/143580719
版权

wangEditor组件图片设置大小

服了，wangEditor挺多人用的,拿来就用，没遇到这种上传图片，图片自动铺满全屏的情况吗？？ 遇到个需求：上传显示调小点好看，这一部分怎么调整官方文档也写的有些抽象，也没人在意这个问题。

自己研究了一下，有三种方法，两种能按照设置长宽的方式调整但是会压画质，我写了一种能等比例缩小的图片的方式，画质不变。

在这里插入图片描述

  • 变成下面这样
    在这里插入图片描述

不说废话了，代码附上，三种方法都在代码里，当然也写了wangditor上传图片和视频的完整逻辑，可以直接用（对接你的oss服务器接口）。重点看customInsert里的方法，insertFn是自带的，下面是自己写的，根据需求把注释清掉。

在这里插入图片描述

<script lang="ts" setup>
import { PropType } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {i18nChangeLanguage, IDomEditor, IEditorConfig, SlateTransforms} from '@wangeditor/editor'
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
import {ElLoading, ElMessage} from 'element-plus'
import { useLocaleStore } from '@/store/modules/locale'
import { getAccessToken, getTenantId } from '@/utils/auth'
import * as FileApi from '@/api/infra/file'

defineOptions({ name: 'Editor' })

type InsertFnType = (url: string, alt: string, href: string) => void

const localeStore = useLocaleStore()

const currentLocale = computed(() => localeStore.getCurrentLocale)

i18nChangeLanguage(unref(currentLocale).lang)

const props = defineProps({
  editorId: propTypes.string.def('wangeEditor-1'),
  height: propTypes.oneOfType([Number, String]).def('750px'),
  editorConfig: {
    type: Object as PropType<Partial<IEditorConfig>>,
    default: () => undefined
  },
  readonly: propTypes.bool.def(false),
  modelValue: propTypes.string.def('')
})

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  type: undefined,
  path: undefined,
  createTime: []
})
//let previousVideoList: string[] = []; // 用于存储上一个视频列表
let intervalId: NodeJS.Timeout | null = null; // 外部变量存储定时器ID
let savedVideoList: string[] = []; // 新增一个变量来保存视频列表

const emit = defineEmits(['change', 'update:modelValue'])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef<IDomEditor>()

const valueHtml = ref('')

watch(
  () => props.modelValue,
  (val: string) => {
    if (val === unref(valueHtml)) return
    valueHtml.value = val
  },
  {
    immediate: true
  }
)

// 监听
watch(
  () => valueHtml.value,
  (val: string) => {
    emit('update:modelValue', val)
  }
)

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor
}

// 编辑器配置
const editorConfig = computed((): IEditorConfig => {
  return Object.assign(
    {
      placeholder: '请输入内容...',
      readOnly: props.readonly,
      customAlert: (s: string, t: string) => {
        switch (t) {
          case 'success':
            ElMessage.success(s)
            break
          case 'info':
            ElMessage.info(s)
            break
          case 'warning':
            ElMessage.warning(s)
            break
          case 'error':
            ElMessage.error(s)
            break
          default:
            ElMessage.info(s)
            break
        }
      },
      autoFocus: false,
      scroll: true,
      MENU_CONF: {
        ['uploadImage']: {
          server: import.meta.env.VITE_UPLOAD_URL,
          // 单个文件的最大体积限制，默认为 20M
          maxFileSize: 20 * 1024 * 1024,
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 200,
          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
          allowedFileTypes: ['image/*'],

          // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
          meta: { updateSupport: 0 },
          // 将 meta 拼接到 url 参数中，默认 false
          metaWithUrl: true,

          // 自定义增加 http  header
          headers: {
            Accept: '*',
            Authorization: 'Bearer ' + getAccessToken(),
            'tenant-id': getTenantId()
          },

          // 跨域是否传递 cookie ，默认为 false
          withCredentials: true,

          // 超时时间，默认为 15 秒
          timeout: 60 * 1000, // 60 秒

          // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
          fieldName: 'file',
          // 上传之前触发
          onBeforeUpload(file: File) {
            console.log(file)
            return file
          },
          // 上传进度的回调函数
          onProgress(progress: number) {
            // progress 是 0-100 的数字
            console.log('progress', progress)
          },
          onSuccess(file: File, res: any) {
            console.log('onSuccess', file, res)

          },
          onFailed(file: File, res: any) {
            alert(res.message)
            console.log('onFailed', file, res)
          },
          onError(file: File, err: any, res: any) {
            alert(err.message)
            console.error('onError', file, err, res)
          },
          // 自定义插入图片
          customInsert(res: any, insertFn: InsertFnType) {
           insertFn(res.data, 'image', res.data)

            //新方法

            // 获取编辑器实例
            //实验可以 可以控制缩放比例
            // const imgUrl = res.data;
            // const imgHtml = `<img src="${imgUrl}" alt="image" style="width: 30%;"/>`;
            //
            // // 获取编辑器实例并插入图片 HTML
            // const editor = unref(editorRef.value);
            // if (editor) {
            //   editor.dangerouslyInsertHtml(imgHtml); // 使用带样式的 HTML 插入图片
            // } else {
            //   console.error('Editor is not initialized.');
            // }

            //不行 压缩画质
            // const imgUrl = res.data;
            // const imgHtml = `<img src="${imgUrl}" alt="image" style="width: 650px; height: 400px;" />`;
            //
            // const editor = unref(editorRef.value);
            // if (editor) {
            //   // 通过 dangerouslyInsertHtml 插入图片的 HTML，控制宽高
            //   editor.dangerouslyInsertHtml(imgHtml);
            // } else {
            //   console.error('Editor is not initialized.');
            // }

            // const editor = unref(editorRef.value)
            //
            //
            // const imageEntries = editor.getElemsByType('image'); // 获取所有图片元素
            // console.log(imageEntries)
            // if (!imageEntries.length) {
            //   console.log('当前没有图片节点');
            //   return;
            // }
            //
            // imageEntries.forEach((imageEntry) => {
            //   // imageEntry 是一个对象，包含图片的相关属性
            //   const node = imageEntry; // 获取当前图片节点
            //   console.log('选中了图片节点', node);
            //
            //   // 修改图片的宽度和高度属性
            //   SlateTransforms.setNodes(
            //     editor,
            //     {
            //       // @ts-ignore
            //       style: {
            //         width: '30px',  // 设置宽度
            //         height: '30px', // 设置高度
            //       },
            //     },
            //   );
            // });

            //不行 压缩画质
            // const imageElements = editor.getElemsByType('image');
            //
            //
            // nextTick(() => {
            //   // 获取当前所有的图片节点
            //   const selectedImages = editor.getElemsByType('image');
            //   console.log("Selected Images:", selectedImages);
            //
            //   imageElements.forEach((element) => {
            //     console.log("运行一次");
            //     SlateTransforms.setNodes(
            //       editor,
            //       {
            //         width: '200px',  // 设置宽度为200px
            //         height: '20px',   // 高度自适应
            //       },
            //       {
            //         mode: 'highest', // 针对最高层级的节点
            //       }
            //     );
            //   });
            //
            // });

          }
        },
        ['uploadVideo']: { // 新增的视频上传配置
          // server: import.meta.env.VITE_UPLOAD_URL,
          server: import.meta.env.VITE_UPLOAD_URL,
          maxFileSize: 500 * 1024 * 1024, // 最大文件限制为500MB
          maxNumberOfFiles: 20, // 最多可上传20个视频
          allowedFileTypes: ['video/*'], // 允许上传所有类型的视频文件
          meta: { updateSupport: 0 },
          metaWithUrl: true,
          headers: {
            Accept: '*',
            Authorization: 'Bearer ' + getAccessToken(),
            'tenant-id': getTenantId()
          },
          withCredentials: true,
          timeout: 60 * 60 * 1000, // 60秒-120
          fieldName: 'file',
          onBeforeUpload(file: File) {
            console.log(file)
            return file
            // 确保获取到正确的文件对象

          },
          // onProgress(progress: number) {
          //   console.log('progress', progress)
          //
          //   if (progress === 100) {
          //     // 调用接口获取最新上传的视频路径
          //     const getLatestVideoPath = async () => {
          //       try {
          //         const response = await FileApi.getFilePage(queryParams); // 获取视频列表的接口
          //         const currentVideoList = response.list.map(item => item.url).slice(0, 5); // 获取当前前五条视频路径
          //
          //         // 只有在前五条视频路径发生变化时才执行后续逻辑
          //         const hasUpdated = previousVideoList.slice(0, 5).some((url, index) => url !== currentVideoList[index]);
          //
          //         if (hasUpdated) {
          //           previousVideoList = currentVideoList; // 更新之前的视频列表
          //
          //           if (currentVideoList.length > 0) {
          //             const latestVideoPath = currentVideoList[0]; // 最新上传的视频路径
          //             console.log("最新文件路径：" + latestVideoPath);
          //
          //             ElMessageBox.alert(`最新视频路径: ${latestVideoPath}`, '视频上传成功', {
          //               confirmButtonText: '确定',
          //             }).then(() => {
          //               // 点击确定后的逻辑，可以选择将路径复制到剪贴板
          //               navigator.clipboard.writeText(latestVideoPath).then(() => {
          //                 ElMessage.success('视频路径已复制到剪贴板');
          //               }).catch(err => {
          //                 console.error('复制失败', err);
          //               });
          //             });
          //           }
          //         } else {
          //           console.log("前五条视频路径没有更新，跳过弹窗。");
          //         }
          //       } catch (error) {
          //         console.error('获取最新视频路径失败', error);
          //       }
          //     };
          //
          //     // 执行获取视频路径
          //     getLatestVideoPath();
          //   }
          //
          // },
          onProgress(progress: number) {
            console.log('progress', progress);

            // 当进度为1时，保存当前视频列表
            // if (progress === 100) {
            //   FileApi.getFilePage(queryParams).then(response => {
            //     savedVideoList = response.list.map(item => item.url).slice(0, 5); // 保存前五条视频路径
            //     console.log("保存的视频列表:", savedVideoList);
            //     if (!intervalId) {
            //       intervalId = setInterval(async () => {
            //         try {
            //           const response = await FileApi.getFilePage(queryParams);
            //           const currentVideoList = response.list.map(item => item.url).slice(0, 5);
            //           console.log("currentVideoList", currentVideoList);
            //
            //           // 比较当前列表和保存的列表
            //           const hasUpdated = savedVideoList.some((url, index) => url !== currentVideoList[index]);
            //
            //           if (hasUpdated) {
            //             savedVideoList = currentVideoList; // 更新保存的视频列表
            //
            //             if (currentVideoList.length > 0) {
            //               const latestVideoPath = currentVideoList[0];
            //               console.log("最新文件路径：" + latestVideoPath);
            //
            //               ElMessageBox.alert(`最新视频路径: ${latestVideoPath}`, '视频上传成功', {
            //                 confirmButtonText: '确定',
            //               }).then(() => {
            //                 navigator.clipboard.writeText(latestVideoPath).then(() => {
            //                   ElMessage.success('视频路径已复制到剪贴板');
            //                   clearInterval(intervalId!);
            //                   intervalId = null;
            //                 }).catch(err => {
            //                   console.error('复制失败', err);
            //                   clearInterval(intervalId!);
            //                   intervalId = null;
            //                 });
            //               });
            //             }
            //           } else {
            //             console.log("前五条视频路径没有更新，跳过弹窗。");
            //           }
            //         } catch (error) {
            //           console.error('获取最新视频路径失败', error);
            //         }
            //       }, 20000);
            //     }
            //   }).catch(error => {
            //     console.error('获取视频列表失败', error);
            //   });
            // }

          },

          onSuccess(file: File, res: any) {
            console.log('onSuccess', file, res)
          },
          onFailed(file: File, res: any) {
            alert(res.message)
            console.log('onFailed', file, res)
          },
          onError(file: File, err: any, res: any) {
            alert(err.message)
            console.error('onError', file, err, res)
          },
          customInsert(res: any, insertFn: InsertFnType) {

             insertFn(res.data, 'video', res.data)
          }
        }
      },
      uploadImgShowBase64: true
    },
    props.editorConfig || {}
  )
})

const editorStyle = computed(() => {
  return {
    height: isNumber(props.height) ? `${props.height}px` : props.height
  }
})

// 回调函数
const handleChange = (editor: IDomEditor) => {
  emit('change', editor)
}

// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = unref(editorRef.value)

  // 销毁，并移除 editor
  editor?.destroy()
})

const getEditorRef = async (): Promise<IDomEditor> => {
  await nextTick()
  return unref(editorRef.value) as IDomEditor
}

defineExpose({
  getEditorRef
})
</script>

<template>
  <div class="border-1 border-solid border-[var(--tags-view-border-color)] z-10">
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :editorId="editorId"
      class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :editorId="editorId"
      :style="editorStyle"
      @on-change="handleChange"
      @on-created="handleCreated"
    />
  </div>
</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>
《Vue3笔记》第35节：Vue3项目配置wangEditor图片上传功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
04-24 157
wangEditor还提供了一个自定义上传的方法，通过方法，可以实现自己的图片上传逻辑。方法有两个参数，第一个参数是当前上传的文件对象file，第二个参数是一个回调函数insertFn，可以插入图片到文本编辑器里面。/*** 编辑器配置*/placeholder: '请输入内容...',// 创建 FormData 对象// 添加文件到 FormData// 上传图片到服务器baseURL: 'http://localhost:8888', // 设置基础的 API 地址。
【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）
热门推荐
寒泉
05-03 8万+
效果图 1、WangEditor本身提供的 “编辑图片” 功能，调整图片大小选项只能为30%，50%，100%。 2、修改 wangEditor.js 源码后，用户可以输入自定义大小。例如，50%效果如下： 再例如，20%效果如下： 修改方式 在 wangEditor.js 中进行修改，整体修改内容如下图： 主要分为两个部分的修改：输入框、事件方法。 1、增加输入框： 大约在源码的268...
Wang editor 富文本编辑器配置上传图片方法
szwwwx的博客
09-11 1827
Wang editor 富文本编辑器配置上传图片方法
wangeditor支持图片和视频上传
weixin_43933478的博客
07-29 3342
最近在搞 王编辑器 ，但是却不支持视频上传。只能自己去修改源代码。将上传图片变为可支持的上传视频。 如果觉得麻烦 可以安装我的版本。如果已经安装过 请先卸载之前的版本 npm uninstall wangediror@你自己的版本 --save 再执行 npm i guoeditor 以下为修改的全部源代码。即可粘贴复制。 (function (global, factory) { typeof exports === 'object' && typeof module !== '
vue 项目中使用wangEditor上传图片视频到oos
weixin_45455422的博客
08-10 1520
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢froala的,图片和视频都是可以调整大小还可以粘贴图片,无奈需要收费, 公司也不会同意破解, 客户估计也不会出这个钱, 所以没办法只能使用wangEditor. 效果预览 结构 我是把wangedit...
最常用的富文本编辑器--Wangediter--上传图片配置
Dennis_nafla的博客
07-27 2369
result.put("message", "上传失败信息");
wangEditor+vue上传图片到七牛云配置
oneya1的博客
12-07 787
1.下载七牛云 2.首先创建一个MyWangEditor的组件 3.页面引入组件
文本，wangEditor5教程-上传图片，在开发文档的菜单配置当中，去搜索里搜索图片，也可以找到，上传图片必须有服务端的图片，验证接口正确用postman，wangEditor的postman接口
weixin_54048131的博客
03-27 2299
用于 Vue React | wangEditorwangEditor5教程07-上传图片_哔哩哔哩_bilibili
wangeditor编辑上传图片大小
最新发布
03-18
好的，用户想了解如何在wangEditor中设置或限制上传图片的大小。我需要先回忆一下wangEditor的相关配置。记得wangEditor的上传图片配置主要在初始化编辑器的时候设置，通常是在JavaScript代码里配置uploadImgServer...
wangeditor 富文本 使用及 上传本地图片的方法
weixin_61662162的博客
10-30 1753
文章标题：Vue组件实现富文本编辑器文章摘要：本文介绍了如何使用Vue和Wangeditor插件实现富文本编辑器组件，并详细解释了组件中的各个部分和功能。Vue组件实现富文本编辑器 在Web开发中，富文本编辑器是一个非常常见的功能，它能够让用户以所见即所得的方式编辑和排版文本内容。本文将介绍如何使用Vue和Wangeditor插件实现一个富文本编辑器组件。bash npm install @wangeditor/editor-for-vue 2. 创建富文本编辑器组件 在Vue项目中，创建一个名为RichT
wangEditor V4
01-11
例如，可以设置工具栏、禁用某些功能、自定义上传图片等。配置代码如下： ```javascript editor.config.toolbar = ['bold', 'italic', 'underline', 'insertImage']; editor.config.customUpload = function ...
wangEditor上传图片 demo
10-28
wangEditor上传图片，java图片上传后台代码；下载解压后导入eclipse,然后把项目发布到tomcat中即可，
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
例如，在toolbar中添加封面按钮，然后在`FileUpload.vue`组件中处理图片选择和上传，最后将图片URL插入到编辑器中。 总的来说，Vue、Element-UI和Quill的组合提供了一个强大而灵活的富文本编辑器，可以轻松地实现...
wangEditor5本地图片上传相关配置
01-15
### 关于 WangEditor 5 编辑器中本地图片上传的配置 #### 初始化 WangEditor 并加载必要模块 为了实现本地图片上传功能，首先需要正确初始化 WangEditor，并确保已安装必要的依赖项。 ```bash npm install @...
wangEditor在vue2中的使用（包括上传图片、视频、音频）
weixin_40917516的博客
11-19 1251
1. 创建ButtonMenu.js// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false// 获取菜单执行时的 value ，用不到则返回空 字符串或 falsereturn ''// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false// 点击菜单时触发的函数//如果此时需要载入固定格式的文字，则在此处使用编辑器插入html方法//如果以上方法无法满足你的需求的话，则采用触发事件的形式。
wangeditor5自定义扩展设置图片宽高（px）
nuannuan741的博客
01-02 1685
wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。2、查看官方文档，有相关的说明，因为不需要事件劫持和创建新元素，所以看注册新菜单这里就行。首先添加自定义的dom，显示宽度高度input框并添加确定按钮，因为弹窗默认有右上角的关闭所以这边没有添加取消的按钮，这个按需求来即可。)样例中插件是使用在工具栏上的，其实在选中工具栏上也是可以使用的但是会有一些小变化，这个之后再讲。好了，至此整个扩展基础就讲完了。
vue3+wangEditor 5 的图片自定义上传
bpluoxong的博客
05-22 3318
第二就是返回的传输路径需要使用insertFn方法再插入进富文本框。的图片上传参数无法满足需求所以需要用自己的上传来覆盖原先的上传。需要注意headers里的对象和原生的是否一致。完整代码，这个是封装的富文本组件的内容。在这里需要注意在进行post请求时，覆盖原生的图片上传操作方法是。这个是Editor.vue。
wangeditor富文本上传图片等配置
qq_49899911的博客
08-16 4355
wangeditor 上传图片
Wangeditor 的配置与实例【图片上传+排除菜单】
weixin_45333006的博客
08-16 655
## 用wangeditor封装一个自定义富文本组件 ### 安装 ①yarn add @wangeditor/editor 或者 npm install @wangeditor/editor --save ②yarn add @wangeditor/editor-for-vue@next #或者 npm install @wangeditor/editor-for-vue@next --save ### 引入 import '@wangeditor/editor/dist/css/style.css
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值