1. wangeditor
1.1. 在react
中如何使用呢?
1.1.1. 下载依赖
@wangeditor/editor-for-react
、@wangeditor/editor
1.1.2. 导入数据
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
// 导入样式
import '@wangeditor/editor/dist/css/style.css';
const App:FC = () => {
const [editor, setEditor] = useState<IDomEditor | null>(null);
const toolbarConfig: Partial<IToolbarConfig> = {};
const editorConfig: Partial<IEditorConfig> = {};
useEffect(() => {
return () => {
if (editor == null) return;
editor.destroy();
setEditor(null);
};
}, [editor, lang]);
useEffect(() => {
if (editor) {
editor.setHtml(value ?? '');
}
}, [editor]);
return <>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={value}
onCreated={setEditor}
onChange={(editor) => onChange && onChange(editor.getHtml())}
mode="default"
style={{ height: '100%', minHeight: '320px', overflowY: 'hidden' }}
/>
</>
}
1.2. 如何自定义上传图片 / 视频
修改editorConfig
const editorConfig: Partial<IEditorConfig> = {
MENU_CONF: {
// 自定义上传图片
uploadImage: {
async customUpload(file: File, insertFn: InsertFnType) {
const uploadedFile = await upload(file);
const fileId = uploadedFile?.id ?? '';
insertFn(getFileUrl(fileId) ?? '', 'product-detail', getFileUrl(fileId) ?? '');
},
},
// 自定义上传视频
uploadVideo: {
async customUpload(file: File, insertFn: InsertFnType) {
const uploadedFile = await upload(file);
const fileId = uploadedFile?.id ?? '';
insertFn(getFileUrl(fileId) ?? '', 'product-detail', getFileUrl(fileId) ?? '');
},
},
},
};
1.3. 如何在上传图片时添加loading
修改editorConfig
中的MENU_CONF
的uploadImage
const [loading, setLoading] = useState<boolean>(false);
const editorConfig: Partial<IEditorConfig> = {
MENU_CONF: {
uploadImage: {
async customUpload(file: File, insertFn: InsertFnType) {
setLoading(true); // 设置 loading
const uploadedFile = await upload(file);
const fileId = uploadedFile?.id ?? '';
insertFn(getFileUrl(fileId) ?? '', 'product-detail', getFileUrl(fileId) ?? '');
setLoading(false); // 取消 loading
},
},
},
};
// 样式自己调整就好啦
{loading && (
<div
style={{
height: '100%',
width: '100%',
background: 'rgba(0, 0, 0, 0.1)',
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
zIndex: 2,
}}
>
<Spin
style={{ position: 'absolute', transform: 'translate(-50%, -50%)', top: '50%', left: '50%' }}
/>
</div>
)}
1.4. 如何使用多语言
import { i18nChangeLanguage } from '@wangeditor/editor';
useEffect(() => {
if (lang === UserLangEnum.ZH || lang === UserLangEnum.TR) {
i18nChangeLanguage('zh-CN');
} else {
i18nChangeLanguage('en');
}
// ...添加其他逻辑
}, [editor, lang]);