可编辑div 图片在谷歌浏览器里面如何能实现单击选中

Question

vue中 可编辑div 图片在谷歌浏览器里面如何能实现单击选中
火狐浏览器可以单击选中图片谷歌不能单击选中图片

Answer 1

用range对象选中图片，示例如下

<div id="app">
    <div contenteditable="true" style="border:solid 1px #ccc;height:200px;width:400px;outline:none" v-on:click="selectImg">
       aa <img src="https://avatar.csdnimg.cn/D/4/8/2_technologist_40_1621503911.jpg" />bb

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            selectImg(e) {
                var el = e.target
                if (el.tagName == 'IMG') {
                    var r = document.createRange();
                    var s = window.getSelection();
                    s.removeAllRanges();
                    r.selectNode(el);
                    s.addRange(r);
                }
            }
        }
    })

</script>