具有所有样式的文本正在复制到可编辑文本区域

我有一个可编辑的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中，并应用了所有的样式。我只希望它显示为纯文本。

在粘贴之前，您可以始终使用Javascript剥离html中的标记。

将html选择为一个变量。

然后使用我在CSSTricks 上发现的这个方便的剥离Javascript的替换片段

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

这行吗？

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

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

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

如果针对较新的浏览器（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);
});

本质上是截取粘贴事件，并从cliboard中以纯文本形式获取数据。

相关内容

最新更新

热门标签：