119 lines
3.2 KiB
Vue
119 lines
3.2 KiB
Vue
<template>
|
|
<div style="border: 1px solid #ccc">
|
|
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
|
|
<Editor
|
|
style="height: 500px; overflow-y: hidden"
|
|
v-model="valueHtml"
|
|
:defaultConfig="editorConfig"
|
|
:mode="mode"
|
|
@onCreated="handleCreated"
|
|
@onChange="handleChange"
|
|
@onDestroyed="handleDestroyed"
|
|
@onFocus="handleFocus"
|
|
@onBlur="handleBlur"
|
|
@customAlert="customAlert"
|
|
@customPaste="customPaste"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
|
|
|
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
import { upload } from '@/api/common/index';
|
|
|
|
const props = defineProps({
|
|
html: {
|
|
required: true,
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
// 编辑器实例，必须用 shallowRef
|
|
const editorRef = shallowRef();
|
|
|
|
// 内容 HTML
|
|
const valueHtml = ref('');
|
|
const mode = ref('default');
|
|
|
|
watch(
|
|
() => props.html,
|
|
(val) => {
|
|
valueHtml.value = val;
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
);
|
|
// 模拟 ajax 异步获取内容
|
|
onMounted(() => {});
|
|
|
|
const toolbarConfig = {
|
|
excludeKeys: ['insertLink', 'viewImageLink', 'insertVideo', 'uploadVideo', 'emotion', 'fullScreen', 'codeBlock', 'todo'],
|
|
};
|
|
const editorConfig = {
|
|
placeholder: '请输入内容...',
|
|
MENU_CONF: {
|
|
uploadImage: {
|
|
async customUpload(file, insertFn) {
|
|
const formData = new FormData(); // 组建formData参数
|
|
formData.append('file', file); // 将图片文件添加formData参数中
|
|
upload(formData)
|
|
.then((ret) => {
|
|
insertFn(ret.data.src, ret.data.src, '');
|
|
})
|
|
.catch(() => {
|
|
target.value = '';
|
|
});
|
|
},
|
|
},
|
|
},
|
|
};
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
editor.destroy();
|
|
});
|
|
const handleCreated = (editor) => {
|
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
|
};
|
|
const emits = defineEmits();
|
|
const handleChange = (editor) => {
|
|
emits('update:html', valueHtml.value);
|
|
};
|
|
const handleFocus = (editor) => {
|
|
// };
|
|
const handleBlur = (editor) => {
|
|
// // };
|
|
const customAlert = (info, type) => {
|
|
// alert(`【自定义提示】${type} - ${info}`);
|
|
};
|
|
const customPaste = (editor, event, callback) => {
|
|
const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
|
|
editor.dangerouslyInsertHtml(html); // 显示编译后的html
|
|
event.preventDefault();
|
|
callback(false);
|
|
};
|
|
|
|
const handleDestroyed = (editor) => {
|
|
// };
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
editor.destroy();
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.w-e-modal button {
|
|
line-height: 30px !important;
|
|
}
|
|
.group-video {
|
|
display: none !important;
|
|
}
|
|
</style>
|