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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
| <template>
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
@onChange="handleChange"
@onCreated="handleCreated"
/>
</div>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import {getPictureToken} from "@/api/oss";
import useUserStore from '@/store/modules/user'
import * as qiniu from "qiniu-js";
import { v4 as uuidv4 } from "uuid";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { reactive, onBeforeUnmount, onMounted, shallowRef, ref } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const props = defineProps({
modelValue: {
type: String,
default: ""
},
imageDir: {
type: String,
default: "unknow",
}
});
const emits = defineEmits({
'update:modelValue': ""
});
const html = computed({
get() {
return props.modelValue
},
set(value) {
emits('update:modelValue', value)
}
})
const editor = ref(null);
const toolbarConfig= reactive({});
const editorConfig= reactive({
placeholder:'请输入内容...',
MENU_CONF: {
uploadImage: {
customUpload(file, insertFn) {
// 获取签名
getPictureToken().then(res => {
var keyPrefix = "news/" + useUserStore().uid + "/" + props.imageDir + "/";
// https://developer.qiniu.com/kodo/1283/javascript
const token = res.data.token,
key = keyPrefix + uuidv4() + "." + file.name.split(".")[1],
putExtra = {
fname: file.name,
// mimeType: file.type,
},
config = {
useCdnDomain: true,
region: res.data.region
};
let observer = {
next (res) {
console.log(res)
console.log('已上传大小，单位为字节：' + res.total.loaded)
console.log('本次上传的总量控制信息，单位为字节：' + res.total.size)
console.log('当前上传进度，范围：0～100：' + res.total.percent);
},
error (err) {
console.log(err)
console.log(err.code)
console.log(err.message)
console.log(err.isRequestError)
console.log(err.reqId)
},
complete (res) {
console.log(res)
insertFn(res.data.url, "图片", res.data.url);
}
};
const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe(observer) // 上传开始
});
},
// 上传之前触发
onBeforeUpload(file) { // JS 语法
console.log("onBeforeUpload", file);
// file 选中的文件，格式如 { key: file }
return file
// 可以 return
// 1. return file 或者 new 一个 file ，接下来将上传
// 2. return false ，不上传这个 file
},
// 上传进度的回调函数
onProgress(progress) { // JS 语法
// progress 是 0-100 的数字
console.log('progress', progress)
},
// 单个文件上传成功之后
onSuccess(file, res) { // JS 语法
console.log(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file, res) { // JS 语法
console.log(`${file.name} 上传失败`, res)
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) { // JS 语法
console.log(`${file.name} 上传出错`, err, res)
},
}
}
});
const mode= ref('default'); // or 'simple'
const handleCreated = (t) => {
// console.log("handleCreated", t)
editorRef.value = t // 记录 editor 实例，重要！
};
onMounted(()=>{
// console.log("onMounted")
});
onBeforeUnmount(() => {
// console.log("onBeforeUnmount")
});
function handleChange(editor) {
// console.log(editor.getHtml(), editor);
}
</script>
|
