jQuery - contenteditable - 确定插入符号是在图像之前还是之后

Posted 2023-05-07

【中文标题】jQuery - contenteditable - 确定插入符号是在图像之前还是之后

【英文标题】：jQuery - contenteditable - Determine if caret before or after an image

【发布时间】：2016-06-05 15:15:48

【问题描述】：

我不得不调试一个供应商 api (Redactor wysiwyg) 并且有一个问题，是否可以确定插入符号是在图像之前还是之后？

当插入图像时，会产生以下标记：

<figure>
    <img src='/ur/face.png' />
    <figcaption>Ur face</figcaption>
</figure>

我正在尝试使如果插入符号在图像之前，并且用户按下回车键，则图像（整个图形块）会向下移动，以便用户可以在图像上方添加信息，而不是插入符号在图像，插入符号跳过 figcaption（整个图形块）并在图像后创建一个新段落，以便用户可以在图像后添加内容。

现在，如果插入符号在图像之前，则在“图”中插入一个“p”块，如果插入符号在图像之后，则在图像之后但在“figcaption”之前插入一个“p”块，这会导致trainwreck，尤其是在移动设备上。

------更新------

如果您在同样的问题上偶然发现此问题，则此补丁将起作用 (v2.1.2.2)：

onEnter: function(e)

    ....

    //-----
    // !!!!! HACK !!!!!
    //-----
    /*
    // figure
    else if (this.keydown.figure)
    
        setTimeout($.proxy(function()
        
            this.keydown.replaceToParagraph('FIGURE');

        , this), 1);
    
    */

    else if (this.keydown.figure)
    
        var node = $(this.opts.emptyhtml);

        //  If after image (1), then we will insert after image
        if (1 === document.getSelection().anchorOffset) 

            $(this.keydown.figure).after(node);
        

        // If before image (0), lets insert before image so users can move images down
        else 

            $(this.keydown.figure).before(node);
        

        this.caret.start(node);

        return false;
    
    //-----

【问题讨论】：

你有没有看过这个来确定插入符号的位置？ ***.com/questions/7745867/…

基于 Redactor 的演示，它实际上是一个带有contenteditable=true 的 div。所以这可能会有所帮助：***.com/questions/4811822/…

@RobM。是的，我在初步谷歌搜索时看到了，但 console.log($('.redactor-editor').prop('selectionStart')); 未定义。

【参考方案1】：

你能用document.getSelection().anchorOffset吗？

在使用Redactor demo 进行测试时，如果克拉在图像之前，则此值为0，如果在图像之后，则为1（假设在这两种情况下克拉都在<image> 标签内）。

【讨论】：

你成功了。它确实按照您的描述进行。我尝试使用this.selection.current().anchorOffset 的api 调用但没有用，但是document.getSelection().anchorOffset 确实有效。谢谢！