Добавить HTML в условно, но за пределами определенного элемента - PullRequest
Новая
       8

Добавить HTML в условно, но за пределами определенного элемента

0 голосов
/ 01 апреля 2020

Я работаю над создателем театральных пьес. Текстовая структура выглядит следующим образом:

ПЕРВАЯ ведьма. - Где ты был, сестра?

Третья ведьма, кричит - Третья ведьма. Сестра, где ты? 

<div id="page" contenteditable="true">
  (...)
  <div class="line">
    <span class="character"FIRST WITCH. </span>
    <span class="line">Where hast thou been, sister?</span>
  </div>
  <div class="line">
    <span class="character">THIRD WITCH, </span>
    <span class="stage_direction">shouting</span>
    <span class="line">Third Witch. Sister, where thou?</span>
  </div>
  (...)
</div>

Давайте представим, что я хочу добавить строку между ПЕРВОЙ ведьмой и ТРЕТЬЕЙ ведьмой, когда я нажимаю CTRL + ENTER. Он прекрасно работает, за исключением того, что обязательно, чтобы новый HTML код был вставлен вне тега <div class="line"></div>!

Мое мышление:

1 ° Определите, если мы внутри DIV с line class (easy)

2 ° Если мы, поместите carret после закрывающего тега этого DIV (моя проблема)

3 ° Добавить сюда содержание.

Это функция, которую я использую для добавления HTML: 

function pasteHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();

                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);

                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            document.selection.createRange().pasteHTML(html);
        }
    }

Код: https://github.com/ANN-MB/Format-my-Play Спасибо !!!!

...