[react]在antd pro中对Ueditor富文本编辑器进行封装

概述

Ueditor富文本编辑器,一个可以拖拽式编辑图片大小的编辑器,嗯这样的看起来牛逼一点,当然重要的是要免费开源,当然他还有其他功能,但我就看重他这点。
文章项目使用的是Ant Design Pro v5的脚手架,一些配置也都是以此为基础。如果你使用的是umi4也可以参考,具体配置下面也有提到

做的那些准备工作

  1. 先从github克隆一波Ueditor的代码
    https://github.com/fex-team/ueditor.git.

  2. 全局安装grunt, 如果你没有安装过的话,然后执行 grunt default

    npm install grunt -g
    grunt default
    
  3. 完成上述步骤后得到一个 dist 文件,我把他重命名成 ueditor丢到我的项目中在这里插入图片描述
    我的项目

  4. 在项目入口的html文件(src\pages\document.ejs)中引入ueditor编辑器文件

<script type="text/javascript" src="<%= context.config.publicPath +'ueditor/ueditor.config.js'%>"></script>
<script type="text/javascript" src="<%= context.config.publicPath +'ueditor/ueditor.all.js'%>"></script>

在umi4中时可以这样配置:
在这里插入图片描述

封装组件

在这里插入图片描述

1. Ueditor.jsx 文件

// import FileModal from '@/components/Modal/FileModal';
// import { uploadFile } from '@/services/upload/upload';
import {
    message } from 'antd';
import {
    useEffect, useState } from 'react';
import {
    ueditorConfig } from './ueditorConfig';
declare const window: Window & {
    UE: any };
interface Props {
   
  initData?: any; //输入值
  setContent?: Function; //输入时触发
  config?: any; //UEditor配置
  ueditorId?: any;
}
/**
 * 富文本编辑器组件
 * @description 在百度富文本编辑器的基础上进行了一次封装
 * @author 千万样子
 */
const UEditor
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值