最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园


【资料图】

我用的vue3，element-plus ，没用ts 搭建wangEditor参考 地址https://www.cnblogs.com/xbxxf/p/16791084.html 七牛云安装参考地址https://blog.csdn.net/ldoit/article/details/121533204本来就是抄大佬的，就不复制粘贴了 主要是整理关于七牛云部分的代码，秉着复制就能用的原则，我把自己封装好的组件复制过来，改改参数即可使用 新建tokenTools.js文件

/* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo  * 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))

wangEditor 封装组件wangEditor_qiniu.vue 里面注释我感觉还行，更改里面的参数啥的就行了

<script setup>// import "@wangeditor/editor/dist/css/style.css" // 引入 cssimport { 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" // npm install qiniu-jsimport { useVModel } from "@vueuse/core" // npm install @vueuse/corelet mode = ref("default")// 编辑器实例，必须用 shallowRefconst 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()))}// 组件双向绑定代码// 内容 HTMLconst 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. 也可以手动触发别的事件 例如这里的 changelet 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>

使用 <script setup> import wangEditor from "@/components/wangEditor_qiniu.vue" const assemblyWditor = ref(null) assemblyWditor.value.updateHtmlPlay() // 若要清空 则调用子组件方法 鼠标必须要在富文本里面才能生效 </script >

关键词：