Skip to content

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

功能：富文本修改

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