WangEdit富文本编辑器增加上传视频功能

最新推荐文章于 2025-03-16 21:13:45 发布

前端小歌谣

最新推荐文章于 2025-03-16 21:13:45 发布

阅读量2.9k

点赞数 28

CC 4.0 BY-SA版权

文章标签：前端富文本 vue

本文链接：https://blog.csdn.net/weixin_43392489/article/details/118880710

本文介绍了如何在Vue项目中，针对WangEdit富文本编辑器增加上传视频的功能。作者通过封装子组件，实现了在编辑器内便捷上传视频的需求，详细过程包括查阅官方文档和编写Vue代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

乘着今天中午的时间对以前项目的一个需求进行一定的处理

前天去了甲方公司

接到了了一个新的需求

就是可以把项目的一个富文本的编辑器可以设置为能够上传视频

于是乎

就要对vue里面的这个组件进行操作了

首先我们可以看一眼官网的文档

需要用到的就直接到官网文档进行查询即可了

需求（接口文档）

由于官网的的文档是对原生js进行说明的

所以vue的写法就可以这样先写了、

代码部分(封装子组件)

<template lang="html">
  <div class="editor">
    <!--定义的为表头的属性-->
    <div ref="toolbar" class="toolbar">
    </div>
    <!--定义的为表格的属性-->
    <div ref="editor" class="text" >
    </div>
  </div>
</template>
<script>
/*引入王edit插件*/
import E from 'wangeditor'
import {ACCESS_TOKEN} from "@/store/KeyConstants";
/*开始引入Vue的模块*/
import Vue from "vue";
export default {
  name: 'EditorBar',
  data() {
    return {
      editor: null,
      info_: null,
      UploadVidio:'',
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    },
    setMode:{
      type:Boolean,
      request:true
    }
  }