<template>
|
<div class="app-wang-editor" v-loading="loading">
|
<Toolbar
|
class="toolbar"
|
:editor="editorRef"
|
:defaultConfig="toolbarConfig"
|
mode="default"
|
/>
|
<Editor
|
:style="`height: ${height}px;`"
|
class="editor"
|
v-model="htmlValue"
|
:defaultConfig="editorConfig"
|
mode="default"
|
@onCreated="handleCreated"
|
/>
|
<input type="file" accept="image/*" name="fileToUpload" id="fileId" @change="onFileChange" style="display:none;">
|
</div>
|
</template>
|
|
<script setup>
|
|
import '@wangeditor/editor/dist/css/style.css';
|
|
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
|
|
import * as api from '@/api';
|
import {useEntityStore} from "@/store/modules";
|
|
const props = defineProps({
|
complementHeight: {
|
type: Number,
|
default: 0
|
},
|
});
|
|
const loading = ref(false);
|
|
const height = computed(() => window.innerHeight - 332 - props.complementHeight);
|
|
const entityStore = useEntityStore();
|
|
/**
|
* 编辑器实例，必须用 shallowRef
|
* @type {ShallowRef<any>}
|
*/
|
const editorRef = shallowRef()
|
|
const htmlValue = ref('');
|
|
const toolbarConfig = {
|
excludeKeys: ['emotion', 'group-video']
|
}
|
|
let insertFn;
|
|
const editorConfig = {
|
MENU_CONF: {
|
uploadImage: {
|
/**
|
* 自定义选择图片
|
* @param _insertFn
|
*/
|
customBrowseAndUpload(_insertFn) {
|
insertFn = _insertFn;
|
document.getElementById("fileId").click();
|
}
|
}
|
},
|
placeholder: '请输入内容...'
|
};
|
|
const onFileChange = async ({target}) => {
|
loading.value = true;
|
const formData = new FormData();
|
formData.append('file', target.files[0]);
|
const ids = await api.file.uploadFile(formData);
|
const path = await api.file.downloadFile(ids[0]);
|
insertFn(path, target.files[0].name, path);
|
loading.value = false;
|
}
|
|
/**
|
* 组件销毁时，也及时销毁编辑器
|
*/
|
onBeforeUnmount(() => {
|
const editor = editorRef.value;
|
if (editor == null) return
|
editor.destroy();
|
});
|
|
const handleCreated = (editor) => {
|
editorRef.value = editor // 记录 editor 实例，重要！
|
}
|
|
const getValue = () => {
|
return htmlValue.value;
|
}
|
|
const init = ({value}) => {
|
htmlValue.value = value;
|
}
|
|
defineExpose({
|
/**
|
* 初始化
|
*/
|
init,
|
getValue
|
});
|
|
</script>
|
|
<style lang="scss">
|
.app-wang-editor {
|
border: 1px solid #ccc;
|
|
.toolbar {
|
border-bottom: 1px solid #ccc;
|
}
|
|
.editor {
|
overflow-y: hidden;
|
height: 500px;
|
}
|
}
|
</style>
|
