在Vue3中使用WangEditor上传视频,可以按照以下步骤进行: 1. 安装并引入wangEditor和Vue3相关的库 首先,需要安装@wangeditor/editor和@wangeditor/editor-for-vue库。你可以使用npm或yarn进行安装: bash npm install @wangeditor/editor @wangeditor/editor-for-vue --save 或者 bash yarn add @wangeditor/editor @wang...
wangEditor4是一个富文本编辑框,可以上传图片和视频。 版本:"wangeditor": "^4.7.11" 集成代码 image.png 1、创建一个Vue组件 //视频上传以上为图片上传配置,以下为视频上传配置。 <template></template>import { mapGetters } from 'vuex' import E from 'wangeditor' import { getToken } from '@/...
最终效果,是这样的,现在开始记录怎么做: 开始 npm 安装 wangEditor 安装好后, 因为要用vue 双向绑定 ,所以 我就把wangwangEditor 做成了一个封装组件,先看一下目录 : 我是把wangEditor写在了my-components这个项目下,新建一个 vue组件,代码
log(this.editorContent) if(iframe){ this.$Message.success('上传视频成功!'); }else{ this.$Message.error('上传视频失败!'); } }, 我上面一步是可以把视频上传到富文本上面的,但是之后必须要获得富文本编辑器的焦点,不然 var editor = new E(this.$refs.editor1) editor.customConfig.onchange = (ht...
项目是基于vue3+TS,所以用的是wangEditor 5的版本,主要是设置了上传图片&视频 安装 npm install@wangeditor/editor--save npm install@wangeditor/editor-for-vue@next--save 引入 import'@wangeditor/editor/dist/css/style.css';import{Editor,Toolbar}from'@wangeditor/editor-for-vue';import{IEditorConfig}from...
至于上传视频也是非常简单,只需要将MENU_CONF['uploadImage']改成MENU_CONF['uploadvideo']即可。 参考https://www.shuanghei.com/article/2022/05/62773fe45a586c4b3fcbafef.html 分类: vue , vue3 , typeScript , vite , wangEditor 好文要顶 关注我 收藏该文 微信分享 王希有 粉丝- 33 关注- 10 ...
vue-cli安装使用请跳官网:vue-cli 安装: yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save 使用 模板 <template> <Toolbar style="border-bottom: 1px solid...
要将上传的视频尺寸修改为100px * 100px,需要在上传之后对视频进行处理。根据代码中使用的腾讯云点播(TcVod)服务,可以通过添加参数来指定转码和截图等操作。 以下是示例代码,其中包含了调用腾讯云点播 API 进行视频转码和截图的部分: async customUpload(file,insertFn){ ...
要修改上传到腾讯云后的视频尺寸为100px * 100px,你可以在customUpload函数中添加一些逻辑来实现。首先,确保已经正确配置了腾讯云存储和视频处理服务。 以下是一个示例的修改: editorConfig.MENU_CONF['uploadVideo']={ // 自定义上传 async customUpload(file,insertFn){ ...
# 或者 npm install@wangeditor/editor--saveyarnadd@wangeditor/editor-for-vue # 或者 npm install@wangeditor/editor-for-vue--save 使用: 模板 <template><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow...