REACT怎么使用 WangEditor

32 阅读1分钟

1. wangeditor

官网:www.wangeditor.com/

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_CONFuploadImage

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]);