我遇到了这篇 Stack Overflow 帖子，其中讨论了我所需要的确切内容：能够将文本粘贴到内容可编辑的区域，只保留一些样式。我在那里运行了代码片段，它工作正常。但是，当我在我的页面上尝试时，所有样式都被删除了，包括我想保留的样式，例如粗体和斜体。在比较代码和一些实验后，我意识到它不起作用的原因是因为我使用的是外部 CSS，而不是内联。
有什么办法可以使它与外部 CSS 一起使用吗？我永远不会知道用户将在该 contenteditable 中发布的文本的来源，以及如何对其应用样式，因此我希望解决所有可能性。
另外，有没有办法让它与拖放的文本一起工作，而不仅仅是粘贴的文本？我尝试将它正在侦听的事件从“粘贴”替换为“丢弃”，但出现错误e.clipboardData is undefined
const el = document.querySelector('p');
el.addEventListener('paste', (e) => {
// Get user's pasted data
let data = e.clipboardData.getData('text/html') ||
e.clipboardData.getData('text/plain');
// Filter out everything except simple text and allowable HTML elements
let regex = /<(?!(\/\s*)?(b|i|em|strong|u)[>,\s])([^>])*>/g;
data = data.replace(regex, '');
// Insert the filtered content
document.execCommand('insertHTML', false, data);
// Prevent the standard paste behavior
e.preventDefault();
});.editable {
width: 100%;
min-height: 20px;
font-size: 14px;
color: black; …在这篇SO post 之后，我可以将插入符号放在一个span元素中，该元素位于div contenteditable="true".
我可以span通过它的来定位我想要的任何对象id，同时还可以决定插入符号应该放在哪个字符之后。
但是如何将插入符号放置在没有文本的跨度内？
只需按原样使用该函数，就会出现此错误： TypeError: Range.setStart: Argument 1 is not an object.
此外，出于某种原因，当span有内容时，它在 Firefox 中运行良好。但不是在 Chrome 中，插入符号放在span. 有什么办法也可以解决这个问题？
我对 jQuery 持开放态度，如果它能让事情变得更容易的话。
这是我的代码：
function setCaret(x, y) {
var element = document.getElementById(x);
var range = document.createRange();
var node;
node = document.getElementById(y);
range.setStart(node.childNodes[0], 0);
var sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
element.focus();
}body {
font-family: sans-serif;
}
input {
margin-bottom: 5px;
padding: 3px;
} …