React封装UEditor富文本编辑器的实现步骤

import React, { useEffect, useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
 
// 核心状态管理（非响应式状态用useRef避免重渲染）
const UEditor = forwardRef((props, ref) => {
    const editorContainer = useRef<HTMLDivElement>(null); // 编辑器容器
    const ueInstance = useRef<any>(null); // UEditor实例
    const isPlaceholderActive = useRef(false); // 占位符状态
    const isUploading = useRef(false); // 上传状态标记
    
    // 解构核心props（仅保留通用配置）
    const {
        value = '',
        onChange,
        style,
        placeholder = '请输入内容...',
        onBlur
    } = props;
 
    // 对外暴露核心方法（关键：让父组件能操作编辑器）
    useImperativeHandle(ref, () => ({
        getContent: () => {
            const content = ueInstance.current?.getContent() || '';
            return isPlaceholderActive.current ? '' : content;
        },
        setContent: (content: string) => {
            // 内容设置逻辑（后文详解）
        },
        forceImageFixedSize: () => {
            // 图片尺寸修正逻辑（后文详解）
        }
    }));
});

// 动态加载UEditor脚本（核心：按需加载，避免重复加载）
const loadScript = useCallback((src: string) => {
    return new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) return resolve(true);
        
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(true);
        script.onerror = () => reject(new Error(`加载失败: ${src}`));
        document.body.appendChild(script);
    });
}, []);
 
// 安全销毁编辑器（关键：卸载时彻底清理）
const safeDestroyEditor = useCallback(() => {
    if (!ueInstance.current) return;
    
    try {
        // 移除所有事件监听器
        const listeners = ['contentChange', 'blur', 'afterUpload'];
        listeners.forEach(event => {
            ueInstance.current.removeAllListeners?.(event);
        });
        // 从UEditor全局实例中移除
        window.UE?.delEditor(ueInstance.current.key);
        ueInstance.current = null;
    } catch (error) {
        console.warn('UEditor销毁失败:', error);
    }
}, []);
 
// 生命周期绑定（核心：组件挂载初始化，卸载销毁）
useEffect(() => {
    // 初始化逻辑（后文详解）
    initEditor();
    return () => safeDestroyEditor();
}, [initEditor, safeDestroyEditor]);

// 图片尺寸统一修正（核心：清除原生样式，应用响应式规则）
const safeImageSizeFix = useCallback((force = false) => {
    if (!ueInstance.current) return;
    
    try {
        const doc = ueInstance.current.document || document;
        const imgElements = doc.body.querySelectorAll('img');
        
        imgElements.forEach((img: HTMLImageElement) => {
            // 清除UEditor原生添加的宽高样式/属性
            img.style.width = '';
            img.style.height = '';
            img.removeAttribute('width');
            img.removeAttribute('height');
            
            // 应用统一的响应式样式
            img.style.maxWidth = '100%';
            img.style.height = 'auto';
        });
    } catch (error) {
        console.warn('图片尺寸修正失败:', error);
    }
}, []);
 
// 监听图片插入事件（核心：插入/上传后自动修正）
const setupImageHandlers = useCallback(() => {
    if (!ueInstance.current) return;
    
    // 图片插入/上传后触发修正
    ueInstance.current.addListener('afterInsertImage', () => {
        setTimeout(() => safeImageSizeFix(true), 100);
    });
    
    // 覆盖原生插入方法，确保样式生效
    const originalInsertImage = ueInstance.current.insertImage;
    ueInstance.current.insertImage = function (...args) {
        const result = originalInsertImage.call(this, ...args);
        setTimeout(() => safeImageSizeFix(true), 50);
        return result;
    };
}, [safeImageSizeFix]);

// 设置占位符（核心：自定义样式，标记占位状态）
const setPlaceholderText = useCallback(() => {
    if (!ueInstance.current) return;
    const placeholderHtml = `<p style="color: #999; font-style: italic;">${placeholder}</p>`;
    ueInstance.current.setContent(placeholderHtml);
    isPlaceholderActive.current = true;
    onChange?.('');
}, [placeholder, onChange]);
 
// 上传前激活编辑器（关键：避免占位符干扰上传）
const activateEditorForUpload = useCallback(() => {
    if (!ueInstance.current || !isPlaceholderActive.current) return;
    
    // 清除占位符，插入零宽空格（有内容但不显示）
    ueInstance.current.setContent('<p>&#8203;</p>');
    isPlaceholderActive.current = false;
    isUploading.current = true;
    
    // 超时重置上传状态（安全措施）
    setTimeout(() => {
        isUploading.current = false;
    }, 3000);
}, [placeholder]);
 
// 焦点/失焦处理（核心：区分上传状态，避免冲突）
const setupPlaceholderHandlers = useCallback(() => {
    if (!ueInstance.current) return;
    
    // 聚焦时清除占位符（非上传场景）
    ueInstance.current.addListener('focus', () => {
        if (!isUploading.current && isPlaceholderActive.current) {
            ueInstance.current.setContent('');
            isPlaceholderActive.current = false;
        }
    });
    
    // 失焦时显示占位符（非上传场景）
    ueInstance.current.addListener('blur', () => {
        if (isUploading.current) return;
        
        const content = ueInstance.current.getContent();
        if (!content || content === '<p><br></p>') {
            setPlaceholderText();
        }
        onBlur?.();
    });
}, [setPlaceholderText, onBlur]);

// 初始化编辑器（核心：内容初始化+事件监听）
const initEditor = useCallback(async () => {
    if (!editorContainer.current) return;
    
    // 加载UEditor核心脚本（ueditor.config.js/ueditor.all.min.js等）
    await loadScript('/UEditor/ueditor.config.js');
    await loadScript('/UEditor/ueditor.all.min.js');
    
    // 创建UEditor实例
    ueInstance.current = window.UE.getEditor(editorContainer.current.id, {
        initialFrameHeight: 240,
        autoHeightEnabled: false,
        enableAutoSave: false // 禁用自动保存，避免与React状态冲突
    });
    
    // 编辑器就绪后初始化内容和事件
    ueInstance.current.addListener('ready', () => {
        // 初始化内容：有值则设置，无值则显示占位符
        if (value) {
            ueInstance.current.setContent(value);
        } else {
            setPlaceholderText();
        }
        
        // 监听内容变化，同步到React状态
        ueInstance.current.addListener('contentChange', () => {
            if (isPlaceholderActive.current || isUploading.current) return;
            
            const content = ueInstance.current.getContent();
            onChange?.(content);
        });
        
        // 初始化图片处理、占位符、上传等逻辑
        setupImageHandlers();
        setupPlaceholderHandlers();
    });
}, [loadScript, value, onChange, setPlaceholderText]);
 
// 监听外部value变化（核心：同步父组件状态到编辑器）
useEffect(() => {
    if (!ueInstance.current?.isReady) return;
    
    const currentContent = ueInstance.current.getContent();
    if (value !== currentContent && !isPlaceholderActive.current) {
        ueInstance.current.setContent(value);
        // 内容变化后修正图片尺寸
        setTimeout(() => safeImageSizeFix(true), 50);
    }
}, [value, safeImageSizeFix]);