图片回显后无法显示，图片格式回显错误的解决方案

[mafx1024]

版本信息：
"react": "^17.0.1",
"react-dom": "^17.0.1",
"braft-editor": "^2.3.9",

问题描述：
富文本中上传图片，给图片设置右浮动（左浮动、左中右对齐）之后，调用editor.toHTML()，把生成的html结构给后端，然后富文本编辑回显的时候，有几个问题

• 问题1：图片无法显示在富文本编辑器中；
  解决方案：处理从后端拿到的html结构，const formatValue = val.replace(/media-wrap/g, '')，然后const editorState = BraftEditor?.createEditorState?.(formatValue)，就可以正常显示了

• 问题2：正常显示之后，如果，给图片设置右浮动（左浮动、左中右对齐）之后，格式出现问题
  思路：�如果图片设置不同的格式，对应渲染到真实的DOM中会有不同的className和行内样式；在editor.toHTML()生成的结构中会与之对应；根据这个条件，给出解决方案。
  解决方案：
  先useState

const [imagesParentClassName, setImagesParentClassName] = useState<Array<string | null>>([])

首先解析返回html格式的，获取对应的className

/**
* params val : 服务端传回来的html结构
*/
function getClassNameOfImagesParent(val): Array<string | null> {
    const formatVal = val.replace(/\\"/, '"')  // 返回的数据格式对"转义了，所以要替换一下
    const div = document?.createElement('div')
    div.innerHTML = formatVal

    const ImageWrapperList = div.getElementsByClassName('media-wrap')

    const classNameList: Array<string | null> = []
    for (let i = 0; i < ImageWrapperList.length; i++) {
      ClassNameList.push(ImageWrapperList[i]?.getAttribute('class'))
    }

    return classNameList
  }

这个函数在什么时候调用

const styleList = getClassNameOfImagesParent(val) // 获取className
setImagesParentClassName(styleList)

const formatValue = val.replace(/media-wrap/g, '') // 处理图片无法显示

然后渲染到真实的HTML中

function setStyleOfImagesParent(imagesParentClassName): void {
    const bfImageList = document.getElementsByClassName('bf-image')
    imagesParentClassName.forEach((className, i) => {
      const beImageParentsParents = bfImageList[i]?.parentElement?.parentElement
     // 这里处理了五种情况分别是 左右浮动和左中右对齐
      if (className?.includes('float-left')) {
        beImageParentsParents?.setAttribute('class', `bff-left`)
        return
      }
      if (className?.includes('float-right')) {
        beImageParentsParents?.setAttribute('class', `bff-right`)
        return
      }

      if (className?.includes('algin-left')) {
        bfImageList[i]?.setAttribute('style', 'float: left;')
        return
      }

      if (className?.includes('algin-right')) {
        bfImageList[i]?.setAttribute('style', 'float: right;')
        return
      }

      if (className?.includes('align-center')) {
        bfImageList[i]?.setAttribute('style', 'text-align: center;')
        return
      }
    })
  }

应该什么时候调用

useEffect(() => {
    if (imagesParentClassName.length !== 0) {
      setStyleOfImagesParent(imagesParentClassName)
    }
}, [imagesParentClassName])

这个问题的根本原因是，在图片回显的时候，拿到对应的html结构，用BraftEditor?.createEditorState?.(val)处理之后，就有了问题；希望作者有时间可以解决下，我这种方案为临时处理方案；

======
还有一种方案不要给后端toHTML，可以换成toRaw试试，由于项目问题，无法实践。