瀏覽器技巧：推薦一款瀏覽器超級復制插件SuperCopy

、插件介紹

超級復制(Super Copy)是一個完美解決網頁文字無法復制的谷歌瀏覽器插件，無論是css形式還是js形式的限制復制，利用該插件都可以實現一鍵解決禁止右鍵、禁止選擇、禁止復制、禁止粘貼的功能，這個功能對于大家日常辦公還是非常有用的，有的時候我們在網站上搜索資料、解決方案等，有些網站設置了禁止復制粘貼的功能，這個時候大家如果找到了自己需要的內容，但無法復制粘貼，大家肯定會抓狂起來，有了這個瀏覽器插件，可以完美解決這個網頁內容復制的問題。

二、插件主要功能介紹

解除禁止復制；解除禁止右鍵；解除禁止全選；解除禁止粘貼；

常用場景：復制百度文庫、騰訊文檔、金山文檔、起點文學、豆瓣讀書等內容；

特色功能：點亮圖標即可復制，操作簡單，需復制的網站具有記憶功能。

三、使用方法

首先在訪問被禁止右鍵或禁止復制的網站上，點擊SuperCopy圖標解除禁止即可。

說明：當圖標灰色表示未啟用解除功能，當圖標彩色表示解除生效。

解除復制限制之后的效果如下圖：

我們進入插件的設置界面可以看到我們添加解決網站內容復制問題的網站列表

四、支持的常用中文網站

可以復制的常用中文網站：

● 百度文庫

● 360doc

● 起點中文網、起點文學、起點女生網

● 創始中文網

● 磨鐵中文網、磨鐵文學、錦文小說網、墨墨言情網、逸云書院

● 縱橫中文網、縱橫文學

● 網易云閱讀

● 騰訊原創館

● 豆瓣閱讀、豆瓣讀書

● 熊貓看書

● 嗶哩嗶哩

● 微博

● Story Bird 、 Beetify

● 刺猬貓

● 站酷

● 鏈家

● 環球人力資源智庫

● 老烤鴨

● 等等

五、使用方法

● 1、打開網站，可以選擇和復制的站點，無需開啟“SuperCopy”。

● 2、如果網站禁止復制，點擊“SuperCopy”圖標，開啟超級復制功能，選擇文字復制。

● 3、如果少數網站開啟“SuperCopy”后，影響網站原有功能，復制完成后，再次點擊“SuperCopy”圖標，關閉超級復制功能。

● 插件“SuperCopy”具有記憶功能，開啟超級復制后，下一次訪問該網站，自動開啟超級復制功能。

私信回復【SuperCopy】獲取下載地址

網：https://clipboardjs.com/

介紹

clipboard.js是一款不依賴flash或任何重量級框架的粘貼復制插件，并且它沒有任何非常復雜的配置，這也是它存在的原因。

安裝

通過npm安裝（或者直接下載js文件引入）

npm install clipboard --save

2.引入js

<script src="dist/clipboard.min.js"></script>
//官網提供了下載地址，也可以使用免費的cdn

使用

示例

<!DOCTYPE html>
<html class="no-js">
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title></title>
 <meta name="description" content="" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link
 
 rel="stylesheet"
 />
 </head>
 <body>
 <div class="input-group" style="width: 600px;margin:200px">
 <input
 type="text"
 class="form-control"
 id="foo"
 value="https://github.com/zenorocha/clipboard.js.git"
 placeholder="Amount"
 />
 <div class="btn input-group-addon" data-clipboard-target="#foo">復制</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>
 </body>
</html>

如圖書最簡單的例子，單機復制按鈕即可自動復制文本框的內容

換成下面就會變成剪切，主要是以下屬性

data-clipboard-action="cut"

<div class="input-group" style="width: 600px;margin:200px">
 <input
 type="text"
 class="form-control"
 id="foo"
 value="https://github.com/zenorocha/clipboard.js.git"
 placeholder="Amount"
 />
 <div class="btn input-group-addon" data-clipboard-target="#foo" data-clipboard-action="cut">剪切</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>

剪切操作僅適用于<input>或<textarea>元素

或者這樣，直接復制 data-clipboard-text屬性的內容

<button class="btn" data-clipboard-text="要復制的內容">
 復制
</button>

事件監聽，可以打開控制臺自行嘗試

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
 console.info('Action:', e.action);
 console.info('Text:', e.text);
 console.info('Trigger:', e.trigger);
 e.clearSelection();
});
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

高級用法

動態綁定

new ClipboardJS('.btn', {
 target: function(trigger) {
 return trigger.nextElementSibling;
 }
});

動態賦值

new ClipboardJS('.btn', {
 text: function(trigger) {
 return trigger.getAttribute('aria-label');
 }
});

要在Bootstrap Modals中使用或與任何其他更改焦點的庫一起使用，您需要將focus元素設置為container值

new ClipboardJS('.btn', {
 container: document.getElementById('modal')
});

更好的管理單頁面的DOM生命周期

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

兼容性

備注

如果需要支持更低版本的瀏覽器，可以參考官網的介紹，它能夠優雅的降級

提供Chrome和Firefox的擴展

一個瀏覽器擴展，為GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每個代碼塊添加“復制到剪貼板”按鈕。需要的可以私信或者前往擴展中心自行下載。

持復制粘貼WORD圖片的HTML編輯器，怎么把WORD文檔粘貼到編輯器里啊?HTML編輯器復制WORD里面帶圖文的文章，圖片可以直接顯示，JSP – 支持WORD上傳的富文本編輯器，EWEBEDITOR 從WORD中復制內容帶多張圖片，如何從WORD文檔復制公式到富文本編輯器，復制word圖片，從word中復制圖片,

從word中粘貼圖片，粘貼word內容，粘貼word圖片，粘貼word圖文，復制粘貼word文檔，復制粘貼word圖片，復制粘貼word圖文，復制粘貼word內容，

之前在網上找過相關的資料，論壇里面也有網友交流過，還加過不少QQ群和微信群，但是結果都不太令人滿意。相關的文章提問的人多，能夠給出方案的人少，能夠給出成熟產品的就更少了，說的直接一點根本就沒有，純屬浪費時間。要示例沒示例，要代碼沒代碼，根本就用不了，

有幾個方面的原因吧，一個是網上的資料提的一些都是開源的方案，也不是說開源的方案不行，關鍵是提到的這些方案，公司項目組去評估發現聯系不到開發人員，而且方案本身也停止更新了，處于沒有人維護的狀態，所以項目組這邊不太敢用。主要是之前在這塊也踩過坑。給客戶做的項目，客戶二期提了一個需求，因為之前的開發人員用的是一個開源的方案，現在連官網都打不開了，更別提聯系開發人員了，根本就動不了。

客戶那邊也不差這點錢，之前公司項目組就是在這塊踩過坑，用了開源的方案，客戶那邊提了一個新需求，但是由于項目組對產品本身并不熟悉，導致沒辦法進行二次開發。

這個功能對用戶來說確實是非常的有用，用戶也比較喜歡這個功能，確實能夠提高他們的工作效率，一般內容都是提前在word中編輯好了的，他們發布內容的時候是直接從word文檔里面復制的。

從word中復制圖片和文字內容，然后粘貼到web富文本編輯器中，粘貼后word圖片自動上傳到web服務器中，自動將圖片和文字HTML添加到編輯器中，保留word中的文字格式，文字顏色，字體，樣式，

用戶發布新聞的時候是從word里面復制圖片和文字，然后將word圖文內容粘貼到web富文本編輯器中，希望能夠將word的圖片自動上傳到服務器中，服務器地址能夠自定義，

后端的話需要支持任意開發語言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標準HTTP協議的都要支持。如果能夠不裝控件最好，

視頻教程：https://www.ixigua.com/7233953214108795407

1.下載示例：

http://www.ncmem.com/webapp/wordpaster/versions.aspx

2.復制WordPaster插件目錄

3.引入插件文件

注意：不要重復引入jquery，如果您的項目已經引入了jq，則不用再引入jq-1.4

4.在工具欄中增加插件按鈕

6.初始化控件

注意：

1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒有域名，請配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936

4.如果接口有權限驗證（登陸驗證，SESSION驗證），請配置COOKIE?；蛉∠麢嘞掾炞C。

參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

訂閱版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/

年費版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

產品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr
授權碼生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwzYuEEY1

在線咨詢

上一篇：你知道網頁上一動不動的懸浮框是怎么做出來的嗎？
下一篇：你不知道的CSS濾鏡

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商