jQuery - contenteditable - определить, стоит ли курсор до или после изображения

Мне нужно отлаживать API поставщика (Redactor wysiwyg), и у меня возник вопрос, можно ли определить, каретка стоит до или после изображения?

Когда изображение вставляется, оно приводит к следующей разметке:

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

Я пытаюсь сделать так, чтобы, если курсор находится перед изображением, и пользователь нажимает ввод, изображение (весь блок фигуры) перемещается вниз, чтобы пользователь мог добавить информацию над изображением, а если курсор находится после изображения, курсор пропускает figcaption (весь блок рисунка) и создает новый абзац после изображения, чтобы пользователь мог добавлять элементы после изображения.

Прямо сейчас, если курсор находится перед изображением, блок «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;
    }
    //-----

javascript jquery redactor
person Mike Purcell    schedule 23.02.2016    source источник
comment
Вы смотрели на это, чтобы определить позицию каретки? stackoverflow.com/questions/7745867/   -  person Rob M.    schedule 23.02.2016
comment
Судя по демонстрации Redactor, на самом деле это div с contenteditable=true. Так что это может помочь: stackoverflow.com/questions/4811822/   -  person Leventix    schedule 23.02.2016
comment
@РобМ. Я видел это во время предварительного гугления, но console.log($('.redactor-editor').prop('selectionStart')); не определено.   -  person Mike Purcell    schedule 23.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать document.getSelection().anchorOffset?

При тестировании с демонстрацией Redactor это значение равно 0, если карат стоит перед изображением, и 1, если он стоит после изображение (при условии, что карат находится внутри тега <image> в обоих случаях).

person rphv    schedule 23.02.2016
comment
Ты сделал это. Он действительно делает то, что вы описали. Я пытался использовать API-вызов this.selection.current().anchorOffset, но это не сработало, однако document.getSelection().anchorOffset сработало. Спасибо! - person Mike Purcell; 23.02.2016