Froala-editor多个同时存在的bug

当使用自定义按钮的时候

    FroalaEditor.DefineIcon('uploadImg', {NAME: 'plus', SVG_KEY: 'imageCaption'});
    FroalaEditor.RegisterCommand('uploadImg', {
        title: '上传图片',
        focus: false,
        undo: false,
        refreshAfterCallback: false,
        callback: function () {
            inputImgRef.current.click();
            froalaEditorRef = this;
        }
    });

    const handleUploadImg = e => {
        setLoading(true);
        customImgUpload(e.target.files, froalaEditorRef).finally(() => {
            setLoading(false);
        });
    };

是有需求要支持批量上传图片，文件功能，但是Froala-editor自带的上传不支持批量，所以使用自定义按钮，在外部放一个隐藏的input来完成这个功能

所以就会需要自己DefineIcon和RegisterCommand，

现象：

当多个同时存在的时候会有个bug，
前提条件：组件有自己的loading，存在useState里面
点击第一个的时候，触发的是最后一个的callback，loading也会加在最后一个编辑器上，

原因：

FroalaEditor.DefineIcon, FroalaEditor.RegisterCommand重复被定义了多次，最后一次定义的会覆盖之前的配置，那么只要注册的name一样又同时存在的情况下，触发的callback是最后一个编辑器的callback

解决:

用useState存个guid(随机数)

    const [imgGuid] = useState(guid());
    const [fileGuid] = useState(guid());

image.png

这里给他加上
还有下面toolbar配置里面也记得改名

image.png

完成