Skip to content

A
admin
提交 cb7e2f31 作者: 龚洪江
操作

功能：富文本修改

上级 f5fd56a9
正在显示 包含 106 行增加 和 83 行删除
env/.env.development
#请求接口地址 #请求接口地址
#VITE_REQUEST_BASE_URL='https://www.iuav.shop' VITE_REQUEST_BASE_URL='https://www.iuav.shop'
VITE_REQUEST_BASE_URL='https://test.iuav.shop' // 测试服 #测试服
#VITE_REQUEST_BASE_URL='https://test.iuav.shop'
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
#VITE_REQUEST_BASE_URL='/api' #VITE_REQUEST_BASE_URL='/api'
#旧版接口地址 #旧版接口地址
......
package.json
...@@ -16,6 +16,8 @@ ...@@ -16,6 +16,8 @@
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.0.1", "@ant-design/icons": "^5.0.1",
"@reduxjs/toolkit": "^1.9.2", "@reduxjs/toolkit": "^1.9.2",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-react": "^1.0.6",
"antd": "^5.4.2", "antd": "^5.4.2",
"axios": "^1.4.0", "axios": "^1.4.0",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
......
src/api/request.ts
...@@ -10,7 +10,7 @@ const { VITE_REQUEST_BASE_URL } = import.meta.env; ...@@ -10,7 +10,7 @@ const { VITE_REQUEST_BASE_URL } = import.meta.env;
export const uploadImgURL = `${VITE_REQUEST_BASE_URL}/pms/upload/imgOsses`; export const uploadImgURL = `${VITE_REQUEST_BASE_URL}/pms/upload/imgOsses`;
export const uploadVideoURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/videoOss`; export const uploadVideoURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/videoOss`;
export const uploadFileURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/oss`; export const uploadFileURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/oss`;
console.log('数据-->', VITE_REQUEST_BASE_URL);
// 创建服务 // 创建服务
const service = axios.create({ const service = axios.create({
baseURL: VITE_REQUEST_BASE_URL, baseURL: VITE_REQUEST_BASE_URL,
......
src/components/richText/index.tsx
import React, { useEffect } from 'react'; import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import E from 'wangeditor'; import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig, InsertFnType } from '@wangeditor/editor';
import { message } from 'antd'; import { message } from 'antd';
import { CommonAPI } from '~/api'; import { CommonAPI } from '~/api';
let editor: any = null;
interface PropsType { interface PropsType {
onChange?: (html?: string) => void; onChange?: (html?: string) => void;
value: string | undefined; value: string | undefined;
// eslint-disable-next-line react/require-default-props // eslint-disable-next-line react/require-default-props
isDetail?: boolean; isDetail?: boolean; //是否禁用
height?: number; height?: number;
imgSize?: number;
videoSize?: number;
} }
const RichText: React.FC<PropsType> = ({ onChange, value, isDetail, height }) => { const RichText: React.FC<PropsType> = ({
RichText.defaultProps = { onChange,
// eslint-disable-next-line @typescript-eslint/no-empty-function value,
onChange: () => {}, isDetail,
}; height,
useEffect(() => { imgSize,
// 注：class写法需要在componentDidMount 创建编辑器 videoSize,
editor = new E('.edit'); }) => {
editor.config.uploadImgShowBase64 = false; // editor 实例
editor.config.zIndex = 1; const [editor, setEditor] = useState<IDomEditor | null>(null);
editor.config.height = height ? height : 550;
editor.config.uploadImgMaxLength = 5; // 编辑器内容
editor.config.uploadImgMaxSize = 1024 * 1024 * 3; // 2M const [html, setHtml] = useState<string>('');
editor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
const formData = new FormData();
resultFiles.map(async (item: any) => {
formData.append('uploadFile', item);
});
const { code, result } = await CommonAPI.uploadOss(formData);
if (code === '200') {
insertImgFn(result.filePath);
message.success('上传成功');
} else {
message.error('上传失败');
}
};
editor.config.onchange = (newHtml: string) => {
if (newHtml) {
onChange?.(newHtml);
} else {
onChange?.(undefined);
}
};
// 需要展示的菜单 // 工具栏配置
editor.config.menus = [ const toolbarConfig: Partial<IToolbarConfig> = {};
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'table',
'splitLine',
'undo',
'redo',
'image',
];
/** 一定要创建 */ // 编辑器配置
editor.create(); const editorConfig: Partial<IEditorConfig> = {
// events.addListener('clearEdit', () => { // TS 语法
// editor.txt.html(''); placeholder: '请输入内容...',
// }); MENU_CONF: {
uploadImage: {
// 自定义上传
async customUpload(file: File, insertFn: InsertFnType) {
if (file.size / 1024 / 1024 > (imgSize || 5)) {
return message.warning(`上传文件大小最大${imgSize || 5}M`);
}
if (!file.type.includes('image/')) {
return message.warning('文件格式错误');
}
const formData = new FormData();
formData.append('uploadFile', file);
CommonAPI.uploadOss(formData).then(({ result }) => {
insertFn(result.filePath);
});
},
},
uploadVideo: {
// 自定义上传
async customUpload(file: File, insertFn: InsertFnType) {
if (file.size / 1024 / 1024 > (videoSize || 5)) {
return message.warning(`上传文件大小最大${videoSize || 5}M`);
}
if (!file.type.includes('video/')) {
return message.warning('文件格式错误');
}
const formData = new FormData();
formData.append('uploadFile', file);
CommonAPI.uploadOss(formData).then(({ result }) => {
insertFn(result.filePath);
});
},
},
},
};
//富文本修改
const richTextChange = (editor: IDomEditor) => {
setHtml(editor.getHtml());
if (onChange) {
onChange(editor.getHtml() || '');
}
};
// 及时销毁 editor ，重要！
useEffect(() => {
return () => { return () => {
// 组件销毁时销毁编辑器 注：class写法需要在componentWillUnmount中调用 if (editor == null) return;
editor.destroy(); editor.destroy();
setEditor(null);
}; };
}, [editor]);
// 这里一定要加上下面的这个注释
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => { useEffect(() => {
if (editor) { setHtml(value || '');
editor.txt.html(value || ''); }, [value]);
}
if (isDetail) { useEffect(() => {
if (editor && isDetail) {
editor.disable(); editor.disable();
} }
}, [value]); }, [isDetail]);
return <div className='edit' />; return (
<>
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode='default'
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={richTextChange}
mode='default'
style={{ height: height || 500 + 'px', overflowY: 'hidden' }}
/>
</div>
</>
);
}; };
export default RichText; export default RichText;
src/pages/resourceManage/industryNews/components/addOrEditNewsModal/index.tsx
...@@ -95,7 +95,7 @@ const AddOrEditNewsModal: FC<ModalProps & selfProps> = ({ ...@@ -95,7 +95,7 @@ const AddOrEditNewsModal: FC<ModalProps & selfProps> = ({
onCancel={addOrEditModalCancel} onCancel={addOrEditModalCancel}
onOk={addOrEditModalOk} onOk={addOrEditModalOk}
title={currentIndustryNews ? '编辑' : '新建'} title={currentIndustryNews ? '编辑' : '新建'}
width={800} width={1000}
> >
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} form={form}> <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} form={form}>
<Form.Item <Form.Item
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论