需求：能不能直接粘贴图片到文本框中

某天上班，同事问我能不能把文本框改成可以粘贴图片到里面的。

思考了一下，这不就是需要一个富文本框吗，开始改造。

使用了富文本WangEditor（www.wangeditor.com/ ）一个配置简单开箱即用的富文本插件。

//导入
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';

type InsertFnType = (url: string, alt: string, href: string) => void;
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  excludeKeys: ['codeBlock', 'group-video', 'bulletedList', 'numberedList', 'emotion'],
}; // TS 语法

函数组件内

  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  const [html, setHtml] = useState('');
  
    // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    placeholder: '请输入内容...',
    onCreated(editorCase: IDomEditor) {
      setEditor(editorCase);
    }, // 记录下 editor 实例
    MENU_CONF: {
      uploadImage: {
        //这里是上传图片的接口
        server: `${API_URL}/api-file/files-anon`,
        fieldName: 'file',
        headers: {
          Authorization: `${getLocalStore('token').token_type} ${
            getLocalStore('token').access_token
          }`,
        },
        timeout: 0,
        customInsert: (res: any, insertFn: InsertFnType) => {
          // res 即服务端的返回结果
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(res.datas.url, res.datas.name, res.datas.url);
        },
      },

      // 继续写其他配置...

      //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
    },
  };
  
  //然后可以用editor?.getHtml()获取富文本的内容 用 editor.setHtml('')设置富文本内容

return中的组件内容

  <ProFormDependency name={['operationType']}>
              {({ operationType }) => {
                if (operationType == 1) {
                  return (
                        <div
                          style={{
                            border: '1px solid #ccc',
                            zIndex: 100,
                            height: 400,
                          }}
                        >
                          <Toolbar
                            editor={editor}
                            defaultConfig={toolbarConfig}
                            mode="default"
                            style={{ borderBottom: '1px solid #ccc' }}
                          />
                          <Editor
                            defaultConfig={editorConfig}
                            value={html}
                            onCreated={setEditor}
                            onChange={(_editor) => {
                              // setSaved(false);
                              setHtml(_editor.getHtml());
                            }}
                            mode="default"
                            style={{ height: '300px', overflowY: 'hidden' }}
                          />
                        </div>
                    </ProForm.Item>
                  );
                }
                return <ProFormTextArea label="操作说明" name="comment" rules={[dynamicRules]} />;
              }}
            </ProFormDependency>

我们获取到的富文本内容是一串字符串，内容是html，输入这样的内容

111111122222233333

www

得到的字符串是

所以拿到字符串可以用dangerouslySetInnerHTML展示出来。不过展示原图可能太大，可以加一个maxWidth为100%的样式，然后点击图片预览，可以给顶层div加一个onclick监听事件，判断点击的node是不是img类型，如果是的话，就打开图片预览。

//点击事件：
  const htmlClickIMG = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const target = e.target as HTMLImageElement;
    if (target.nodeName === 'IMG') {
      setPreviewImage(target.currentSrc);
      setPreviewTitle(target.alt);
      setTimeout(() => {
        setPreviewVisible(true);
      }, 0);
    }
  };
  
  //reactnode
 <Descriptions.Item label="操作说明">
     {item.activityId === 'response' ? (
         <div
            onClick={htmlClickIMG}
            dangerouslySetInnerHTML={{
               __html: item.message || '',
            }}
            className={styles.imgHtml}
         />
      ) : (
        <> {item.message}</>
      )}
</Descriptions.Item>

拿到富文本里的图片的src，引入antd的Image预览图片

    <Image
        width={600}
        style={{ display: 'none' }}
        alt={previewTitle}
        src={previewImage}
        preview={{
          visible: previewVisible,
          onVisibleChange: (value) => {
            setPreviewVisible(value);
          },
        }}
      />

总之，使用富文本，富文本内上传图片，预览富文本中的Img图片，只要合理使用WangEditor组件库和Image都能简单的完成。后续应该会把组件再封装一层，复用起来更方便。