vue 富文本标签wang-editor组件的使用

本文介绍如何在Vue.js项目中集成并使用wang-editor富文本编辑器组件,详细阐述了audio.vue文件的相关内容,帮助开发者实现前端富文本编辑功能。
摘要由CSDN通过智能技术生成
<template>
  <div class="editorClass">
    <div :id="params.id"></div>
    <Audio
      v-if="audioShow"
      @uploadAudio="uploadAudio"
      @uploadNetworkAudio="handleUploadNetworkAudio"
    />
  </div>
</template>
<script>
import E from 'wangeditor';
import Audio from './audio.vue';
import Axios from 'axios';
import qs from 'querystring';
// import config from '@/conf';
export default {
  name: 'wangEditor',
  data() {
    return {
      fileSrc: '',
    };
  },
  components: {
    Audio,
  },
  props: {
    id: {
      type: String,
      default: () => '',
    },
    content: {
      type: String,
      default: () => '',
    },
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.params.id = val;
        }
      },
      immediate: true,
    },
  },
  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: [
            //自定义程度比较轻时,可以去除不需要的菜单
            // 'emoticon'
          ],
          // 图片参数配置
          uploadFileName: 'your-custom-fileName', //自定义文件名
          withCredentials: true, // 是否跨域上传
          uploadImgTimeout: 60 * 1000, //超时时间默认10S
          uploadImgServer: 'http://100.4.14.8:30384/file/newUpload', /
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值