vue3+wangeditor自定义上传图片视频

//安装依赖
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

组件

<template>
  <Toolbar
    style="border: 1px solid #ccc"
    :editor="editorRef"
    :defaultConfig="toolbarConfig"
    :mode="mode"
  />
  <Editor
    :style="{'height': '400px' ,'width': '100%','border': '1px solid #ccc','overflow-y': 'hidden'}"
    v-model="valueHtml"
    :defaultConfig="editorConfig"
    :mode="mode"
    @onCreated="handleCreated"
    @onChange="handleChange"
  />
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import useStore from "@/pinia/index.js";
import { S3Demo} from "@/utils/oos.js";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {getOssSts } from "@/api/bill/auditBill.js";
const { wEditor } = useStore();
import { ref,reactive, onMounted, shallowRef, onBeforeUnmount, nextTick, watch } from 'vue'

// 初始值
const props = defineProps({
  initValue: String
})

const emits = defineEmits(['getEditorContent'])

let mode = ref('default')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')

// 模拟 ajax 异步获取内容
onMounted(() => {
  nextTick(() => { // 界面节点更新完以后再修改值。
    valueHtml.value = props.initValue
  })
})

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    // 菜单 key
    'headerSelect',
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'uploadImage', // 上传图片
    'uploadVideo',//上传视频
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage',//删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen' // 全屏
  ]
}
//自定义上传图片
const editorConfig = {
  placeholder: '请输入内容...', // 配置默认提示
  // readOnly: true,
  MENU_CONF: {                // 配置上传服务器地址
    uploadImage: {
      // 小于该值就插入 base64 格式（而不上传），默认为 0
      base64LimitSize: 5 * 1024, // 5kb
      // 单个文件的最大体积限制，默认为 2M
      // maxFileSize: 1 * 1024 * 1024, // 1M
      // // 最多可上传几个文件，默认为 100
      // maxNumberOfFiles: 5,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
      // 自定义上传
      async customUpload(file, insertFn) { // 文件上传
        try {
            
            // let file = options.file; // 拿到 file
            let config = await getOssSts();
            console.log(config)
            //更新临时token
            S3Demo.updateCredentials(config.data.data.accessKeyId, config.data.data.secretAccessKey, config.data.data.sessionToken)
            S3Demo.init(config.data.data.endpoint);//初始化
            let urlData = null;
            //上传
            let nununu = await S3Demo.putObject(file, config.data.data.bucketName, 'wangeditor').then(function(resolve){
                console.log(resolve)
                urlData = resolve;
                insertFn(urlData, '', urlData)
                ElMessage({
                  type: 'success',
                  message: '上传附件成功！',
                })
            })
            
            
            
        } catch (e) {
            console.log('222')
            ElNotification.error('上传附件失败！');
        }
         // 插入到富文本编辑器中，主意这里的三个参数都是必填的，要不然控制台报错：typeError: Cannot read properties of undefined (reading 'replace')
        // insertFn(result.data.data.url, result.data.data.name, result.data.data.name)
      }
    },
    uploadVideo:{
        async customUpload(file, insertFn) {
            try {
                
                // let file = options.file; // 拿到 file
                //自定义上传到云储存开始
                let config = await getOssSts();
                console.log(config)
                //更新临时token
                S3Demo.updateCredentials(config.data.data.accessKeyId, config.data.data.secretAccessKey, config.data.data.sessionToken)
                S3Demo.init(config.data.data.endpoint);//初始化
                let urlData = null;
                //上传
                let nununu = await S3Demo.putObject(file, config.data.data.bucketName, 'wangeditor').then(function(resolve){
                    console.log(resolve)
                    urlData = resolve;
                    insertFn(urlData, urlData)
                    ElMessage({
                      type: 'success',
                      message: '上传附件成功！',
                    })
                })
                //自定义上传云储存结束
                
                
            } catch (e) {
                console.log('222')
                ElNotification.error('上传附件失败！');
            }
        }
    }
  }
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) {
        return;
    }
    editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 创建富文本编辑器
}
const handleChange = (info) => {
  // info.children 数组包含了数据类型和内容，valueHtml.value内容的html格式
  emits('getEditorContent', info.children, valueHtml.value)
}
// watch(()=>props.initValue, (value) => {  // 父组件获取初始值
//   valueHtml.value = value
// }



</script>

在父组件使用

<template>
    <WangEditor :initValue="content" @getEditorContent="onEditorChange"></WangEditor>
</template>
<script setup>
import WangEditorzu from "@/components/wangEditor.vue"
import { ref,reactive, onMounted, shallowRef, onBeforeUnmount ,nextTick } from 'vue';
const content = ref('');
//富文本编辑器回调
const onEditorChange = (arr, html) => {
    console.log(arr, html)
    content = html;
}
</script>

vue3+wangeditor自定义上传图片视频

悦读