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

Question

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

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

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

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

2) Обнаружено положение каретки (проверка)

3) создать новый p (aragraph) после элемента каретки в (check)

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

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

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

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

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

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

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

Answer 1

Это можно сделать, создав объект 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 или тот же объект выделения, что и другие браузеры.Вы можете использовать <a href="http://code.google.com/p/rangy"> Rangy (который вы упомянули) для поддержки IE.Просто замените window.getSelection() на rangy.getSelection().

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