react如何使用ueditor
安装 UEditor
下载 UEditor 的官方版本，解压后将整个文件夹放入项目的 public 目录下。确保可以通过 URL 直接访问 UEditor 的资源文件，例如 public/ueditor。
引入 UEditor 脚本
在 React 项目的入口 HTML 文件（如 public/index.html）中，引入 UEditor 的核心脚本文件。通常在 <head> 或 <body> 底部添加以下代码：
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.min.js"></script>创建 React 组件封装 UEditor
创建一个 React 组件来封装 UEditor。在组件的 useEffect 钩子中初始化 UEditor，确保 DOM 已加载完成。
import React, { useEffect, useRef } from 'react';
const UEditorComponent = () => {
const editorRef = useRef(null);
const scriptLoaded = useRef(false);
useEffect(() => {
if (typeof window.UE !== 'undefined' && !scriptLoaded.current) {
const editor = window.UE.getEditor('editorContainer');
scriptLoaded.current = true;
return () => {
if (editor) editor.destroy();
};
}
}, []);
return <div id="editorContainer" ref={editorRef}></div>;
};
export default UEditorComponent;配置 UEditor 路径
在 public/ueditor/ueditor.config.js 中修改配置，确保资源路径正确。将 UEDITOR_HOME_URL 指向 UEditor 的根目录：
window.UEDITOR_CONFIG = {
UEDITOR_HOME_URL: '/ueditor/',
// 其他配置项...
};处理数据绑定
通过 React 的状态管理实现 UEditor 内容的双向绑定。在初始化编辑器后，监听内容变化并更新状态：
const [content, setContent] = useState('');
useEffect(() => {
if (typeof window.UE !== 'undefined') {
const editor = window.UE.getEditor('editorContainer');
editor.addListener('ready', () => {
editor.setContent(content);
});
editor.addListener('contentChange', () => {
setContent(editor.getContent());
});
}
}, [content]);服务端上传配置
如果需要上传功能，修改 ueditor.config.js 中的服务器接口地址。确保后端接口符合 UEditor 的格式要求：
window.UEDITOR_CONFIG = {
serverUrl: '/api/ueditor/upload', // 替换为实际的上传接口
};注意事项
- UEditor 并非专为 React 设计，直接使用可能导致内存泄漏。务必在组件卸载时调用
editor.destroy()清理实例。 - 避免重复初始化 UEditor，可通过
useRef标记是否已加载脚本。 - 生产环境中建议将 UEditor 资源部署到 CDN，减少主包体积。
