Contenteditable - извлечь текст от каретки до конца элемента

просмотрев все возможные вопросы и ответы, попробую так.

Я программирую RTE, но мне не удалось успешно извлечь текст в элементе, доступном для редактирования. Причина этого в том, что каждый браузер обрабатывает узлы и события нажатия клавиш (#13) немного по-разному (например, один создает «br», другой — «div», «p» и т. д.). все это согласуется, я пишу кросс-браузерный редактор, который убивает все действия по умолчанию с помощью e.preventDefault();

Следующий сценарий:

1) Пользователь нажимает клавишу #13 (проверить)

2) Обнаружена позиция каретки (проверьте)

3) создать новый p(argraph) после элемента, в котором находится каретка (проверить)

4) если текст (узел (ы)) между кареткой и концом элемента, извлеките его (? ? ?)

5) поместите текст (узел (ы)) во вновь созданный p (арграф) (проверьте)

Как вы понимаете, все работает, кроме пункта 4.

Похожая функциональность есть в известной библиотеке js rangy, где извлекается конкретный выбор.

Мне нужно следующее: получить и извлечь весь текст (конечно, с тегами, поэтому splitBoundaries) от курсора до конца элемента абзаца с возможностью редактирования (p, h1, h2, ...).

Любые подсказки, подсказки или фрагменты приветствуются! Заранее спасибо.

С уважением, п


javascript select extract contenteditable caret
person Javatheist    schedule 21.04.2011    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете сделать это, создав объект Range, охватывающий содержимое от курсора до конца содержащего его блочного элемента, и вызвав его метод extractContents():

function getBlockContainer(node) {
    while (node) {
        // Example block elements below, you may want to add more
        if (node.nodeType == 1 && /^(P|H[1-6]|DIV)$/i.test(node.nodeName)) {
            return node;
        }
        node = node.parentNode;
    }
}

function extractBlockContentsFromCaret() {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var selRange = sel.getRangeAt(0);
        var blockEl = getBlockContainer(selRange.endContainer);
        if (blockEl) {
            var range = selRange.cloneRange();
            range.selectNodeContents(blockEl);
            range.setStart(selRange.endContainer, selRange.endOffset);
            return range.extractContents();
        }
    }
}

Это не будет работать в IE ‹= 8, который не поддерживает Range или тот же объект выбора, что и другие браузеры. Вы можете использовать Rangy (о котором вы упомянули) для обеспечения поддержки IE. Просто замените window.getSelection() на rangy.getSelection().

jsFiddle: http://jsfiddle.net/LwXvk/3/

person Tim Down    schedule 21.04.2011
comment
Спасибо большое, вы человек! :) работает как шарм, круто! - person Javatheist; 21.04.2011