wangeditor 实现上传本地视频

最新推荐文章于 2024-02-02 14:08:57 发布

原创

最新推荐文章于 2024-02-02 14:08:57 发布 · 2k 阅读

标签

#vue

收录于

在遇到wangeditor不支持本地视频上传的问题后，通过分析解决思路，包括避免修改源码导致的打包问题，放弃大部分不支持此功能的富文本插件，最终选择通过input元素替换插入视频的方式成功实现了本地视频上传的功能。

遇到的问题

wangeditor 并未提供上传本地视频的功能
在这里插入图片描述

解决思路

1.修改源码【项目依赖更新，会导致打包后的项目出现问题】
2.换富文本插件【大部分都没提供上传本地视频的功能】
3.通过input去替换原有的插入视频

实现

目前的菜单
在这里插入图片描述

<template>
	 <div style="">
                    <!--菜单栏-->
                    <div ref="toolbar" class="toolbar" v-show="edit">
                    </div>
                    <!--编辑框-->
                    <div ref="editor" class="text">
                    </div>
      </div>
                 <input type="file" accept="video/*" name="file" ref="uploadFileVideo" id="uploadFileVideo"       @change="changevideo" style="opacity: 0; width: 0; height: 0;cursor: pointer">  
</templ