瀏覽器技巧：推薦一款瀏覽器超級(jí)復(fù)制插件SuperCopy

、插件介紹

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

二、插件主要功能介紹

解除禁止復(fù)制；解除禁止右鍵；解除禁止全選；解除禁止粘貼；

常用場(chǎng)景：復(fù)制百度文庫(kù)、騰訊文檔、金山文檔、起點(diǎn)文學(xué)、豆瓣讀書(shū)等內(nèi)容；

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

三、使用方法

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

說(shuō)明：當(dāng)圖標(biāo)灰色表示未啟用解除功能，當(dāng)圖標(biāo)彩色表示解除生效。

解除復(fù)制限制之后的效果如下圖：

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

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

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

● 百度文庫(kù)

● 360doc

● 起點(diǎn)中文網(wǎng)、起點(diǎn)文學(xué)、起點(diǎn)女生網(wǎng)

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

● 磨鐵中文網(wǎng)、磨鐵文學(xué)、錦文小說(shuō)網(wǎng)、墨墨言情網(wǎng)、逸云書(shū)院

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

● 網(wǎng)易云閱讀

● 騰訊原創(chuàng)館

● 豆瓣閱讀、豆瓣讀書(shū)

● 熊貓看書(shū)

● 嗶哩嗶哩

● 微博

● Story Bird 、 Beetify

● 刺猬貓

● 站酷

● 鏈家

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

● 老烤鴨

● 等等

五、使用方法

● 1、打開(kāi)網(wǎng)站，可以選擇和復(fù)制的站點(diǎn)，無(wú)需開(kāi)啟“SuperCopy”。

● 2、如果網(wǎng)站禁止復(fù)制，點(diǎn)擊“SuperCopy”圖標(biāo)，開(kāi)啟超級(jí)復(fù)制功能，選擇文字復(fù)制。

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

● 插件“SuperCopy”具有記憶功能，開(kāi)啟超級(jí)復(fù)制后，下一次訪問(wèn)該網(wǎng)站，自動(dòng)開(kāi)啟超級(jí)復(fù)制功能。

私信回復(fù)【SuperCopy】獲取下載地址

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

介紹

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

安裝

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

npm install clipboard --save

2.引入js

<script src="dist/clipboard.min.js"></script>
//官網(wǎng)提供了下載地址，也可以使用免費(fèi)的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">復(fù)制</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>
 </body>
</html>

如圖書(shū)最簡(jiǎn)單的例子，單機(jī)復(fù)制按鈕即可自動(dòng)復(fù)制文本框的內(nèi)容

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

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>元素

或者這樣，直接復(fù)制 data-clipboard-text屬性的內(nèi)容

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

事件監(jiān)聽(tīng)，可以打開(kāi)控制臺(tái)自行嘗試

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

高級(jí)用法

動(dòng)態(tài)綁定

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

動(dòng)態(tài)賦值

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

要在Bootstrap Modals中使用或與任何其他更改焦點(diǎn)的庫(kù)一起使用，您需要將focus元素設(shè)置為container值

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

更好的管理單頁(yè)面的DOM生命周期

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

兼容性

備注

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

提供Chrome和Firefox的擴(kuò)展

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

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

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

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

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

客戶那邊也不差這點(diǎn)錢(qián)，之前公司項(xiàng)目組就是在這塊踩過(guò)坑，用了開(kāi)源的方案，客戶那邊提了一個(gè)新需求，但是由于項(xiàng)目組對(duì)產(chǎn)品本身并不熟悉，導(dǎo)致沒(méi)辦法進(jìn)行二次開(kāi)發(fā)。

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

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

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

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

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

1.下載示例：

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

2.復(fù)制WordPaster插件目錄

3.引入插件文件

注意：不要重復(fù)引入jquery，如果您的項(xiàng)目已經(jīng)引入了jq，則不用再引入jq-1.4

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

6.初始化控件

注意：

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

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

2.如果接口返回JSON，請(qǐng)配置ImageMatch

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

3.如果接口返回的圖片地址沒(méi)有域名，請(qǐng)配置ImageUrl

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

4.如果接口有權(quán)限驗(yàn)證（登陸驗(yàn)證，SESSION驗(yàn)證），請(qǐng)配置COOKIE。或取消權(quán)限驗(yàn)證。

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

效果

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

年費(fèi)版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

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

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商