98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template>
|
|
<div ref="_ref" style="border: 1px solid #ccc">
|
|
<Toolbar
|
|
style="border-bottom: 1px solid #ccc"
|
|
:editor="editorRef"
|
|
:default-config="toolbarConfig"
|
|
mode="default"
|
|
/>
|
|
<Editor
|
|
v-model="htmlValue"
|
|
:style="{ height: height + 'px', overflowY: 'hidden' }"
|
|
:default-config="editorConfig"
|
|
mode="default"
|
|
@on-created="handleCreated"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
|
|
import { onBeforeUnmount, shallowRef, ref } from 'vue'
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
import api from '@/api'
|
|
|
|
const props = defineProps({
|
|
valueHtml: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 500,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:valueHtml'])
|
|
|
|
const editorRef = shallowRef()
|
|
|
|
const _ref = ref(null)
|
|
|
|
const toolbarConfig = {}
|
|
|
|
const editorConfig = { placeholder: '请输入游戏介绍...', MENU_CONF: {} }
|
|
|
|
const htmlValue = computed({
|
|
get() {
|
|
return props.valueHtml
|
|
},
|
|
set(value) {
|
|
emit('update:valueHtml', value)
|
|
},
|
|
})
|
|
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
allowedFileTypes: ['image/*'],
|
|
base64LimitSize: 5 * 1024, // 5kb
|
|
// 超时时间，默认为 10 秒
|
|
timeout: 5 * 1000, // 5 秒
|
|
|
|
async customUpload(file, insertFn) {
|
|
await upFile(file, insertFn)
|
|
},
|
|
}
|
|
|
|
editorConfig.MENU_CONF['uploadVideo'] = {
|
|
allowedFileTypes: ['video/*'],
|
|
|
|
async customUpload(file, insertFn) {
|
|
await upFile(file, insertFn)
|
|
},
|
|
}
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value
|
|
if (editor == null) return
|
|
editor.destroy()
|
|
})
|
|
|
|
const handleCreated = (editor) => {
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
editor.on('fullScreen', () => {
|
|
_ref.value.style.zIndex = 10
|
|
})
|
|
}
|
|
|
|
const upFile = async (file, insertFn) => {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const res = await api.uploadImg(formData)
|
|
insertFn(res.data.data)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|