<!--
@ 作者: 秦东
@ 时间: 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>