Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传

/* utf.js - UTF-8 <=> UTF-16 convertion
 *
 * Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
 * Version: 1.0
 * LastModified: Dec 25 1999
 * This library is free. You can redistribute it and/or modify it.
 */
/*
 * Interfaces:
 * utf8 = utf16to8(utf16);
 * utf16 = utf8to16(utf8);
 */
import CryptoJS from 'crypto-js'
const dataJSON = {
    utf16to8(str) {
        var out,
            i,
            len,
            c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    },
    utf8to16(str) {
        var out,
            i,
            len,
            c;
        var char2,
            char3;
        out = "";
        len = str.length;
        i = 0;
        while (i < len) {
            c = str.charCodeAt(i++);
            switch (c >> 4) {
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                    // 0xxxxxxx
                    out += str.charAt(i - 1);
                    break;
                case 12:
                case 13:
                    // 110x xxxx 10xx xxxx
                    char2 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                    break;
                case 14:
                    // 1110 xxxx 10xx xxxx 10xx xxxx
                    char2 = str.charCodeAt(i++);
                    char3 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
                    break;
            }
        }
        return out;
    },
    // ========================================================
    /*
 * Interfaces:
 * b64 = base64encode(data);
 * data = base64decode(b64);
 */
    base64encode(str) {
        var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
        var base64DecodeChars = new Array(-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
        var out,
            i,
            len;
        var c1,
            c2,
            c3;
        len = str.length;
        i = 0;
        out = "";
        while (i < len) {
            c1 = str.charCodeAt(i++) & 0xff;
            if (i == len) {
                out += base64EncodeChars.charAt(c1 >> 2);
                out += base64EncodeChars.charAt((c1 & 0x3) << 4);
                out += "==";
                break;
            }
            c2 = str.charCodeAt(i++);
            if (i == len) {
                out += base64EncodeChars.charAt(c1 >> 2);
                out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
                out += base64EncodeChars.charAt((c2 & 0xF) << 2);
                out += "=";
                break;
            }
            c3 = str.charCodeAt(i++);
            out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
            out += base64EncodeChars.charAt(c3 & 0x3F);
        }
        return out;
    },
    base64decode(str) {
        var c1,
            c2,
            c3,
            c4;
        var i,
            len,
            out;
        len = str.length;
        i = 0;
        out = "";
        while (i < len) { /* c1 */
            do {
                c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
            } while (i < len && c1 == -1);
            if (c1 == -1) 
                break;
            


            /* c2 */
            do {
                c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
            } while (i < len && c2 == -1);
            if (c2 == -1) 
                break;
            


            out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
            /* c3 */
            do {
                c3 = str.charCodeAt(i++) & 0xff;
                if (c3 == 61) 
                    return out;
                


                c3 = base64DecodeChars[c3];
            } while (i < len && c3 == -1);
            if (c3 == -1) 
                break;
            


            out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
            /* c4 */
            do {
                c4 = str.charCodeAt(i++) & 0xff;
                if (c4 == 61) 
                    return out;
                


                c4 = base64DecodeChars[c4];
            } while (i < len && c4 == -1);
            if (c4 == -1) 
                break;
            


            out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
        }
        return out;
    },
    safe64(base64) {
        base64 = base64.replace(/\+/g, "-");
        base64 = base64.replace(/\//g, "_");
        return base64;
    },
    // 我把获取生成token的放这里,然后直接用就行了
    // scope 七牛云文件名,就比如你在广东区域创建的images3z文件夹下的文件
    qiniuToken(AccessKey, SecretKey, scope = 'images3z') {
        let timestamp = new Date().getTime() // 当前的时间戳
        timestamp = parseInt(timestamp / 1000) + 36000
        let putPolicy = {
            'scope': scope, // 七牛云文件名,最好跟着改下
            'deadline': timestamp
        }
        // SETP 2
        let put_policy = JSON.stringify(putPolicy)
        // SETP 3
        let encoded = dataJSON.base64encode(dataJSON.utf16to8(put_policy));
        // SETP 4
        let hash = CryptoJS.HmacSHA1(encoded, SecretKey);
        let encoded_signed = hash.toString(CryptoJS.enc.Base64);
        // SETP 5
        return AccessKey + ":" + dataJSON.safe64(encoded_signed) + ":" + encoded;
    }
}
export default dataJSON
// ================================================
// 使用方法  npm install crypto-js
// 引入 import qiniuJSON from '@/utils/tokenTools'
// 使用 console.log(qiniuJSON.qiniuToken(AccessKey,SecretKey,scope))

<template>
  <div class="editorDiv" style="border: 1px solid #ccc">
    <div class="editorContent">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 350px"
        v-model="data.valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="updateHtml"
        class="Editor"
      />
    </div>
    <!-- {{ valueHtml }} -->
  </div>
</template>
<script setup>
// import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, defineProps, defineExpose, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import qiniuJSON from '@/utils/tokenTools'
import * as qiniu from 'qiniu-js'
import { useVModel } from '@vueuse/core' // npm install @vueuse/core
let mode = ref('default')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {
  excludeKeys: [
    'fullScreen',//不显示全屏
    // 'group-video',  // 不显示上传视频
    'uploadVideo'
  ]
}
//菜单配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 配置默认字号
    // 配置上传图片
    uploadImage: {
      // 自定义上传图片到七牛云
      async customUpload (file, insertFn) {
        console.log('file', file)
        const isPic = file.type.split('/')[0] === 'image';
        const isLt2M = file.size / 1024 / 1024 <= 10;
        if (!isPic) {
          ElMessage.error('只能上传图片噢~');
        } else if (!isLt2M) {
          ElMessage.error('上传图片大小不能超过 10MB!');
        } else {
          let url = '';
          let token = qiniuJSON.qiniuToken('yZmoyHLyxFv_-mcigSrbNyTS', 'jl8QhXcctVweMQoKft9I', 'images3z')
          let config = {
            useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            region: 'https://upload-z2.qiniup.com'    // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
          };
          let putExtra = {
            fname: "",  //文件原文件名
            params: {}, //用来放置自定义变量
            mimeType: null
          };
          // jiancai/upload_pic_ 中 jiancai 是七牛云空间所属的文件夹名称 如果有多个,你也可以写成jiancai/jiancai/ 都行
          var observable = qiniu.upload(file, 'uploadImg/upload_pic_' + file.name, token);
          observable.subscribe({
            complete: (result) => {
              // 利用七牛云注册成功后配置的地址 + 七牛云返回唯一的key，访问上传到七牛云的图片。
              url = `http://zt.zhninfo.com/${result.key}`
              insertFn(url, `${result.key}`, '');   // 将图片插入编辑器显示
            }
          })

        }
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // 查看所有工具栏key，先查看可以根据实际情况进项增删
  //   console.log(JSON.stringify(editor.getAllMenuKeys()))
}


// 组件双向绑定代码
// 内容 HTML
const data = reactive({
  valueHtml: ''
})
// 初始值
const propsValue = defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
// @vueuse/core 的实现
// 使用 useVModel 实现双向数据绑定 v-model 指令
// 1. 使用 props 接收 modelValue
// 2. 使用 useVModel 来包装props中的 modelValue 属性数据
// 3. 在使用 checked.value就是使用父组件数据
// 4. 在使用 checked.value = '数据' 赋值的时候，就会自动触发 emit('update:modelvalue', '数据')
// 5. 也可以手动触发别的事件 例如这里的 change
let imageUrl = useVModel(propsValue, 'modelValue', emit)
data.valueHtml = ![undefined, null].includes(propsValue.modelValue) ? imageUrl.value : ''
// console.log('-----data.valueHtml-------', data.valueHtml, propsValue.modelValue)
// 富文本编辑器内容监听
const updateHtml = (val) => {
  imageUrl.value = data.valueHtml
}
// 父组件调用子组件手动清空
const updateHtmlPlay = () => {
  imageUrl = useVModel('', 'modelValue', emit)
  data.valueHtml = ''
  console.log(imageUrl, '------父组件调用子组件手动清空------', data.valueHtml)
}
defineExpose({ updateHtmlPlay })
</script>

<!-- 别忘了引入样式 -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang="scss">
.editorDiv {
  margin: 0 auto;
}
</style>
<style lang="scss">
.w-e-text-container {
  video {
    width: 85% !important;
  }
}
.w-e-text-container [data-slate-editor] {
  height: 100% !important;
  overflow-y: auto !important;
  p {
    margin: 0;
  }
}
</style>