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

[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试试，由于项目问题，无法实践。