103 lines
3.0 KiB
Vue
103 lines
3.0 KiB
Vue
<template>
|
|
<div style="border: 1px solid #e4e4e4; height: 100%">
|
|
<Toolbar style="border-bottom: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4" :editor="editorRef"
|
|
:defaultConfig="toolbarConfig" mode="default" />
|
|
<Editor v-bind="$attrs" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated"
|
|
style="height: calc(100% - 42px)" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
import { getAccessToken, getTenantId } from '@/utils/auth'
|
|
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
import { useAdminInfo } from '@/stores/adminInfo'
|
|
import { Boot, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
|
|
import formulaModule from '@wangeditor/plugin-formula'
|
|
|
|
let isFormulaModuleLoaded = false;
|
|
// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
|
|
if (!isFormulaModuleLoaded) {
|
|
isFormulaModuleLoaded = true;
|
|
|
|
}
|
|
try {
|
|
Boot.registerModule(formulaModule)
|
|
} catch (error) {
|
|
|
|
}
|
|
|
|
// 编辑器实例，必须用 shallowRef
|
|
const editorRef = shallowRef()
|
|
|
|
const adminInfo = useAdminInfo()
|
|
// 内容 HTML
|
|
const valueHtml = ref('<p>hello</p>')
|
|
|
|
// 模拟 ajax 异步获取内容
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
|
|
}, 1500)
|
|
})
|
|
|
|
|
|
const toolbarConfig: Partial<IToolbarConfig> = {
|
|
// excludeKeys: ['fullScreen', 'emotion']
|
|
insertKeys: {
|
|
index: 0,
|
|
keys: [
|
|
'insertFormula', // “插入公式”菜单
|
|
// 'editFormula' // “编辑公式”菜单
|
|
],
|
|
},
|
|
}
|
|
let sever = '/api/system-boot/file/upload'
|
|
// 本地加api
|
|
// if (process.env.NODE_ENV === 'development') {
|
|
// sever = '/api' + sever
|
|
// }
|
|
type InsertFnType = (url: string, alt: string, href: string) => void
|
|
const editorConfig: Partial<IEditorConfig> = {
|
|
placeholder: '请输入内容...',
|
|
MENU_CONF: {
|
|
uploadImage: {
|
|
server: sever,
|
|
fieldName: 'file',
|
|
maxFileSize: 10 * 1024 * 1024,
|
|
compress: true,
|
|
uploadFileName: 'file',
|
|
withCredentials: true,
|
|
|
|
headers: {
|
|
Accept: '*',
|
|
Authorization: adminInfo.getToken(),
|
|
|
|
},
|
|
meta: { path: '/supervision/' },
|
|
timeout: 0,
|
|
customInsert(res: any, insertFn: InsertFnType) {
|
|
insertFn(res.data.url.split('?')[0], 'image', res.data.url.split('?')[0])
|
|
}
|
|
}
|
|
},
|
|
hoverbarKeys: {
|
|
formula: {
|
|
menuKeys: ['editFormula'], // “编辑公式”菜单
|
|
},
|
|
},
|
|
}
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value
|
|
if (editor == null) return
|
|
|
|
editor.destroy()
|
|
})
|
|
|
|
const handleCreated = editor => {
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
}
|
|
</script>
|