react如何安装ueditor
安装 UEditor 到 React 项目
UEditor 是百度推出的富文本编辑器，但在 React 中直接使用需要额外配置。以下是具体步骤：
下载 UEditor 官方资源
从百度 UEditor 官网下载最新版本，解压后将整个 ueditor 文件夹放入 React 项目的 public 目录下。确保路径为 public/ueditor。
配置 UEditor 的 HTML 文件
在 public/index.html 中引入 UEditor 的配置文件与核心脚本：
<script type="text/javascript" src="%PUBLIC_URL%/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="%PUBLIC_URL%/ueditor/ueditor.all.min.js"></script>创建 React 组件封装 UEditor
新建一个组件文件（如 UEditor.js），动态加载 UEditor 并初始化：
import React, { useEffect, useRef } from 'react';
const UEditor = ({ id, config, onChange }) => {
const editorRef = useRef(null);
useEffect(() => {
// 确保全局 UE 对象存在
if (window.UE) {
const editor = window.UE.getEditor(id, config);
editor.addListener('ready', () => {
editorRef.current = editor;
});
editor.addListener('contentChange', () => {
onChange?.(editor.getContent());
});
}
return () => {
window.UE?.delEditor(id); // 组件卸载时销毁编辑器
};
}, [id, config]);
return <script id={id} type="text/plain"></script>;
};
export default UEditor;在项目中使用组件
在需要富文本编辑的页面中引入组件：
import UEditor from './UEditor';
const App = () => {
const handleChange = (content) => {
console.log('编辑器内容:', content);
};
return (
<UEditor
id="editor"
config={{ initialFrameHeight: 300 }}
onChange={handleChange}
/>
);
};解决跨域问题（开发环境）
若在开发时遇到跨域请求资源问题，需修改 ueditor.config.js 中的配置：
window.UEDITOR_HOME_URL = '/ueditor/'; // 指向 public 目录下的路径生产环境部署
构建项目后，确保 ueditor 文件夹随 public 目录一起部署到服务器。静态资源路径需与配置一致。
注意事项
- UEditor 依赖全局变量
window.UE，需确保脚本加载顺序。 - 编辑器样式文件（
themes/）需一并放入public/ueditor。 - 如需自定义插件或按钮，需修改 UEditor 原生代码并重新打包。
