当前位置：首页 > React

ueditor如何嵌到react里

2026-01-25 13:16:24React

安装 UEditor 依赖

在项目中安装 UEditor 的官方版本或社区维护的 React 封装库（如 react-ueditor）。通过 npm 或 yarn 安装：

npm install ueditor --save
# 或使用社区封装库
npm install react-ueditor --save

引入 UEditor 资源文件

将 UEditor 的静态资源（如 ueditor.config.js、ueditor.all.min.js）复制到项目的 public 目录下，或通过 CDN 引入。在 public/index.html 中添加：

ueditor如何嵌到react里

<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.min.js"></script>

创建 React 组件封装

新建一个 React 组件（如 UEditorComponent.js），初始化 UEditor 实例并处理生命周期：

ueditor如何嵌到react里

import React, { useEffect, useRef } from 'react';

const UEditorComponent = ({ id, config, onChange }) => {
  const editorRef = useRef(null);

  useEffect(() => {
    // 动态加载 UEditor 脚本
    const script = document.createElement('script');
    script.src = '/ueditor/ueditor.all.min.js';
    script.onload = () => {
      editorRef.current = window.UE.getEditor(id, config);
      editorRef.current.addListener('contentChange', () => {
        onChange && onChange(editorRef.current.getContent());
      });
    };
    document.body.appendChild(script);

    return () => {
      if (editorRef.current) {
        editorRef.current.destroy();
      }
      document.body.removeChild(script);
    };
  }, [id, config, onChange]);

  return <div id={id} style={{ width: '100%', minHeight: '300px' }} />;
};

export default UEditorComponent;

使用组件并配置

在父组件中调用 UEditorComponent，传递配置参数和回调函数：

import React, { useState } from 'react';
import UEditorComponent from './UEditorComponent';

const App = () => {
  const [content, setContent] = useState('');

  const config = {
    autoHeightEnabled: false,
    initialFrameHeight: 500,
    serverUrl: '/api/ueditor/upload', // 后端上传接口
  };

  return (
    <div>
      <UEditorComponent id="editor" config={config} onChange={setContent} />
      <div>当前内容：{content}</div>
    </div>
  );
};

export default App;

处理上传接口

配置后端接口处理文件上传（如 Node.js 示例）：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/ueditor/upload', upload.single('upfile'), (req, res) => {
  res.json({
    state: 'SUCCESS',
    url: `/uploads/${req.file.filename}`,
    title: req.file.originalname,
    original: req.file.originalname,
  });
});

app.listen(3001);