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

、插件介紹

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

二、插件主要功能介紹

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

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

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

三、使用方法

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

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

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

我們進入插件的設置界面可以看到我們添加解決網(wǎng)站內(nèi)容復制問題的網(wǎng)站列表

四、支持的常用中文網(wǎng)站

可以復制的常用中文網(wǎng)站：

● 百度文庫

● 360doc

● 起點中文網(wǎng)、起點文學、起點女生網(wǎng)

● 創(chuàng)始中文網(wǎng)

● 磨鐵中文網(wǎng)、磨鐵文學、錦文小說網(wǎng)、墨墨言情網(wǎng)、逸云書院

● 縱橫中文網(wǎng)、縱橫文學

● 網(wǎng)易云閱讀

● 騰訊原創(chuàng)館

● 豆瓣閱讀、豆瓣讀書

● 熊貓看書

● 嗶哩嗶哩

● 微博

● Story Bird 、 Beetify

● 刺猬貓

● 站酷

● 鏈家

● 環(huán)球人力資源智庫

● 老烤鴨

● 等等

五、使用方法

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

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

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

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

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

網(wǎng)：https://clipboardjs.com/

介紹

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

安裝

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

npm install clipboard --save

2.引入js

<script src="dist/clipboard.min.js"></script>
//官網(wǎng)提供了下載地址，也可以使用免費的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>

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

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

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屬性的內(nèi)容

<button class="btn" data-clipboard-text="要復制的內(nèi)容">
 復制
</button>

事件監(jiān)聽，可以打開控制臺自行嘗試

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);
});

高級用法

動態(tài)綁定

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

動態(tài)賦值

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();

兼容性

備注

如果需要支持更低版本的瀏覽器，可以參考官網(wǎng)的介紹，它能夠優(yōu)雅的降級

提供Chrome和Firefox的擴展

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

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

從word中粘貼圖片，粘貼word內(nèi)容，粘貼word圖片，粘貼word圖文，復制粘貼word文檔，復制粘貼word圖片，復制粘貼word圖文，復制粘貼word內(nèi)容，

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

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

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

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

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

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

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

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

1.下載示例：

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

2.復制WordPaster插件目錄

3.引入插件文件

注意：不要重復引入jquery，如果您的項目已經(jīng)引入了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。或取消權限驗證。

參考：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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商