Как скопировать и вставить содержимое contenteditable элемента, который содержит пользовательский элемент в Firefox? - PullRequest
Новая
       25

Как скопировать и вставить содержимое contenteditable элемента, который содержит пользовательский элемент в Firefox?

0 голосов
/ 22 мая 2018

Это очень особенный вопрос.Я пользуюсь немецким сайтом gutefrage .Этот сайт использует измененный Quill в качестве редактора. Здесь вы можете использовать редактор.Если вы нажмете клавишу ввода, новый абзац начнется.Если вы нажмете SHIFT + ввод, произойдет разрыв строки.Однако разрыв строки не реализован с использованием BR -элемента, а использует собственный HTML-элемент, который называется gf-br.Поэтому нельзя просто скопировать текст как стихотворение, поскольку каждый разрыв строки автоматически преобразуется в абзац.

Именно поэтому я решил написать инструмент, который «подготавливает» текст, прежде чем вставить его.в редактор.Инструмент конвертирует каждый br в gf-br.Если есть два br с друг за другом, они конвертируются только в один br.Вот что у меня есть: 

function modify() {
  var text = document.getElementById('text').innerHTML;
  text = text.split(/<br[\s]?[\/]?>[\s]?<br[\s]?[\/]?>/).join('[<[<break>]>]');
  text = text.split(/<br[\s]?[\/]?>/).join('<gf-br></gf-br>');
  text = text.split('[<[<break>]>]').join('<br />');
  document.getElementById('text').innerHTML = text;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#btn {
  width: 100%;
  height: 10vh;
}

#text {
  width: calc(100% - 10px);
  height: calc(90vh - 10px);
  border: 2px solid #000;
  margin: 5px;
  padding: 5px;
}
<button id="btn" onclick="modify();">Modify</button>
<div id="text" contenteditable></div>

Один текст вставляется, e.г. это , в доказуемое div.Теперь вы нажимаете кнопку и копируете результат в редактор gutefrage.Он должен выглядеть точно так же, как и раньше.

Проблема

Это прекрасно работает с Chrome.Однако Firefox удаляет любые пользовательские HTML-элементы, такие как gf-br.Я попытался вставить любое содержимое в этот элемент, а также попытался отобразить результат в элементе, отличном от contenteditable.Не работает.

Есть ли шанс что-либо сделать без использования пользовательского скрипта?Если у вас есть вопрос или вам нужна дополнительная информация, просто спросите.

...