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

最新推荐文章于 2024-04-12 16:20:45 发布

VIP文章 mylbest

最新推荐文章于 2024-04-12 16:20:45 发布

阅读量1.8k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/mylbest/article/details/125806970

版权

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