能提供 api 来支持富文本 img 标签放大

[ycjcl868]

[Caldis]

可以大概描述下你想要的调用方式

[ycjcl868]

imgs.forEach(img => {
  ZImage(img, {
    ...config,
  });
})

或者

ZImage({
  container: '#container',
  ...config
})

[Caldis]

确实是会有这种使用场景, 渲染完富文本元素之后再调用 API 来统一处理图片 如果能提供一个你常用的富文本组件的 DEMO 作为一个范例, 或许会对后续的开发有帮助

感谢反馈

[ycjcl868]

不用富文本组件范例，直接用 dangerouslySetInnerHTML 展示富文本，看怎样将 img 里的 dom 元素，具备 zmage 的能力。

function createMarkup() {
  return {__html: '<img src="xxx" />'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

[wunayou]

通过事件冒泡的原理 得到点击元素，不是图片不处理

然后替换掉ZIAmge的图片DOM，使用点击元素的DOM

  getSrc = e => {
    // 阻止事件冒泡
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    if (e.target.tagName.toLowerCase() === 'img') {
      this.target = e.target;
      const src = this.target.getAttribute('src');
      this.setState({
        src,
      }, () => {
        this.zimageRef.cover.style.display="none";
        this.zimageRef.inBrowsing();
      });
    }
  }

{src && <ZImage src={src} ref={ref => this.zimageRef = ref} cover={this.target || ''} />}

 <Wrapper
                                    // 内部
                                    cover={this.props.cover||this.cover}
                                    remove={this.unBrowsing}
                                    // 基础数据
                                    alt={alt}
                                    txt={txt}
                                    set={this.buildSet(set)}
                                    defaultPage={defaultPage}
                                    // 功能控制
                                    controller={{ ...defPropWithEnv.controller, ...controller }}
                                    hotKey={{ ...defPropWithEnv.hotKey, ...hotKey }}
                                    // 界面样式
                                    backdrop={backdrop}
                                    radius={radius || defPropWithEnv.radius}
                                    edge={edge || defPropWithEnv.edge}
                                    // 生命周期
                                    onZooming={onZooming}
                                    onSwitching={onSwitching}
                                    onRotating={onRotating}
/>

[ycjcl868]

@wunayou code format please

[Caldis]

@ycjcl868 @wunayou 大概是这么个理, 早期版本其实做了个类似的 API 不过不太实用被我干掉了 我想想这块怎么搞能比较方便