所有样式的文本都被复制到可编辑文本区域答案

【问题标题】：Text with all the styling is being copied to the Editable textarea所有样式的文本都被复制到可编辑文本区域
【发布时间】：2016-05-18 22:22:49
【问题描述】：

我有一个可编辑的 div 来在 Web 应用程序上发布博客，当用户键入任何内容时它工作正常，但是每当我们复制一个段落或从另一个网站上复制的内容时，该段落的样式也会被复制，我只是想要那个段落被复制为纯文本，没有任何样式。我该怎么做。

如果这是代码

<style>
        #mainDiv{
            width:300px;
            height:200px;
            border:1px solid rgb(200, 200, 200);
        }
    </style>

    <body>
        <div contenteditable="true" id="mainDiv" onblur="func()">  

        </div>
        <div id="anotherDiv">
        </div>
    </body>

<script>
    function func(){
        document.getElementById("anotherDiv").innerHTML=document.getElementById("mainDiv").innerHTML;
    }
</script>

然后我将某些内容从另一个网站复制并粘贴到第一个 div，它显示在第二个 div 中，并应用了所有样式。我只是希望它显示为纯文本。

【问题讨论】：

显示代码伙伴..
@GuruprasadRao 如果我正在复制的段落的字体大小设置为 20px，那么这将显示在第二个 div 中，字体大小为：20px，但我不希望在第二个 div 中使用这种样式。
This would help

标签： javascript html css

【解决方案1】：

在粘贴之前，您始终可以使用 Javascript 去除标签的 html。

选择html变成一个变量。

然后使用我在 CSSTricks 上找到的这个方便的替换剥离 Javascript 代码

 var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");

这样可以吗？

【讨论】：

这工作正常，但不是我所期望的。如果我要替换所有标签，那么如果用户没有复制任何东西，他只是在写东西并想要换行，所有的内容将显示在一行中，这不是预期的。同样，如果他想加粗一些，如果我更换标签，他将无法做到。顺便说一句，感谢瑞秋的帮助
@viveksinghggits 没问题，我想值得一试，但同时需要进行一些调整。感谢您的支持！

【解决方案2】：

我认为一个简单的解决方案可能是只使用innerText 而不是innerHTML，因此您的脚本将显示为：

<script>
function func(){
    document.getElementById("anotherDiv").innerText=document.getElementById("mainDiv").innerText;
}

否则，上面使用剪贴板事件侦听器发布的资源可能是您最好的选择。希望这会有所帮助。

【讨论】：

【解决方案3】：

如果针对较新的浏览器（chrome、edge），您可以将 contenteditable 属性设置为纯文本，如下所示：

<div contenteditable="plaintext-only" id="mainDiv" onblur="func()">  

</div>

参考：https://w3c.github.io/editing/contentEditable.html

或者，以下答案是干净的，并直接从剪贴板截取文本。 https://stackoverflow.com/a/12028136/1215026

适应您的代码，如下所示（归功于 pimvdb）：

document.getElementById("mainDiv").addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
});

本质上是拦截粘贴事件并以纯文本形式从剪贴板获取数据。

【讨论】：