react-app中引入UEditor富文本编辑器

最新推荐文章于 2025-07-03 00:15:00 发布

人间草木96

最新推荐文章于 2025-07-03 00:15:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人总结 react

本文链接：https://blog.youkuaiyun.com/qq_43258252/article/details/87859547

本文介绍了如何在React应用中集成UEditor富文本编辑器，包括将资源放入public目录，封装UEditor组件以及在index.html中引入编辑器，并在需要的地方使用组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react中引入ueditor

1.放入静态资源并配置

首先把官网下载的Ueditor资源，放入public文件夹中。(你的U盘里有，不用下载了)

2.封装一个组件 UEditor.js ，放到src/pages/components/里

/**
 * @module 百度富文本编辑器
 * 自定义菜单配置
 */
import React, { Component } from 'react'
let editor = null

class UEditor extends Component {

  componentDidMount () {
    this.setConfig()
  }

  componentWillUnmount () {
    editor.destroy()
  }

  // 初始化编辑器
  setConfig () {
    editor = window.UE.getEditor('editor', {
      toolbars: [
        [
          'source', // 源代码
          // 'anchor', // 锚点
          'undo', // 撤销
          'redo', // 重做
          'bold', // 加粗
          'indent', // 首行缩进
          // 'snapscreen', // 截图
          'italic', // 斜体
          'underline', // 下划线
          'strikethrough', // 删除线
          'sub