js 粘贴内容时去掉样式

傷城~ 2023-01-23 09:58 19阅读 0赞

最近在使用jquery的一个json views插件[jquery.json-viewer][]，该插件可以可视化展示json数据，也能够可视化编辑json数据。使用过程中遇到了一点小的问题：将一段json内容粘贴进去后，会带有格式，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

解决方法：

<pre id="json-display"></pre>
    
    
    $("#json-display").on("paste", function (e) {
        textInit(e)
    });
    
    function textInit(e) {
        e.preventDefault();
        var text;
        var clp = (e.originalEvent || e).clipboardData;
        if (clp === undefined || clp === null) {
            text = window.clipboardData.getData("text") || "";
            if (text !== "") {
                if (window.getSelection) {
                    var newNode = document.createElement("span");
                    newNode.innerHTML = text;
                    window.getSelection().getRangeAt(0).insertNode(newNode);
                } else {
                    document.selection.createRange().pasteHTML(text);
                }
            }
        } else {
            text = clp.getData('text/plain') || "";
            if (text !== "") {
                document.execCommand('insertText', false, text);
            }
        }
    }

[jquery.json-viewer]: https://www.jqueryscript.net/other/jQuery-Plugin-For-Easily-Readable-JSON-Data-Viewer.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20221004/fcdb3c79c08e4dcb93a0495d5a065cd5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 Tinymce编辑器从word中粘贴内容，如何对内容进行样式修改？

当从word中粘贴含多个表格的内容时，格式不正确的问题，在网上寻找了很多方法，都没有找到正确的解决方式。效果显示如下图： ![watermark_type_ZmFuZ3poZ

雨点打透心脏的1/2处/ 2023年05月31日 07:52/ 0 赞/ 135 阅读

相关 HTML中提取文字内容，去掉标签样式等

html代码如下 <h1>登鹳雀楼</h1> <div class="poem-detail-header-info">

ゞ浴缸里的玫瑰/ 2023年05月28日 11:27/ 0 赞/ 146 阅读

相关 js 粘贴内容时去掉样式

最近在使用jquery的一个json views插件[jquery.json-viewer][]，该插件可以可视化展示json数据，也能够可视化编辑json数据。使用过程中遇到

傷城~/ 2023年01月23日 09:58/ 0 赞/ 20 阅读

相关 vim的粘贴时去掉两边空格

fun! Paste2() :call Qtwk() "加上去空白代码 normal! "+gP "保持

矫情吗；*/ 2023年01月13日 08:34/ 0 赞/ 211 阅读

相关 input修改placeholder样式、去掉点击时的边框样式

placeholder样式： input::-webkit-input-placeholder { font-size: 17px !importan

骑猪看日落/ 2022年12月04日 08:57/ 0 赞/ 339 阅读

相关 js复制html到粘贴板,JS点击按钮复制内容到粘贴板中

写在前面有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板

叁歲伎倆/ 2022年10月11日 03:53/ 0 赞/ 471 阅读

相关去掉边框默认样式

/\ 去掉苹果手机默认按钮样式 \/ input\[type="button"\], input\[type="submit"\], input\[type="reset"

谁践踏了优雅/ 2022年08月21日 09:44/ 0 赞/ 357 阅读

相关 js复制粘贴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

心已赠人/ 2022年05月12日 07:06/ 0 赞/ 406 阅读

相关 vi/vim 粘贴内容时,保留原文件内容格式

在vi/vim普通模式下执行`:set paste`命令，再按 i 插入就会保留原文件格式 `:set paste` 打开粘贴命令 `:set nopaste`

矫情吗；*/ 2022年04月25日 06:06/ 0 赞/ 584 阅读

相关获取粘贴板内容

//2 Get Clipboard Data CString strClipboard; if (OpenClipboard())

淩亂°似流年/ 2022年04月15日 07:27/ 0 赞/ 387 阅读