74 lines
1.9 KiB
Vue
74 lines
1.9 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 { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
|
||
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||
|
|
// 编辑器实例，必须用 shallowRef
|
||
|
|
const editorRef = shallowRef()
|
||
|
|
|
||
|
|
// 内容 HTML
|
||
|
|
const valueHtml = ref('<p>hello</p>')
|
||
|
|
|
||
|
|
// 模拟 ajax 异步获取内容
|
||
|
|
onMounted(() => {
|
||
|
|
setTimeout(() => {
|
||
|
|
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
|
||
|
|
}, 1500)
|
||
|
|
})
|
||
|
|
|
||
|
|
const toolbarConfig = {
|
||
|
|
excludeKeys: ['fullScreen', 'emotion']
|
||
|
|
}
|
||
|
|
let sever = '/cs-harmonic-boot/csconfiguration/uploadImage'
|
||
|
|
// 本地加api
|
||
|
|
if (process.env.NODE_ENV === 'development') {
|
||
|
|
sever = '/api' + sever
|
||
|
|
}
|
||
|
|
const editorConfig = {
|
||
|
|
placeholder: '请输入内容...',
|
||
|
|
MENU_CONF: {
|
||
|
|
uploadImage: {
|
||
|
|
server: sever,
|
||
|
|
fieldName: 'file',
|
||
|
|
compress: true,
|
||
|
|
uploadFileName: 'file',
|
||
|
|
withCredentials: true,
|
||
|
|
headers: {},
|
||
|
|
timeout: 0,
|
||
|
|
customInsert: (insertImg, result, editor) => {
|
||
|
|
const url = result.data.url
|
||
|
|
insertImg(url)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 组件销毁时，也及时销毁编辑器
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
const editor = editorRef.value
|
||
|
|
if (editor == null) return
|
||
|
|
editor.destroy()
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleCreated = (editor) => {
|
||
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|