从粘贴的文本中删除背景颜色所见即所得

Question

我目前正在开发 WYSIWYG 文本编辑器，但在处理一个元素时遇到了一些问题。每当我从网站复制和粘贴文本时，它也会粘贴背景颜色。我希望它在粘贴文本时删除背景颜色。

目前我有一个可以编辑的 div：

<div id="editor" class="comment-section" contenteditable="true" spellcheck="false" tabindex="0"></div>

然后使用 jQuery 我试图删除 div 中所有子项的背景颜色，因为当我粘贴文本时它会向 div 添加一个跨度：

$('#editor').on('paste', function(e) {
    $(this).children().attr('background-color', 'transparent');
});

但这似乎将之前粘贴的文本的背景颜色设置为透明，但实际上并没有删除背景。

Answer 1

类似于这里的第二个解决方案：JavaScript get clipboard data on paste event (Cross browser)

$('#editor').on('paste', function(e) {
    let  pastedData, text;
    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();
    // Get pasted data via clipboard API
    pastedData = e.originalEvent.clipboardData || window.clipboardData;
    pastedData = pastedData.getData('Text');
    text = $(this).text();
    console.log(text, pastedData);
    $(this).text(text+pastedData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor" class="comment-section" contenteditable="true" spellcheck="false" tabindex="0"></div>