收藏
回答

editor组件设置只读,进行内容回显后,用户点击某一图片,怎么触发事件或者拿到该图片的一些信息?

<view class="container">
    <view style="height: calc(100vh);">
        <editor id="editor" class="ql-container" read-only="true" bindfocus="previewImage">
        </editor>
    </view>
</view>

js部分,从后端获取富文本的delta进行回显

onEditorReady() {
        var that = this
        wx.createSelectorQuery().select('#editor').context(function (res) {
            that.editorCtx = res.context
            var jsonData = that.data.menuBar.jsonData
            var context = JSON.parse(jsonData)
            that.editorCtx.setContents({
                delta: context
            })
        }).exec()
    },

我可以拿到delta里面的图片url数组,并通过wx.previewImage进行图片预览,但是无法根据下标index来判断从第几张图片开始预览

回答关注问题邀请回答
收藏

2 个回答

  • AndyQsmart
    AndyQsmart
    06-23

    我是开发编辑器的时候,遇到这个问题,需要点击图片,打开我自定义的图片编辑弹窗。

    没有找到Editor相关的图片点击事件,我用了下面这种方案实现了这个效果。

    1、给Editor外层加了一个view监听点击事件,得到e.detail.x和y,知道点击的位置在哪。

    2、目前EditorContext好像没有接口能直接获取某个坐标的元素是什么,我使用了EditorContext.getBounds来判断点击位置的元素是什么。不过需要先EditorContext.getContents获取delta,然后手动解析,目测好像所有数据都是在insert中(不确定除了insert是不是还有其他类型)。目测文本类型长度就是insert的长度,图片类型index长度就是+1。我for循环遍历EditorContext.getBounds({index: i,length: 1})得到的left、top、width、height来判断点击坐标是不是在范围内,这个接口获取的left、top是相对于屏幕的坐标,不需要进行额外的坐标转换(这里的for循环应该可以用二分法优化)。判断出的结果就用delta里面的image或者attributes来进行操作。

    06-23
    有用
    回复
  • 😄
    😄
    2024-12-09

    类似问题

    https://developers.weixin.qq.com/community/develop/doc/000e2232864a109a8aed7a77f5c800?_at=1733737829070

    2024-12-09
    有用
    回复 1
    • 😄
      😄
      2024-12-14
      有人遇到相同问题吗?还是无法解决
      2024-12-14
      回复
登录 后发表内容