Динамический contenteditable сценарий сбой в Firefox (но работает на Chrome) - PullRequest
Новая
       10

Динамический contenteditable сценарий сбой в Firefox (но работает на Chrome)

1 голос
/ 09 ноября 2019

Я пытаюсь эмулировать многостраничный редактор, используя динамическое клонирование contenteditable div. На Chrome он работает очень гладко, но в Firefox происходит сбой:

https://jsitor.com/OlL1u2Nim

Я не смог отладить даже то, что происходит в Firefox. Что я могу сделать, чтобы это исправить?

Заранее спасибо!

1 Ответ

1 голос
/ 12 ноября 2019

Я попробовал пример на Firefox, и он потерпел крах, когда достиг новой страницы. Причина этого в том, что pages HTMLCollection манипулирует внутри цикла for. Это похоже на эту проблему.

Как подсказывает this , вы можете избежать этой проблемы, если вместо этого будете использовать обратную итерацию. Однако лучшее решение - вообще не использовать итерацию. Вы можете динамически присоединить прослушиватель событий при создании новой страницы и получить доступ ко всем элементам этой страницы.

Кроме того, в вашем примере новые строки отображались по-разному в Chrome и Firefox. Chrome добавил новый <div> для каждой строки, Firefox использовал <br>. Изменение DefaultParagraphSeparator на div приводит к одинаковым строкам в обоих браузерах.

Этот пример работает в обоих браузерах: 

function redator(divId) {
  const root = document.getElementById(divId)
  const a4 = {
    height: 830,
    width: 595,
    lineHeight: 30
  };
  const getChildrenHeight = (element) => {
    total = 0;
    if (element.childNodes) {
      for (let child of element.childNodes) {
        switch (child.nodeType) {
          case Node.ELEMENT_NODE:
            total += child.offsetHeight;
            break;
          case Node.TEXT_NODE:
            let range = document.createRange();
            range.selectNodeContents(child);
            rect = range.getBoundingClientRect();
            total += (rect.bottom - rect.top);
            break;
        }
      }
    }
    return total;
  };
  const setSelection = (node, offset) =>  {
    let range = document.createRange();
    let sel = window.getSelection();
    range.setStart(node, offset);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
  const addPage = () => {
    const firstPage = root.querySelector('#page-1');
    const newPage = firstPage.cloneNode(true);
    const pages = root.getElementsByClassName('page');
    newPage.addEventListener('input', onInput);
    newPage.innerHTML = '';
    newPage.id = 'page-' + (pages.length + 1);
    firstPage.parentNode.appendChild(newPage);
    newPage.focus();
    newPage._emptyPage = true;
    return newPage;
  }
  function onInput(e) {
    const page = this;
    const previousPage = page.previousElementSibling;
    const nextPage = page.nextElementSibling;
    const pageHeight = getChildrenHeight(page);
    const lastChild = page.lastChild;
    const cloneChild = lastChild.cloneNode(true);
    const textContent = page.innerText;
    if ((pageHeight === 0 || textContent.length <= 1) && !!previousPage && !page._emptyPage) {
      page.remove();
      previousPage.focus();
      const lastChild = previousPage.lastChild;
      setSelection(lastChild, lastChild.childNodes.length);
    } else if (pageHeight > a4.height && !nextPage) {
      lastChild.remove();
      addPage().appendChild(cloneChild);
    } else if (pageHeight > a4.height && nextPage) {
      lastChild.remove();
      nextPage.insertBefore(cloneChild, nextPage.firstChild);
      let selection = getSelection().getRangeAt(0).startContainer.parentElement.closest('div');
      if(selection === page.lastChild) {
        setSelection(cloneChild, 0);
      }
    } else if (pageHeight < a4.height - a4.lineHeight && !!nextPage) {
      let firstChildOfNextPage = nextPage.firstChild;
      let clone = firstChildOfNextPage.cloneNode(true);
      firstChildOfNextPage.remove();
      page.appendChild(clone);
    }
    page._emptyPage = false;
  }

  document.execCommand("DefaultParagraphSeparator", false, "div");
  root.querySelector('#page-1').addEventListener('input', onInput);
}

redator('editor');
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

<head>
	<title>TODO supply a title</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		#editor {
			background-color: gray;
			border: 1px black;
			padding: 1em 2em;
		}

		.page {
			background-color: white;
			border: solid black;
			padding: 1em 2em;
			width: 595px;
			height: 841px;
			word-wrap: break-word;
			overflow-wrap: break-word;
			white-space: normal;
		}
	</style>
</head>

<body>
	<h3>My Editor</h3>
	<div id="editor">
		<div contenteditable="true" class="page" id="page-1">
			<b>hello</b>
		</div>
	</div>
</body>

</html>
...