Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传
Posted 好色的菜狗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 <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" >
<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 >
Vue 3 日期选择器 Element-Plus
【中文标题】Vue 3 日期选择器 Element-Plus【英文标题】：Vue 3 datepicker Element-Plus 【发布时间】：2021-09-10 21:15:55 【问题描述】：我目前正在尝试在日期选择器时代（有点像谷歌航班）显示价格（通过 api 加载）。
示例：
我目前正在使用 Vue 3。我正在尝试使用 Element-plus 库来实现这一点。我找不到怎么做的方法。任何建议（我检查了 Element-plus 文档），或者建议可能另一个 Vue 3 库完全一样！
这是我的代码
<link href="//unpkg.com/element-plus/lib/theme-chalk/index.css" rel="stylesheet" type="text/css"/>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<div class="grid-container-medium">
<div id="app">
<div class="d-flex justify-content-between">
<div class="block"><span class="demonstration">Single</span>
<el-date-picker :default-value="new Date(2021, 6, 28)"
placeholder="Pick a date"
type="date"
:disabled-date="disabledDate"
v-model="value1"></el-date-picker>
</div>
</div>
</div>
</div>
<script>
var Main =
data()
return
value1: '',
value2: '',
disabledDate(time)
return time.getTime() < Date.now()
,
;
;
;const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
</script>
【问题讨论】：
不幸的是，DatePicker 已经好几天没有插槽了。所以，你不能直接这样做。您可以提出请求，请在此处添加github.com/element-plus/element-plus/issues 【参考方案1】：在 Element+ 的最新版本 (v1.2.0-beta.1) 中，他们在 DatePicker 组件中添加了一个新的 #cell 槽。
文档：DatePicker - Custom content
<template #default="cell">
<div class="cell" :class=" current: cell.isCurrent ">
<span class="text"> cell.text </span>
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</template>
所以，您现在也可以使用 Element+ 来做到这一点。
【讨论】：
感谢您的回答。我使用 v-calendar，并在“日期”中注入内容，每次“月面板”完成加载。 您能接受答案吗？谢谢！【参考方案2】：您可以使用 PrimeVue Calendar component。它有一个 date 槽：
<Calendar id="datetemplate" v-model="date_with_price">
<template #date="slotProps">
slotProps.date.day<br>
slotProps.date.price
</template>
</Calendar>
【讨论】：
以上是关于Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传的主要内容，如果未能解决你的问题，请参考以下文章
vue3.0+ts+element-plus多页签应用模板：头部工具栏（中）
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）