javascript - 如何在 Firefox 中复制和粘贴包含自定义元素的 contenteditable 元素的内容？

Question

这是一个非常特殊的问题。我使用德国网站gutefrage。本网站使用修改后的Quill作为编辑器。在这里您可以使用编辑器。如果按回车键，则开始一个新段落。如果按 SHIFT+回车，则会触发换行符。但是，换行符不是使用BR-element 实现的，而是使用自定义 HTML 元素，称为gf-br. 因此，不能像诗歌一样复制文本，因为每个换行符都会自动转换为段落。

这就是为什么我决定在将文本插入编辑器之前编写一个“准备”文本的工具。该工具将每个br转换为gf-br. 如果后面有两个brs，则它们只转换为一个 s 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>

一个插入任何文本，例如。G。这个，进入contenteditable div。现在，按下按钮并将结果复制到 Gutefrage 编辑器中。它应该看起来和以前完全一样。

问题

这与 Chrome 完美配合。但是，Firefox 会删除任何自定义 HTML 元素，例如gf-br. 我尝试将任何内容插入到该元素中，并且还尝试在非contenteditable元素中显示结果。这没用。

有没有机会在不使用用户脚本的情况下做任何事情？如果您有任何问题或需要任何其他信息，请询问。

标签： javascripthtmlcssfirefoxcontenteditable