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

时间:2016-02-23 16:51:00

标签: javascript jquery redactor

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

插入图像时会产生此标记:

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

我试图这样做,如果插入符号在图像之前,并且用户按下回车键,则图像(整个图形块)向下移动,因此用户可以在图像上方添加信息,如果插入符号位于图片,插入符号跳过figcaption(整个图块)并在图像后面创建一个新段落,以便用户可以在图像后添加内容。

现在,如果插入符号是在图像之前,那么&#34; p&#34;块被插入&#34;图&#34;如果插入符号是在图像之后,那么&#34; p&#34;块在图像之后插入,但在&#34; figcaption&#34;之前插入,导致火车残骸,特别是在移动设备上。

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

如果您遇到同样的问题,可以使用此补丁(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;
    }
    //-----

1 个答案:

答案 0 :(得分:1)

您可以使用document.getSelection().anchorOffset吗?

在使用Redactor demo进行测试时,如果克拉位于图像之前,则此值为0;如果位于图像之后,则此值为1(假设克拉位于{{1}之内两种情况下都有标记)。