vue中封装wang-editor组件和自定义音频组件

最新推荐文章于 2024-11-19 19:53:34 发布

码出未来jgs

最新推荐文章于 2024-11-19 19:53:34 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术点代码记录（方便以后开发）文章标签： vue

本文链接：https://blog.csdn.net/jgs525/article/details/119239782

本文介绍如何在Vue项目中封装wang-editor富文本编辑器，并实现自定义的音频组件。通过封装，可以更好地集成到Vue应用中，提供便捷的文本编辑功能和音频插入能力。

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

wang-editor.vue

<template>
<div>
  <div :id="params.id">
  </div>
  <Audio v-if="audioShow" @uploadAudio="uploadAudio"/>
</div>
</template>
<script>
import E from 'wangeditor'
import Audio from './audio.vue'
export default {
  name: 'wangEditor',
  components: {
    Audio
	},
  props: {
    id: {
      type: String,
      default: () => ''
    },
    content: {
      type: String,
      default: () => ''
    },
  },
  watch: {
    id (newVal) {
      this.params.id = newVal
    }
  },
  data() {
    return {
      localEditor: null,
      audioShow: false,
      params: {
        id: 'wang-editor', //富文本框ID
        menus: [
          'bold',
          'head',
          'link',
          'italic',
          'underline'
        ],
        customImgUpload: {
          flag: true, //是否自定义方法上传图片
          methods: {
            customUploadImg: (resultFiles, insertImgFn) => {
              console.log(resultFiles, insertImgFn, '插入图片')
              this.uploadFile('img', resultFiles, insertImgFn)
              // resultFiles 是 input 中选中的文件列表
              // insertImgFn 是获取图片 url 后，插入到编辑器的方法
              // 上传图片，返回结果，将图片插入到编辑器中
            }
          }
        },
        customVideoUpload: {
          flag: true, //是否自定义方法上传视频
          methods: {
            customUploadVideo: (resultFiles, insertVideoFn) => {
              console.log(resultFiles, insertVideoFn, '插入视频')
              this.uploadFile('video', resultFiles, insertVideoFn)
              // resultFiles 是 input 中选中的文件列表
              // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
              // 上传视频，返回结果，将视频地址插入到编辑器中
              // insertVideoFn('https://touxianglogo.com/img/3.36eb1cce.jpg')
            }
          }
        },
        params: {
          focus: false, //自动focus
          placeholder: '请输入正文...', //placeholder内容提示
          showMenuTooltips: true, //菜单栏提示
          menuTooltipPosition: 'down',
          excludeMenus: [
            //自定义程度比较轻时