import '@wangeditor/editor/dist/css/style.css' // 引入 css import React, { useState, useEffect } from 'react' import { Editor, Toolbar } from '@wangeditor/editor-for-react' import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor' import { UploadFile, GetFile } from "@/api" type InsertFnType = (url: string, poster: string) => void export default ({ html, onChange }: { html: string, onChange: (html: string) => void }) => { // editor 实例 const [editor, setEditor] = useState(null) // 工具栏配置 const toolbarConfig: Partial = {} // 自定义插入 const customInsert = (res: any, insertFn: InsertFnType) => { console.log('自定义插入:', res); // insertFn(url, alt, href) }; // 自定义上传 const customUpload = async (file: File, insertFn: InsertFnType) => { console.log('自定义上传:', file); const form = new FormData(); form.append('file', file); const res = await UploadFile(form); const fileId = res?.[0]?.id; insertFn(`/api/File/Download?fileId=${fileId}`, file.name); return; }; // 编辑器配置 const editorConfig: Partial = { placeholder: '请输入内容...', MENU_CONF: { uploadImage: { customUpload, customInsert }, uploadVideo: { customUpload, customInsert } } } // 及时销毁 editor useEffect(() => { return () => { if (editor == null) return editor.destroy() setEditor(null) } }, [editor]) return ( <>
onChange?.(editor.getHtml())} mode="default" style={{ height: '500px', overflowY: 'hidden' }} />
) }