<template>
|
<div class="border-1 border-solid border-[var(--el-border-color)] z-99">
|
<!-- 工具栏 -->
|
<Toolbar
|
:editor="editorRef"
|
:editorId="editorId"
|
class="border-0 b-b-1 border-solid border-[var(--el-border-color)]"
|
/>
|
<!-- 编辑器 -->
|
<Editor
|
v-model="valueHtml"
|
:defaultConfig="editorConfig"
|
:editorId="editorId"
|
:style="editorStyle"
|
@on-change="handleChange"
|
@on-created="handleCreated"
|
/>
|
</div>
|
<Dialog v-model="dialogVisible" title="上传文件">
|
<el-upload
|
ref="uploadRef"
|
v-model:file-list="fileList"
|
:action="url"
|
:auto-upload="false"
|
:data="data"
|
:disabled="formLoading"
|
:headers="uploadHeaders"
|
:limit="1"
|
:on-success="submitFormSuccess"
|
accept=""
|
drag
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
|
<template #tip>
|
<div class="el-upload__tip" style="color: red">
|
<!-- 提示：仅允许导入 jpg、png、gif 格式文件！ -->
|
</div>
|
</template>
|
</el-upload>
|
<template #footer>
|
<el-button :disabled="formLoading" type="primary" @click="submitFileForm">确 定</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</template>
|
</Dialog>
|
</template>
|
|
<script lang="ts" setup>
|
import {PropType} from 'vue'
|
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
|
import {i18nChangeLanguage, IDomEditor, IEditorConfig} from '@wangeditor/editor'
|
import {propTypes} from '@/utils/propTypes'
|
import {isNumber} from '@/utils/is'
|
import {ElMessage} from 'element-plus'
|
import {useLocaleStore} from '@/store/modules/locale'
|
import {getAccessToken, getTenantId} from '@/utils/auth'
|
|
defineOptions({name: 'Editor'})
|
|
const message = useMessage() // 消息弹窗
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
const formLoading = ref(false) // 表单的加载中
|
const url = import.meta.env.VITE_UPLOAD_URL
|
const uploadHeaders = ref() // 上传 Header 头
|
const fileList = ref([]) // 文件列表
|
const data = ref({path: ''})
|
const uploadRef = ref()
|
|
type InsertFnType = (url: string, alt: string, href: string) => void
|
type InsertFnType1 = (url: string, poster: string) => void
|
const localeStore = useLocaleStore()
|
|
const InsertFnInfo = ref()
|
|
const currentLocale = computed(() => localeStore.getCurrentLocale)
|
|
i18nChangeLanguage(unref(currentLocale).lang)
|
|
const props = defineProps({
|
editorId: propTypes.string.def('wangeEditor-1'),
|
height: propTypes.oneOfType([Number, String]).def('500px'),
|
editorConfig: {
|
type: Object as PropType<Partial<IEditorConfig>>,
|
default: () => undefined
|
},
|
readonly: propTypes.bool.def(false),
|
modelValue: propTypes.string.def('')
|
})
|
|
const emit = defineEmits(['change', 'update:modelValue'])
|
|
// 编辑器实例，必须用 shallowRef
|
const editorRef = shallowRef<IDomEditor>()
|
|
const valueHtml = ref('')
|
|
/** 提交表单 */
|
const submitFileForm = () => {
|
if (fileList.value.length == 0) {
|
message.error('请上传文件')
|
return
|
}
|
// 提交请求
|
uploadHeaders.value = {
|
Authorization: 'Bearer ' + getAccessToken(),
|
'tenant-id': getTenantId()
|
}
|
unref(uploadRef)?.submit()
|
}
|
|
const submitFormSuccess = (d) => {
|
InsertFnInfo.value(d.data, 'image')
|
// 清理
|
dialogVisible.value = false
|
formLoading.value = false
|
unref(uploadRef)?.clearFiles()
|
}
|
|
watch(
|
() => props.modelValue,
|
(val: string) => {
|
if (val === unref(valueHtml)) return
|
valueHtml.value = val
|
},
|
{
|
immediate: true
|
}
|
)
|
|
// 监听
|
watch(
|
() => valueHtml.value,
|
(val: string) => {
|
emit('update:modelValue', val)
|
}
|
)
|
|
const handleCreated = (editor: IDomEditor) => {
|
editorRef.value = editor
|
}
|
|
// 编辑器配置
|
const editorConfig = computed((): IEditorConfig => {
|
return Object.assign(
|
{
|
placeholder: '请输入内容...',
|
readOnly: props.readonly,
|
customAlert: (s: string, t: string) => {
|
switch (t) {
|
case 'success':
|
ElMessage.success(s)
|
break
|
case 'info':
|
ElMessage.info(s)
|
break
|
case 'warning':
|
ElMessage.warning(s)
|
break
|
case 'error':
|
ElMessage.error(s)
|
break
|
default:
|
ElMessage.info(s)
|
break
|
}
|
},
|
autoFocus: false,
|
scroll: true,
|
MENU_CONF: {
|
['uploadImage']: {
|
customBrowseAndUpload(insertFn: InsertFnType) {
|
dialogVisible.value = true
|
InsertFnInfo.value = insertFn
|
},
|
// 自定义插入图片
|
customInsert(res: any, insertFn: InsertFnType) {
|
insertFn(res.data, 'image', res.data)
|
}
|
},
|
['uploadVideo']: {
|
customBrowseAndUpload(insertFn: InsertFnType1) {
|
dialogVisible.value = true
|
InsertFnInfo.value = insertFn
|
},
|
// 自定义插入图片
|
customInsert(res: any, insertFn: InsertFnType1) {
|
insertFn(res.data, res.data)
|
}
|
}
|
},
|
uploadImgShowBase64: true
|
},
|
props.editorConfig || {}
|
)
|
})
|
|
const editorStyle = computed(() => {
|
return {
|
height: isNumber(props.height) ? `${props.height}px` : props.height
|
}
|
})
|
|
// 回调函数
|
const handleChange = (editor: IDomEditor) => {
|
emit('change', editor)
|
}
|
|
// 组件销毁时，及时销毁编辑器
|
onBeforeUnmount(() => {
|
const editor = unref(editorRef.value)
|
|
// 销毁，并移除 editor
|
editor?.destroy()
|
})
|
|
const getEditorRef = async (): Promise<IDomEditor> => {
|
await nextTick()
|
return unref(editorRef.value) as IDomEditor
|
}
|
|
defineExpose({
|
getEditorRef
|
})
|
</script>
|
|
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
