我用的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 <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))
wangEditor 封装组件wangEditor_qiniu.vue 里面注释我感觉还行，更改里面的参数啥的就行了
<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' // npm install 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>
使用
<wangEditor v-model="data.form.message" ref="assemblyWditor" ></wangEditor>
<script setup>
import wangEditor from '@/components/wangEditor_qiniu.vue'
const assemblyWditor = ref(null)
assemblyWditor.value.updateHtmlPlay() // 若要清空 则调用子组件方法 鼠标必须要在富文本里面才能生效
</script >
