liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7.13 富文本改造

Browse Source
This commit is contained in:
jl-zhoujl2
2022-07-13 10:04:01 +08:00
parent 26b7130352
commit 8276d04729
2 changed files with 57 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/richText/wang/index.tsx
View File

@ -1,8 +1,10 @@
import React, { useEffect, useImperativeHandle, useState } from 'react';
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import AlertMenu from './fullScreen'
import E from 'wangeditor';
import { Button, message, Spin } from 'antd';
import { pictureDisplayPath, uploadAttachmentPath } from '@/utils/DownloadUtils';
import { isEmpty } from '@/utils/CommonUtils';
import { createNewFileBid } from '@/services/download_';
interface WangType {
braftRef: any;//挂载
@ -10,7 +12,9 @@ interface WangType {
echo?: any;//回显内容
value?: any;
height?: number;
onChange?: (value: any) => void
onChange?: (value: any) => void;
useImage?: boolean;//使用图片上传
imageId?: string;//图片objectId
}
let editor: any = null;
@ -24,6 +28,8 @@ const BraftText: React.FC<WangType> = (props) => {
const [fullScreen, fullScreenSet] = useState(false);
//遮罩
const [loading, setLoading] = useState(false);
//imageId
const objectId = useRef<string | null | undefined>(null);
const {
braftRef,
echo,
@ -31,6 +37,8 @@ const BraftText: React.FC<WangType> = (props) => {
value,
height,
onChange,
useImage,
imageId,
} = props;
const tools = [//工具栏
@ -45,11 +53,11 @@ const BraftText: React.FC<WangType> = (props) => {
'indent', //缩进
'justify', //文字对齐方式
'list', //列表
'image',//图片
'undo', //撤销
'redo', //恢复
'fullscreen', //全屏
// 'image',//图片
// 'emoticon',//表情
// 'video',//视频
// 'table',//表格
@ -62,6 +70,8 @@ const BraftText: React.FC<WangType> = (props) => {
// 注：class写法需要在componentDidMount 创建编辑器
editor = new E("#div1");
//添加图片上传
useImage && tools.splice(-3, 0, 'image');
//工具栏
editor.config.menus = tools;
//提示
@ -88,28 +98,38 @@ const BraftText: React.FC<WangType> = (props) => {
//自定义name,接收的时候图片文件的那么用这个，对应的是参数中的MultipartFile upimg名称,这个名称即上传到浏览器的参数名称
editor.config.uploadFileName = "multipartFiles";//这个需要和后台商量上传图片的名称
//设置请求体额外参数
editor.config.uploadImgParams = {
appCode: 'ebtp-cloud-frontend',
objectId: '1546325338156965888',
};
if (useImage) {
if (isEmpty(imageId)) {
createNewFileBid().then(res => {//获取雪花id
editor.config.uploadImgParams = {
appCode: 'ebtp-cloud-frontend',
objectId: res?.id,
};
objectId.current = res?.id;
})
} else {
editor.config.uploadImgParams = {
appCode: 'ebtp-cloud-frontend',
objectId: imageId,
};
objectId.current = imageId;
}
}
// 将 timeout 时间改为 60s
editor.config.uploadImgTimeout = 60000;
// 将图片大小限制为 500k
editor.config.uploadImgMaxSize = 500 * 1024;
// 将图片大小限制为 600k
editor.config.uploadImgMaxSize = 600 * 1024;
// 限制一次最多上传 1 张图片
editor.config.uploadImgMaxLength = 1;
//上传图片的错误提示默认使用alert弹出,也可以自定义用户体验更好的提示方式
editor.config.customAlert = function (info: string) {
const repinfo = info.replace(/0.48828125M/g, '500K');
const repinfo = info.replace(/0.5859375M/g, '600K');
// info 是需要提示的内容
message.error(repinfo);
};
// 上传图片的结果反馈
editor.config.uploadImgHooks = {
before: function (xhr: any, editor: any, files: any) {
console.log('before xhr', xhr);
console.log('before files', files);
setLoading(true);
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
@ -118,6 +138,16 @@ const BraftText: React.FC<WangType> = (props) => {
// msg: '放弃上传'
// }
// console.log("before:",xhr)
if (isEmpty(objectId.current)) {
return {
prevent: true,
msg: '上传失败，原因：上传参数错误'
}
}
setLoading(true);
return {
prevent: false,
}
},
success: function (xhr: any, editor: any, result: any) {
// 图片上传并返回结果，图片插入成功之后触发
@ -143,7 +173,6 @@ const BraftText: React.FC<WangType> = (props) => {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，参数editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
console.log('customInsert result', result)
if (result?.success) {
const url = pictureDisplayPath + '?filePath=' + result.data[0].sysStorageVO.filePath;
insertImg(url);
@ -182,6 +211,7 @@ const BraftText: React.FC<WangType> = (props) => {
getHtml,
getHtml1,
makeDis,
getImageId,
}));
// 获取html方法1
@ -214,6 +244,11 @@ const BraftText: React.FC<WangType> = (props) => {
const triggerChange = (newHtml: any) => {
onChange?.(newHtml);
};
//获取富文本图片objectId
function getImageId() {
return objectId.current;
}
return (
<Spin spinning={loading} tip={"上传中……"}>
<div>

10
src/pages/MainPage/ProjectManager/components/WangEditor.tsx
View File

@ -7,6 +7,7 @@ import { isEmpty } from '@/utils/CommonUtils';
const Editor: React.FC<{}> = () => {
const braftRef = useRef<any>(null);
const [text, setText] = useState();
const [code, setCode] = useState();
const { Text, Paragraph } = Typography;
return (
<ProCard
@ -15,9 +16,14 @@ const Editor: React.FC<{}> = () => {
headerBordered
>
<ProCard title="文本域" colSpan="50%">
<BraftText braftRef={braftRef} echo={''} disabled={false} height={600} onChange={(value) => setText(value)} />
<BraftText braftRef={braftRef} echo={''} disabled={false} height={600} onChange={(value) => setText(value)} useImage />
</ProCard>
<ProCard title="代码段" colSpan="50%">
<ProCard title="代码段" colSpan="50%" extra={
<>
{code}
<Button type="primary" onClick={() => setCode(braftRef.current.getImageId())}>获取参数</Button>
</>
}>
{isEmpty(text) ? '没有' : (
<Paragraph>
<pre>