jquery - Firefox 中的 ContentEditable 文本框拖放链接

Question

我一直在谷歌浏览器中制作一个内容可编辑的文本框，它允许我简单地将页面上的链接拖到文本框中。基本上，这些将充当拖放变量，用于创建电子邮件模板。我基本上可以在 chrome 上完成所有工作，但没有在 Firefox 上对其进行测试。当我去 Firefox 时，我不再能够像在 chrome 上那样将链接拖到 contenteditable 区域中。

我制作了一个简单的代码笔来演示基本功能https://codepen.io/MatteCrystal/pen/RwgrXQe

如果你在 chrome 中打开它，你会看到我想要的功能，但在 Firefox 中它不起作用。此外，如果您在 chrome 和 firefox 中并排打开 codepen 并将链接从 chrome 拖到 firefox 中，它实际上会起作用并根据需要将链接插入到 firefox contenteditable 中。

那么有谁知道是否有办法让Firefox在拖动链接时像chrome一样？此外，如果有办法做到这一点，那么我的下一个问题将是如何显示光标以指示在您拖动链接时将其放置在何处。此展示位置光标显示在 chrome 中，但不在 Firefox 中。

或者我是否需要进行彻底的检修才能使其在两种浏览器上都能正常工作？如果是这样，您认为最好的选择是什么？理想情况下，选择的任何解决方案都能够维护<a><button value=""></button></a>可拖动变量的基本结构，因为我已经围绕该结构设置了完整的处理功能，并且更改它会很痛苦。

鼓励使用 jquery 的答案。

如果我需要用另一种方法废弃整个项目，那么我将向第三方库开放，这些库实现了文本框的拖放。我真正需要的是以下

1. 为了能够将链接（变量）的基本 html 拖放到文本框中，同时仍然能够看到它的样式。
2. 使整个变量作为一行的能力，以便在其上按退格键删除整个变量
3. 仅显示粗体、斜体、下划线和添加链接作为编辑器控件的能力。所有其他控件必须能够完全禁用和隐藏。

标签： jquerygoogle-chromefirefoxdrag-and-dropcontenteditable