標(biāo)題WordPress博客實(shí)現(xiàn)粘貼圖片自動(dòng)上傳服務(wù)器寫文章的人大概都懂這個(gè)場景正在本地文檔里趕稿子順手截了一張關(guān)鍵截圖切回瀏覽器后臺(tái)準(zhǔn)備粘貼到文章里結(jié)果WordPress默認(rèn)編輯器沒有任何反應(yīng)。你得先把圖存到本地再點(diǎn)一次上傳按鈕找文件選文件等上傳最后插進(jìn)正文——如果一天寫兩三篇帶圖文章這些重復(fù)操作浪費(fèi)的時(shí)間足夠?qū)懲暌淮蠖伍_頭了。這個(gè)需求其實(shí)很明確復(fù)制或截圖之后在WordPress編輯器里直接CtrlV圖片自動(dòng)上傳到服務(wù)器并自動(dòng)插入當(dāng)前位置。這篇文章就把這條鏈路徹底講透覆蓋原理、實(shí)操代碼、以及各種踩坑后的解決方案。不論你是用經(jīng)典編輯器還是古騰堡Gutenberg不論你是自己寫插件還是只想找現(xiàn)成方案都能在這里找到答案。1. 先搞清楚為什么默認(rèn)編輯器不能直接粘貼圖片很多新手會(huì)困惑WordPress自帶的編輯器不是“所見即所得”嗎為什么粘貼圖片沒反應(yīng)原因很簡單瀏覽器允許你讀取剪貼板中的純文本和HTML但圖片文件屬于二進(jìn)制數(shù)據(jù)編輯器本身并沒有實(shí)現(xiàn)“讀取剪貼板文件并上傳”這段邏輯。1.1 默認(rèn)編輯器的“粘貼”行為到底做了什么當(dāng)你按下CtrlV時(shí)瀏覽器會(huì)把剪貼板里的內(nèi)容以兩種形式拋給頁面一是純文本text/plain一是富文本HTMLtext/html。WordPress的經(jīng)典編輯器基于TinyMCE古騰堡是基于內(nèi)容可編輯區(qū)contenteditable它們做的都是接收這些文本/HTML內(nèi)容然后轉(zhuǎn)成自己的內(nèi)部格式。如果剪貼板里是一張圖片瀏覽器的默認(rèn)行為是嘗試把圖片以Base64編碼嵌入到HTML里或者直接不做任何處理。問題在于Base64圖片如果直接粘貼進(jìn)編輯器文章發(fā)布后圖片是以超長字符串存在數(shù)據(jù)庫里的會(huì)拖慢頁面加載速度、占用數(shù)據(jù)庫空間而且也不好在媒體庫中統(tǒng)一管理。所以WordPress官方一直不支持這種“編碼字符串圖片”而是希望用戶走媒體庫上傳流程。1.2 我們需要的其實(shí)是一條“中轉(zhuǎn)鏈路”要讓粘貼圖片自動(dòng)上傳本質(zhì)上是做三件事在編輯器內(nèi)攔截粘貼paste事件讀取剪貼板里的圖片文件File對象。拿到圖片文件后通過REST API上傳到服務(wù)器WordPress的媒體庫本質(zhì)上就是對/wp-json/wp/v2/media這個(gè)接口發(fā)POST請求。上傳成功后拿到圖片URL把img標(biāo)簽插入到編輯器當(dāng)前光標(biāo)位置。所以圖能不能“自動(dòng)上傳”取決于前端是否寫了這套攔截邏輯。理解了這一點(diǎn)你會(huì)發(fā)現(xiàn)不管是經(jīng)典編輯器還是古騰堡只要統(tǒng)一監(jiān)聽粘貼事件就能做到“編輯器無關(guān)”的自動(dòng)上傳。2. 方案選型現(xiàn)成插件與自研插件的取舍很多人第一反應(yīng)是去插件市場搜“paste image”確實(shí)有不少現(xiàn)成選擇。但插件質(zhì)量參差不齊而且有些長期不更新和古騰堡新版本不兼容。選方案前先看清自己的需求。2.1 現(xiàn)成插件方案的適配情況我用過的插件里比較靠譜的有兩類插件名編輯器支持上傳方式優(yōu)缺點(diǎn)Paste IMG經(jīng)典TinyMCE兼容性最好古騰堡早期版本可用走媒體庫REST API輕量、簡單但古騰堡更新后偶爾失效WP Paste Images古騰堡適配較好走媒體庫REST API功能全支持拖拽但設(shè)置項(xiàng)多Paste Upload經(jīng)典編輯器為主走媒體庫已多年未更新存在兼容性問題如果你只是偶爾粘貼幾張截圖不折騰代碼裝一個(gè)“Paste IMG”這類插件就能解決。但如果你對網(wǎng)站有長期維護(hù)計(jì)劃、或者用了自定義編輯器樣式、或者希望上傳邏輯完全可控我建議自己寫一個(gè)小插件二三十行PHP加幾十行JS就能搞定不依賴第三方更新出問題也能自己排查。2.2 為什么我最終選擇自研插件之前我?guī)涂蛻籼幚硪粋€(gè)企業(yè)官網(wǎng)他們用的古騰堡編輯器裝了一個(gè)粘貼上傳插件剛開始一切正常。結(jié)果某次WordPress小版本更新后插件作者沒跟上粘貼直接失效。排查了半天發(fā)現(xiàn)是插件監(jiān)聽的事件名稱變了老代碼綁定的還是舊事件。從那時(shí)候起我對這類“小而關(guān)鍵”的功能都傾向于自己實(shí)現(xiàn)。原因有三可控性強(qiáng)代碼自己維護(hù)WordPress升級(jí)后出問題能第一時(shí)間定位。代碼量少核心邏輯不過百行沒必要為這個(gè)功能引入一個(gè)幾十KB的插件包?？缮疃榷ㄖ瓶梢宰约嚎刂粕蟼髂夸?、文件名規(guī)則、圖片壓縮、水印等邏輯這些在現(xiàn)成插件里往往要翻設(shè)置或改鉤子。自研還有一個(gè)好處你不用在服務(wù)器上多維護(hù)一個(gè)第三方插件的更新通知。3. 核心原理拆解一次粘貼背后的完整請求鏈路寫代碼之前必須把原理捋清楚。你只有知道每一步發(fā)生了什么才能在出了問題的時(shí)候快速定位。3.1 前端粘貼事件ClipboardEvent與DataTransfer瀏覽器提供了一個(gè)標(biāo)準(zhǔn)事件paste。它的事件對象是一個(gè)ClipboardEvent里面含有一個(gè)clipboardData屬性類型是DataTransfer。這個(gè)對象有items列表每一項(xiàng)可能包含文本或文件。當(dāng)剪貼板里是截圖時(shí)clipboardData.items中會(huì)出現(xiàn)一個(gè)type以image/開頭的項(xiàng)。你可以通過item.getAsFile()直接拿到一個(gè)File對象。這個(gè)File對象和你在input typefile里選到的文件沒有任何區(qū)別可以直接塞進(jìn)FormData發(fā)送。這里有個(gè)關(guān)鍵細(xì)節(jié)必須調(diào)用event.preventDefault()阻止瀏覽器的默認(rèn)粘貼行為否則瀏覽器會(huì)把圖片以Base64形式插入編輯器造成“文章里有一大串亂碼”的問題。3.2 后端上傳接口WordPress REST API Media端點(diǎn)WordPress從4.7開始內(nèi)置了REST API其中媒體上傳對應(yīng)的端點(diǎn)是POST /wp-json/wp/v2/media請求時(shí)需要在Header里帶上認(rèn)證信息。對于登錄用戶來說最常用的是X-WP-Nonce頭值是一個(gè)由WordPress生成的nonce。前端拿到這個(gè)nonce后每次請求都帶上它WordPress就能識(shí)別出“這是后臺(tái)登錄用戶在操作”。請求體是multipart/form-data格式其中file字段就是圖片文件。WordPress會(huì)幫你處理所有后續(xù)操作校驗(yàn)文件類型、移動(dòng)到wp-content/uploads/YYYY/MM/目錄、生成縮略圖、寫入媒體庫數(shù)據(jù)庫記錄。3.3 認(rèn)證鏈路的搭建wpApiSettings與nonce你可能會(huì)問REST API不是要登錄才能上傳嗎后臺(tái)編輯器頁面的AJAX請求是怎么通過認(rèn)證的答案就在WordPress后臺(tái)頁面的全局JavaScript變量wpApiSettings里。當(dāng)你進(jìn)入文章編輯頁時(shí)WordPress會(huì)輸出一段內(nèi)聯(lián)腳本大致內(nèi)容如下wpApiSettings { root: https://你的域名/wp-json/, nonce: 一串隨機(jī)字符 };其中nonce是通過服務(wù)端wp_create_nonce(wp_rest)生成的只對當(dāng)前登錄用戶有效而且有時(shí)效性。前端上傳圖片時(shí)只要在AJAX請求頭里帶上X-WP-Nonce: wpApiSettings.nonceWordPress就會(huì)認(rèn)為請求來自已登錄用戶并且驗(yàn)證通過后允許上傳。這個(gè)nonce的時(shí)效通常是24小時(shí)如果你開了緩存插件偶爾會(huì)遇到“編輯頁打開太久nonce過期”的情況表現(xiàn)為上傳突然401。解決辦法很簡單刷新編輯頁面重新生成nonce即可。4. 實(shí)操從零編寫一個(gè)粘貼自動(dòng)上傳插件下面進(jìn)入實(shí)戰(zhàn)環(huán)節(jié)。我們寫一個(gè)獨(dú)立插件同時(shí)兼容經(jīng)典編輯器和古騰堡編輯器。代碼我按“能直接復(fù)制到項(xiàng)目里用”的標(biāo)準(zhǔn)來寫。4.1 插件骨架與文件結(jié)構(gòu)在wp-content/plugins/下新建目錄比如paste-upload-plus/里面放兩個(gè)文件paste-upload-plus/ ├── paste-upload-plus.php └── assets/ └── paste-upload.js主插件文件的PHP代碼如下?php /** * Plugin Name: Paste Upload Plus * Description: 在WordPress編輯器中粘貼圖片自動(dòng)上傳到服務(wù)器并插入正文。 * Version: 1.0.0 * Author: Your Name */ if ( ! defined( ABSPATH ) ) { exit; // 防止直接訪問 } class Paste_Upload_Plus { public function __construct() { add_action( admin_enqueue_scripts, array( $this, enqueue_assets ) ); } /** * 只在文章編輯頁面加載腳本 */ public function enqueue_assets( $hook ) { if ( ! in_array( $hook, array( post.php, post-new.php ), true ) ) { return; } // 加載前端JS wp_enqueue_script( paste-upload-plus, plugin_dir_url( __FILE__ ) . assets/paste-upload.js, array( jquery ), 1.0.0, true ); // 將REST API地址和nonce傳給前端 wp_localize_script( paste-upload-plus, PUP_CONFIG, array( restUrl esc_url_raw( rest_url( wp/v2/media ) ), nonce wp_create_nonce( wp_rest ), ) ); } } new Paste_Upload_Plus();這里重點(diǎn)解釋幾處設(shè)計(jì)admin_enqueue_scripts鉤子只有進(jìn)入后臺(tái)文章編輯頁post.php和post-new.php時(shí)才加載腳本避免拖慢其他后臺(tái)頁面。wp_localize_script把PHP端的REST地址和nonce安全地傳到JS端。生成的JS對象是PUP_CONFIG數(shù)組里的鍵名會(huì)變成PUP_CONFIG.restUrl和PUP_CONFIG.nonce。依賴jQuery因?yàn)楹罄m(xù)JS要用到j(luò)Query的AJAX方法所以聲明了jquery作為依賴。4.2 前端JavaScript粘貼攔截與上傳下面是assets/paste-upload.js的完整代碼jQuery(function ($) { // 防止重復(fù)綁定 if (window.PUP_LOADED) { return; } window.PUP_LOADED true; // 全局監(jiān)聽粘貼事件 $(document).on(paste, function (e) { var clipboardData e.originalEvent.clipboardData || window.clipboardData || e.clipboardData; if (!clipboardData) { return; } var items clipboardData.items; if (!items || items.length 0) { return; } // 遍歷剪貼板項(xiàng)找到圖片 for (var i 0; i items.length; i) { if (items[i].type.indexOf(image) ! -1) { var file items[i].getAsFile(); if (file) { e.preventDefault(); // 阻止瀏覽器默認(rèn)粘貼行為 uploadPastedImage(file); } break; // 只處理第一張圖 } } }); /** * 上傳圖片到WordPress媒體庫 */ function uploadPastedImage(file) { // 顯示上傳中的提示古騰堡和經(jīng)典編輯器通用 showUploadNotice(圖片上傳中...); var formData new FormData(); formData.append(file, file); // 如果剪貼板里有文件名就用它否則用時(shí)間戳 var fileName file.name || paste- Date.now() .png; formData.append(filename, fileName); $.ajax({ url: PUP_CONFIG.restUrl, method: POST, data: formData, processData: false, contentType: false, beforeSend: function (xhr) { xhr.setRequestHeader(X-WP-Nonce, PUP_CONFIG.nonce); } }) .done(function (response) { if (response response.source_url) { insertImageToEditor(response.source_url, fileName); showUploadNotice(圖片上傳成功, success); } else { showUploadNotice(上傳失敗響應(yīng)中沒有圖片地址, error); } }) .fail(function (xhr) { var msg 上傳失敗; if (xhr.responseJSON xhr.responseJSON.message) { msg xhr.responseJSON.message; } else if (xhr.status 0) { msg 網(wǎng)絡(luò)錯(cuò)誤或接口超時(shí); } else { msg HTTP xhr.status; } showUploadNotice(msg, error); }); } /** * 將圖片HTML插入編輯器 */ function insertImageToEditor(url, fileName) { var imgTag img src url alt (fileName || ) /; // 優(yōu)先處理古騰堡編輯器 if (typeof wp ! undefined wp.data wp.data.dispatch) { insertIntoGutenberg(url, fileName); return; } // 經(jīng)典編輯器TinyMCE if (typeof tinyMCE ! undefined tinyMCE.activeEditor) { tinyMCE.activeEditor.insertContent(imgTag); return; } // 兜底如果兩個(gè)編輯器都不存在直接插入到可編輯區(qū)域 var editor document.querySelector(.wp-block, .block-editor-rich-text__editable, .mce-content-body); if (editor) { editor.focus(); document.execCommand(insertHTML, false, imgTag); } } /** * 插入到古騰堡編輯器手動(dòng)創(chuàng)建Image塊 */ function insertIntoGutenberg(url, fileName) { var createBlock wp.blocks.createBlock; var insertBlocks wp.data.dispatch(core/block-editor).insertBlocks; var imageBlock createBlock(core/image, { url: url, alt: fileName || , }); insertBlocks(imageBlock); } /** * 簡單的頂部提示條不依賴第三方通知庫 */ function showUploadNotice(message, type) { var existing document.getElementById(pup-notice); if (existing) { existing.remove(); } var notice document.createElement(div); notice.id pup-notice; notice.style.cssText position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:99999;padding:10px 20px;color:#fff;font-size:14px;border-radius:0 0 8px 8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);; notice.style.background type success ? #00a32a : (type error ? #d63638 : #2271b1); notice.textContent message; document.body.appendChild(notice); setTimeout(function () { if (notice.parentNode) { notice.parentNode.removeChild(notice); } }, 3000); } });這段代碼里有幾個(gè)關(guān)鍵點(diǎn)值得單獨(dú)說明。為什么用$(document).on(paste)而不是在編輯器實(shí)例上綁定因?yàn)闊o論是經(jīng)典編輯器還是古騰堡編輯器內(nèi)容區(qū)都是動(dòng)態(tài)渲染的。直接在文檔根節(jié)點(diǎn)上做事件委托無論編輯器內(nèi)部怎么變事件都能被捕獲。這個(gè)思路在多個(gè)版本W(wǎng)ordPress下都驗(yàn)證過穩(wěn)定性最好。為什么要判斷wp.data是否存在來區(qū)分古騰堡和經(jīng)典編輯器古騰堡本身就是基于wordpress/data構(gòu)建的所以只要加載了古騰堡全局必然有wp.data。而經(jīng)典編輯器頁面沒有這個(gè)對象。這個(gè)判斷基本準(zhǔn)確但有一點(diǎn)要注意如果你同時(shí)啟用了經(jīng)典編輯器插件Classic Editor并且選擇用古騰堡編輯——wp.data依然存在所以能正常工作。為什么古騰堡要手動(dòng)創(chuàng)建core/image塊而不是直接insertHTML因?yàn)樵诠膨v堡中文檔本身不是HTML字符串而是一個(gè)塊結(jié)構(gòu)Block。如果你用document.execCommand(insertHTML)古騰堡會(huì)把它當(dāng)作“自由HTML”塊內(nèi)容處理可能會(huì)被拆散或顯示異常。用createBlock(core/image, { url })創(chuàng)建的才是真正標(biāo)準(zhǔn)的圖片塊。4.3 上傳參數(shù)與細(xì)節(jié)優(yōu)化上面的代碼已經(jīng)能工作了但實(shí)際用下來你會(huì)發(fā)現(xiàn)幾個(gè)可以優(yōu)化的點(diǎn)。文件名處理剪貼板里file.name可能是空字符串尤其是一些截圖工具。上面代碼里用了Date.now()兜底但更好的做法是給文件重命名。比如統(tǒng)一用日期隨機(jī)數(shù)var ext png; if (file.type image/jpeg) ext jpg; if (file.type image/gif) ext gif; if (file.type image/webp) ext webp; var fileName paste- Date.now() - Math.random().toString(36).slice(2, 7) . ext; formData.append(filename, fileName);注意formData.append(filename, fileName)這個(gè)字段如果帶上WordPress就會(huì)用這個(gè)名字作為存到服務(wù)器上的文件名。圖片壓縮截圖一般不大但如果你從網(wǎng)頁里復(fù)制高清圖片原始文件可能好幾MB。直接傳上去浪費(fèi)空間還會(huì)拖慢上傳速度?？梢约右粚觕anvas壓縮邏輯把圖片縮小到一定尺寸再上傳function compressImage(file, maxWidth, callback) { var reader new FileReader(); reader.onload function (e) { var img new Image(); img.onload function () { var canvas document.createElement(canvas); var width img.width; var height img.height; if (width maxWidth) { height Math.round(height * maxWidth / width); width maxWidth; } canvas.width width; canvas.height height; var ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, width, height); canvas.toBlob(function (blob) { if (!blob) { callback(file); // 失敗則返回原文件 return; } blob.name file.name; callback(blob); }, file.type, 0.85); }; img.src e.target.result; }; reader.readAsDataURL(file); }調(diào)用方式就是在uploadPastedImage里先壓縮再上傳。我個(gè)人建議把最大寬度限制在1920px這個(gè)尺寸對博客文章足夠清晰體積又小很多。注意canvas壓縮過程中用戶如果截圖是透明背景的PNG轉(zhuǎn)成JPEG會(huì)變黑底。所以壓縮時(shí)最好保留原格式或者判斷file.type為image/png時(shí)用PNG格式導(dǎo)出。4.4 經(jīng)典編輯器與古騰堡的插入差異總結(jié)用表格總結(jié)一下方便你在排查時(shí)對照場景插入方式說明經(jīng)典編輯器TinyMCEtinyMCE.activeEditor.insertContent(img.../)直接把HTML插到當(dāng)前光標(biāo)位置最簡單古騰堡編輯器wp.data.dispatch(core/block-editor).insertBlocks(imageBlock)手動(dòng)構(gòu)建圖片塊插入到當(dāng)前段落之后其他自定義編輯器document.execCommand(insertHTML, false, imgTag)兜底方案適合文本編輯區(qū)域?qū)嶋H測試中發(fā)現(xiàn)經(jīng)典編輯器中粘貼圖片后tinyMCE.activeEditor可能還沒完全初始化。建議在上面代碼的基礎(chǔ)上加一個(gè)延時(shí)重試機(jī)制function insertToTinyMCE(imgTag) { if (typeof tinyMCE ! undefined tinyMCE.activeEditor) { tinyMCE.activeEditor.insertContent(imgTag); } else { setTimeout(function () { if (typeof tinyMCE ! undefined tinyMCE.activeEditor) { tinyMCE.activeEditor.insertContent(imgTag); } }, 500); } }5. 常見問題與排查技巧實(shí)錄這塊是我自己實(shí)際跑這個(gè)功能時(shí)踩坑踩出來的經(jīng)驗(yàn)按出現(xiàn)頻率排序。5.1 上傳返回401或403圖片不顯示最常見的原因就是nonce失效。排查思路打開瀏覽器開發(fā)者工具切到Network標(biāo)簽頁找到剛才的media上傳請求。點(diǎn)開請求查看請求頭確認(rèn)X-WP-Nonce字段是否存在。如果nonce有值但仍然403刷新一下編輯頁面然后再試。還有一種情況是使用了一些安全插件比如Wordfence它們可能會(huì)攔截帶有文件上傳的POST請求。先臨時(shí)關(guān)閉安全插件排查。5.2 剪貼板里明明有圖但事件根本沒觸發(fā)這種情況大部分不是代碼問題而是瀏覽器權(quán)限。Chrome、Edge、Firefox在非安全上下文http而非https)下或者某些第三方嵌入頁面里會(huì)禁止訪問剪貼板數(shù)據(jù)。解決辦法確保網(wǎng)站使用HTTPS訪問后臺(tái)編輯頁尤其重要。檢查瀏覽器地址欄右側(cè)是否有“禁止剪貼板訪問”的圖標(biāo)點(diǎn)擊恢復(fù)權(quán)限。如果是國內(nèi)一些基于Chromium的極速瀏覽器去設(shè)置里開啟“網(wǎng)站可以訪問剪貼板”。5.3 經(jīng)典編輯器里粘貼圖片上傳了但編輯器里出現(xiàn)了兩遍這是新手最容易遇到的bug。原因是你的paste事件處理器里確實(shí)preventDefault了但TinyMCE內(nèi)部自己又綁定了一個(gè)paste處理器事件順序上你的處理器先跑然后TinyMCE的處理器也跑了。解決辦法是在preventDefault()之外同時(shí)把剪貼板里的圖片項(xiàng)從事件對象中“清空”掉。具體做法e.originalEvent.clipboardData.items.clear();這行代碼放在上傳前執(zhí)行能把剪貼板里的圖片項(xiàng)移除TinyMCE在后續(xù)處理時(shí)發(fā)現(xiàn)剪貼板里沒有圖片數(shù)據(jù)就不會(huì)再插入了。5.4 上傳成功圖片也出現(xiàn)在媒體庫但正文里沒有自動(dòng)插入這可能是因?yàn)榫庉嬈鲗?shí)例的獲取時(shí)機(jī)不對。上面的代碼在AJAX成功回調(diào)里直接判斷tinyMCE.activeEditor但如果你在admin_enqueue_scripts里加載JS的時(shí)機(jī)偏早此時(shí)TinyMCE還沒初始化。我建議在uploadPastedImage里加一個(gè)判斷如果檢測到tinyMCE.activeEditor為null就先把圖片URL緩存到一個(gè)數(shù)組里等編輯器初始化完成后再插入。但實(shí)際操作中用戶粘貼圖片這個(gè)動(dòng)作本身發(fā)生在編輯器初始化之后所以這個(gè)問題不太常見更多是出現(xiàn)在“代碼里主動(dòng)調(diào)用上傳”的場景中。5.5 大圖片上傳超時(shí)默認(rèn)PHP上傳限制通常是2MB超過這個(gè)大小會(huì)直接失敗。在確保服務(wù)器允許的前提下可以在wp-config.php里添加ini_set( upload_max_size, 20M ); ini_set( post_max_size, 25M ); ini_set( max_execution_time, 60 );但更穩(wěn)妥的不是改服務(wù)器限制而是前端壓縮。因?yàn)椴┛臀恼赂静恍枰獛譓B的大圖壓縮到100KB左右完全夠用還能提升頁面加載速度。5.6 上傳后媒體庫時(shí)間不對WordPress默認(rèn)按當(dāng)前服務(wù)器時(shí)間生成上傳目錄。如果你在設(shè)置 - 常規(guī)里時(shí)區(qū)設(shè)置不對圖片會(huì)被存到錯(cuò)誤的月份目錄里。這個(gè)跟本功能無關(guān)只是提醒一下如果發(fā)現(xiàn)圖片路徑里的月份不對優(yōu)先檢查后臺(tái)的時(shí)區(qū)設(shè)置。6. 將功能擴(kuò)展到前臺(tái)或自定義場景以上代碼是綁定在后臺(tái)編輯頁的但其實(shí)這套邏輯可以遷移到很多場景。6.1 前臺(tái)投稿頁面如果你做了一個(gè)允許用戶投稿的前臺(tái)表單也可以在表單里加入“粘貼圖片自動(dòng)上傳”功能。只需要把JS綁定到那個(gè)表單的paste事件上然后確保頁面加載時(shí)通過wp_localize_script輸出nonce和restUrl即可。但要注意權(quán)限問題前臺(tái)用戶必須擁有upload_files權(quán)限才能在媒體庫上傳文件。WordPress默認(rèn)只有管理員和編輯角色有權(quán)限。如果你的投稿用戶是“訂閱者”角色需要在functions.php里添加add_action( init, function () { $role get_role( subscriber ); if ( $role ) { $role-add_cap( upload_files ); } } );這樣做要小心普通訂閱者有了上傳權(quán)限后理論上也就能操作自己的媒體庫文件。如果擔(dān)心安全問題建議給前臺(tái)投稿用戶單獨(dú)建一個(gè)用戶角色只賦予發(fā)布文章和上傳文件的權(quán)限。6.2 多站點(diǎn)網(wǎng)絡(luò)WordPress多站點(diǎn)Multisite環(huán)境下rest_url()和nonce機(jī)制仍然有效但需要注意每個(gè)子站點(diǎn)的rest_url()地址不同。如果你的插件希望在所有子站點(diǎn)通用推薦在PHP里動(dòng)態(tài)獲取wp_localize_script( paste-upload-plus, PUP_CONFIG, array( restUrl esc_url_raw( get_rest_url( get_current_blog_id(), wp/v2/media ) ), nonce wp_create_nonce( wp_rest ), ) );再補(bǔ)充一個(gè)我在實(shí)際項(xiàng)目中遇到的隱藏問題如果啟用了CDN插件比如WP Rocket或CDN加速插件它們會(huì)對前端的靜態(tài)資源做合并處理偶爾會(huì)把wp_localize_script輸出的內(nèi)聯(lián)變量放在加載順序錯(cuò)誤的位置導(dǎo)致JS里PUP_CONFIG未定義。如果遇到這種情況檢查JS執(zhí)行順序或者把配置直接硬編碼在JS文件里前提是你的站點(diǎn)固定使用某個(gè)域名。7. 性能與存儲(chǔ)上傳后的圖片管理建議自動(dòng)上傳帶來方便的同時(shí)也會(huì)帶來圖片管理問題。粘貼上傳的圖片通常沒有規(guī)范的命名時(shí)間一長媒體庫會(huì)變得很亂。7.1 文件名與目錄的規(guī)范策略上面代碼里用時(shí)間戳加隨機(jī)數(shù)命名這已經(jīng)比很多默認(rèn)命名好了。但更專業(yè)的做法是給圖片加上“文章ID”前綴// 你可以在PHP里輸出當(dāng)前文章ID PUP_CONFIG.postId ?php echo get_the_ID(); ?; // 然后在JS里拼文件名 var fileName post- PUP_CONFIG.postId - Date.now() . ext;這樣后期查找某個(gè)文章的所有圖片時(shí)直接按文件名搜索就能全找出來。7.2 自動(dòng)清理未引用圖片謹(jǐn)慎操作這個(gè)功能雖然很好用但也很危險(xiǎn)如果自動(dòng)清理程序誤刪了正文里引用的圖片損失不可逆。我個(gè)人的建議是不要做全自動(dòng)清理而是定期人工檢查媒體庫中“未附加”的圖片。WordPress后臺(tái)的媒體庫篩選器已經(jīng)支持“未附加”過濾你只需要結(jié)合上傳時(shí)間把很久遠(yuǎn)且沒被引用的圖片刪掉即可。如果你非要自動(dòng)化至少要做到兩點(diǎn)先備份、再校驗(yàn)文章內(nèi)容中是否真的沒有該URL。偽代碼思路如下// 獲取所有附件ID // 遍歷附件獲取URL // 在所有文章內(nèi)容中搜索該URL // 如果只出現(xiàn)0次標(biāo)記為孤兒圖片 // 手動(dòng)審核后再刪除我一般不會(huì)寫全自動(dòng)刪除因?yàn)椴┛臀恼驴赡鼙粴v史快照、小程序同步、RSS訂閱等渠道引用過僅搜索wp_posts.post_content并不全面。7.3 圖片尺寸與WebP優(yōu)化粘貼截圖還好如果你經(jīng)常從瀏覽器里復(fù)制網(wǎng)頁圖片那圖片尺寸可能非常大。上傳前用canvas壓縮是第一步上傳后還可以用WordPress自身的縮略圖機(jī)制在主題中引用thumbnail或medium_large尺寸的圖片而不是直接使用source_url原圖。如果你想把粘貼上傳的圖片自動(dòng)轉(zhuǎn)成WebP可以在上傳到服務(wù)器后使用WordPress的wp_generate_attachment_metadata過濾器或者直接用插件 FluentSMTP / Smush 這類優(yōu)化工具統(tǒng)一處理。這塊屬于錦上添花不展開說了。8. 一些經(jīng)驗(yàn)雜談適合場景與擴(kuò)展思考這個(gè)功能做好之后給我最大的感受是寫文章時(shí)“復(fù)制圖片”這個(gè)動(dòng)作從“復(fù)制到本地再手動(dòng)上傳”變成了“直接粘貼”心理負(fù)擔(dān)小了很多。尤其是寫教程類文章經(jīng)常要截十幾張圖手動(dòng)傳十幾張圖真的很消耗耐心。在真正使用過程中我還會(huì)搭配一些小技巧配合全局截圖工具比如Snipaste或微信截圖截圖后自動(dòng)保存在剪貼板粘貼到編輯器后服務(wù)器上保留原圖本地?zé)o殘留避免占用磁盤。粘貼到代碼塊附近時(shí)要小心有些主題的代碼塊樣式特殊粘貼圖片后可能會(huì)被代碼塊樣式包裹導(dǎo)致圖片顯示異常。不過這是主題問題與上傳邏輯無關(guān)。多張圖片連續(xù)粘貼上面代碼每次只處理剪貼板中第一張圖片。如果你希望一次粘貼多張圖某些系統(tǒng)支持多選復(fù)制圖片可以把循環(huán)里的break去掉改成異步上傳多張。移動(dòng)端后臺(tái)如果你用手機(jī)或平板寫博客移動(dòng)端瀏覽器對剪貼板的權(quán)限限制更多粘貼上傳可能不生效這是瀏覽器機(jī)制決定不是代碼能解決的。再提一個(gè)擴(kuò)展方向這個(gè)粘貼上傳的思路完全可以延伸到其他CMS或框架。比如你在寫靜態(tài)博客Hexo、Hugo可以寫一個(gè)本地腳本監(jiān)聽剪貼板截圖后自動(dòng)保存到source/images/目錄并把Markdown引用路徑復(fù)制到系統(tǒng)剪貼板。原理一模一樣讀取剪貼板文件寫入目標(biāo)目錄。我個(gè)人在實(shí)際操作中的體會(huì)是插件不在多關(guān)鍵功能自己寫一遍能學(xué)到很多平時(shí)用不到的知識(shí)。做這個(gè)粘貼上傳插件的過程中我重新梳理了REST API的認(rèn)證機(jī)制、編輯器的事件模型也理解了為什么有些功能“看上去簡單實(shí)現(xiàn)起來一堆坑”。如果你之前沒寫過WordPress插件這個(gè)選題很適合作為第一個(gè)練手項(xiàng)目邏輯清晰、涉及面廣、見效快。最后再分享一個(gè)小技巧如果你不小心把粘貼上傳功能寫壞了在上傳后圖片沒插入編輯器但媒體庫已經(jīng)多了一張圖——?jiǎng)e慌記住圖片URL手動(dòng)插入即可。上傳行為本身是把圖片保存到服務(wù)器插入行為是編輯器的操作兩者是解耦的。這個(gè)特性在做調(diào)試的時(shí)候特別有用可以單獨(dú)測試上傳接口是否正常再單獨(dú)測試插入邏輯是否正常。