<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来判断从第几张图片开始预览

我是开发编辑器的时候,遇到这个问题,需要点击图片,打开我自定义的图片编辑弹窗。
没有找到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来进行操作。
类似问题
https://developers.weixin.qq.com/community/develop/doc/000e2232864a109a8aed7a77f5c800?_at=1733737829070