wangeditor上传本地视频的方法

在官方版本的上传视频功能里，是不支持上传本地视频的，如果需要实现上传本地视频文件，可以自己定义一个上传方法。

实现思路：

1、使用input -> type=“file”，将透明度设为0.

2、input的外层容器定位到富文本的菜单栏，并加上响应的样式，input的外层容器和input标签都设置到合适到宽高。

3、创建fromData对象【new FormData()】，将需要上传的文件添加到该对象，以及服务端需要的一些参数也在这里一起添加

formData.append("key", "value");

4、引入axios（本人是在vue项目上的实践），通过axios的post方法上传即可，第一个参数是服务器的URL，第二个参数是上传所需的参数，包括文件本身。

// 引入axios
import axios from 'axios'// 发起post请求
axios.post('serverUrl', 'param')
.then(res => {// 请求成功即可获得后端返回的URL
})

到这一步就完成了视频上传

5、将视频插入到富文本

这个功能官方也没有提供现成的方法，需要自己利用wangeditor的api来实现

使用 editor.txt.append('<p>追加的内容</p>') 向编辑器追加内容

现在我们可以将p标签改为HTML5的video标签，并将上一步得到的URL设置为src属性的值，如：

editor.txt.append('<video src="url"></video>')

到这一步就完成了，希望能帮到有需求的朋友。

wangeditor上传本地视频的方法相关推荐

wangEditor上传本地视频
wangEditor是一个轻量级web富文本编辑器,一般可以满足用户需求,但是有特殊要求的可以对其进行修改源文件是上传Html视频格式,如果想要变成上传本地视频需要做以下修改: /*上传视频*/// ...
wangEditor 上传本地视频和图片到oss服务器并在富文本回显。
不多说直接上代码,无效你顺着网线来打我: 先看一下改后的效果图第一步:找到wangEditor.js文件,一下代码直接全选复制,到wangEditor.js文件里面Ctrl+A 在Ctrl+V全部替 ...
C# Umeditor 编辑器上传本地视频、本地文件
Umeditor 最近在做一个网站,涉及到网站文章的编辑.Umeditor是一个很好的选择,但是看了一下Umeditor,发现不能上传本地视频和本地文件,而项目又要得比较急,所以以我觉得最快的方式修改 ...
有道云笔记markdown上传本地图片的方法
有道云笔记markdown上传本地图片的方法有道云笔记markdown模式非会员发现不能直接截屏粘贴图片了.后来网上搜集了下方法,发现了好几种解决办法. 当然,如果你一年,不差那两百块钱,直 ...
qq空间上传html,qq空间怎么上传本地视频两种上传方式(说说/日志)
首先打开QQ空间,我们有两种上传本地视频到QQ空间的方式, 第一种是说说上传,第二种是日志上传. 先来说第一种, 以上是我们打开qq空间以后,里面说说界面,后面有一组类似冒号的东西,把鼠标移至那里,然 ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
PHP怎么做成Qq空间相册,qq空间如何上传本地视频相片制作视频传到QQ空间
相信很多网友都有上传QQ空间照片的喜好,我就是其中一个,拍了一张漂亮的PP,恨不得马上传到空间,炫耀一番.上传的照片日积月累,越来越多.平常要一张张的观看照片挺费时.最近学了一个新招,可以使用狸窝照片 ...
quill上传本地视频（保姆级教学）
设置富文本参数 // 富文本框参数设置editorOption: {modules: {ImageExtend: {loading: false,name: 'file',action: UPLOAD ...

wangeditor上传本地视频的方法

wangeditor上传本地视频的方法相关推荐

最新文章

热门文章