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

实现思路:

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>')

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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐