You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.7 KiB
145 lines
3.7 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-03-14 19:17:35
|
|
@ 备注:
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { newUploadFileApi } from '@/api/common/public'
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
import '@wangeditor/editor/dist/css/style.css';
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: string
|
|
placeholder?: string
|
|
width?: string
|
|
height?: string
|
|
blobUrl?: string
|
|
imgUrl?: string
|
|
config?: any
|
|
type?: number
|
|
}>(),
|
|
{
|
|
modelValue: '',
|
|
placeholder: '请输入内容',
|
|
width: '100%',
|
|
height: '300px',
|
|
blobUrl: '',
|
|
imgUrl: '',
|
|
type:1,
|
|
config: () => {
|
|
return {}
|
|
}
|
|
}
|
|
)
|
|
const emits = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
// const content = ref(props.modelValue);
|
|
|
|
const content = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(newVal: any) {
|
|
emits('update:modelValue', newVal)
|
|
}
|
|
})
|
|
// 编辑器实例，必须用 shallowRef
|
|
const editorRef = shallowRef();
|
|
|
|
// 内容 HTML
|
|
const valueHtml = ref('<p>hello <strong>hello world</strong></p>');
|
|
const toolbarConfig = {};
|
|
const editorConfig = ref({ placeholder: '请输入内容...', MENU_CONF: {} });
|
|
|
|
// 自定义图片上传
|
|
editorConfig.value.MENU_CONF['uploadImage'] = {
|
|
async customUpload(file, insertFn) {
|
|
console.log('上传图片', file,insertFn);
|
|
// 将上传的file图片转换为base64
|
|
const base64 = URL.createObjectURL(file);
|
|
|
|
|
|
const params = new FormData()
|
|
params.append('file', file)
|
|
params.append('type',"1")
|
|
newUploadFileApi(params)
|
|
.then(res =>{
|
|
console.log("上传图片--------->",res.data)
|
|
// resolve(res.data.url)
|
|
insertFn(res.data.url, 'img');
|
|
|
|
})
|
|
.catch(()=>{
|
|
ElMessage.error('上传出错，请查看你上传的文件是否符合要求！')
|
|
})
|
|
|
|
// 这里的file为上传的图片对象,insertFn传入
|
|
// insertFn(base64, 'img');
|
|
},
|
|
};
|
|
|
|
// 自定义视频上传
|
|
editorConfig.value.MENU_CONF['uploadVideo'] = {
|
|
async customUpload(file, insertFn) {
|
|
console.log('上传视频', file);
|
|
const params = new FormData()
|
|
params.append('file', file)
|
|
params.append('type',"2")
|
|
newUploadFileApi(params)
|
|
.then(res =>{
|
|
console.log("上传图片--------->",res.data)
|
|
// resolve(res.data.url)
|
|
insertFn(res.data.url, 'video');
|
|
|
|
})
|
|
.catch(()=>{
|
|
ElMessage.error('上传出错，请查看你上传的文件是否符合要求！')
|
|
})
|
|
},
|
|
};
|
|
|
|
// 富文本编辑器生成后触发
|
|
const handleCreated = editor => {
|
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
|
console.log(editorConfig.value.MENU_CONF, 'editorConfig.value');
|
|
};
|
|
|
|
// 监听富文本编辑器粘贴行为
|
|
const customPaste = (editor, event, callback) => {
|
|
// 获取粘贴的纯文本
|
|
const text = event.clipboardData.getData('text/plain');
|
|
if (text) {
|
|
editor.insertText(text);
|
|
event.preventDefault();
|
|
callback(false);
|
|
}
|
|
};
|
|
|
|
// 获取富文本html内容
|
|
const getEditorHTML = () => {
|
|
console.log(editorRef.value.getHtml());
|
|
};
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
editor.destroy();
|
|
});
|
|
</script>
|
|
<template><div class="butBox" >按钮</div>
|
|
<div style="border: 1px solid #ccc; width: 100%; margin: 20px auto">
|
|
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
|
|
<Editor style="height: 600px; overflow-y: hidden" v-model="content" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @customPaste="customPaste" />
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.butBox{
|
|
width:150px;
|
|
height: 50px;
|
|
background-color: #FB041A;
|
|
display:none;
|
|
}
|
|
</style>
|