概述
Ueditor富文本编辑器,一个可以拖拽式编辑图片大小的编辑器,嗯这样的看起来牛逼一点,当然重要的是要免费开源,当然他还有其他功能,但我就看重他这点。
文章项目使用的是Ant Design Pro v5的脚手架,一些配置也都是以此为基础。如果你使用的是umi4也可以参考,具体配置下面也有提到
做的那些准备工作
-
先从github克隆一波Ueditor的代码
https://github.com/fex-team/ueditor.git. -
全局安装grunt, 如果你没有安装过的话,然后执行 grunt default
npm install grunt -g grunt default -
完成上述步骤后得到一个 dist 文件,我把他重命名成 ueditor丢到我的项目中


-
在项目入口的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


最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



