背景

项目中使用的是ckeditor4实现的富文本编辑功能，ckeditor4保留html的样式，可以直接显示，实现代码如下

<div
      style={{ height: window.innerHeight - 150 }}
      className='ckeditor-show-con'
      dangerouslySetInnerHTML={{ __html: data }}
></div>

基于这种显示方式，可以将富文本的内容当做字符串处理

图片预览的实现

安装viewjs

npm i viewerjs

引入必要是样式

@import "~viewerjs/dist/viewer.css";

增加配置

实现思路为，将后端返回的是html的字符串的img标签统一增加一个类名view-imgw，可以通过document.querySelectorAll('.view-img')找到这些图片的dom队列，遍历并增加配置即可。

function Show({ data }) {
  const dataCopy = String(data).replaceAll('<img', '<img class="view-img"');
  useEffect(() => {
    const imgList = document.querySelectorAll('.view-img');
    imgList.forEach((imgItem) => {
      const viewer = new Viewer(imgItem, {
        // 0: 不显示 
        // 1：显示 
        // 2：width>768px 
        // 3: width>992px 
        // 4: width>1200px
        toolbar: {
          zoomIn: 4,
          zoomOut: 4,
          oneToOne: 4,
          reset: 4,
          prev: 4,
          play: {
            show: 4,
            size: 'large'
          },
          next: 4,
          rotateLeft: 4,
          rotateRight: 4,
          flipHorizontal: 41,
          flipVertical: 4
        },
        viewed() {
          viewer.zoomTo(1);
        }
      });
    });
  }, [data]);

  return (
    <div
      dangerouslySetInnerHTML={{ __html: dataCopy }}
    ></div>
  );
}