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

jQuery - contenteditable - Determine if caret before or after an image

本文关键字：之后 插入 符号 contenteditable 图像 jQuery      更新时间：2023-09-26

我必须调试供应商 api（编校者所见即所得）并有一个问题，是否可以确定插入符号是在图像之前还是之后？

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

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

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

现在，如果插入符号在图像之前，则会在"图形"中插入一个"p"块，如果插入符号在图像之后，

则在图像之后插入一个"p"块，但在"figcaption"之前，这会导致火车失事，尤其是在移动设备上。

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

如果您偶然发现此问题并遇到相同的问题，此修补程序将起作用（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;
    }
    //-----

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

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

相关文章：