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 или тот же объект выделения, что и другие браузеры. Вы можете использовать Rangy (который вы упомянули) для поддержки IE. Просто замени window.getSelection() с rangy.getSelection(),

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