javascript - 具有所有样式的文本被复制到可编辑文本区域

标签 javascript html css

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

如果这是代码

<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 上找到的这个方便的替换 stripping Javascript 片段

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

这样可以吗?

关于javascript - 具有所有样式的文本被复制到可编辑文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37300875/

相关文章:

html - 影响文本的CSS不透明度过渡

java - 无法从 JSP 访问 WEB-INF 下定义的 CSS 文件

javascript - 我如何获取单击元素的类名并将其放入使用 jquery 的函数中

php - wordpress 主题中 <em> 的未知输出

javascript - 从右到左和从下到上滚动的插件

javascript - 防止 Opera 浏览器丰富 HTML5 字段

javascript - ajaxStart 和 ajaxStop 不工作

javascript - 从 Javascript 类生成多个 HTML 模板时对速度/性能的影响

javascript - 如何使用 create-react-app 从外部模块导入 svg react 组件?

css - 为什么我看不到 :before border when using flexboxes