[WordPress] 外掛分享: TinyMCE remove-base-64-image

首頁外掛目錄 › TinyMCE remove-base-64-image
10+
安裝啟用
尚無評分
4642 天前
最後更新
問題解決
WordPress 3.5.1+ v1.0.2 上架:2013-03-21

內容簡介

Firefox 允許使用者將桌面上的圖片拖曳至 TinyMCE 編輯器 (Visual) 中,在此會立即將圖片轉換成base64碼,但這不是理想的,因為 base64 圖片比二進位圖片還大,而且 WordPress 大多會將圖片縮小,甚至建立縮圖,以減少圖片檔案大小,而 TinyMCE 編輯器所轉換的base64 圖片就沒有經過這樣的壓縮,所以在插入圖片時會讓網站載入速度變慢。

base64 圖片比二進位圖片大
WordPress 習慣將圖片壓縮並建立縮圖,使圖片檔案大小減少

為了避免這個問題,外掛「TinyMCE remove-base-64-image」包含一小段 JavaScript,每隔1.5秒會檢查 TinyMCE 編輯器是否有任何 base64 圖片,並立即將其刪除,同時顯示警示訊息:「很抱歉,拖放圖片進編輯器是被禁止的,這會讓您的網頁載入速度變慢,請使用『新增媒體』按鈕!」

如果您管理多個 WordPress 網站,這個外掛會省下您檢查客戶是否無意間讓他們的網頁下載速度變慢的時間。

由 PixelTiger 所開發之外掛。

開發者筆記

我知道使用 setInterval 尋找剛剛拖曳進來的圖片在理論上並不是最理想的方法,因為大多數時間都是不需要執行且可能會影響 TinyMCE 的效能,但影響非常微小。如果您查看 TinyMCE 論壇,您會發現有另一個方法:Disable drag/drop facility (由 Arvind 最後發佈於2012-07-09),需要修改 tiny_mce.js 檔案,以偵測 DOMNodeInserted 事件,並刪除新的圖片節點。儘管它聽起來合理,但在尋找所提到的「_addEvents function section」時,您會發現在版本3.5.8-wp的 tiny_mce.js 中根本找不到。我還搜尋了 TinyMCE 的文件,試圖找到一種在外掛中綁定此事件的方法,但都沒有成功。

因此,如果您是 JavaScript 天才,請隨意使用 DOM 檢查的外掛,取代這個外掛。在那之前,我希望人們能夠覺得這個外掛很有用。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.0.2) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「TinyMCE remove-base-64-image」→ 直接安裝(推薦)

原文外掛簡介

Firefox allows a user to drag and drop an image from their desktop into the TinyMCE editor (Visual), where it is immediately converted to base64 code, which is undesirable as the image file size is much larger than the equivalent added by the standard WordPress method because…

base64 images are larger than binary images
WordPress would normally have ‘crunched’ the image to give various different sizes, including a thumbnail, all smaller than the original

To prevent this, “TinyMCE remove-base-64-image” contains a small piece of javascript that checks the TinyMCE editor every 1.5 seconds and immediately removes any base64 image found, also displaying an alert message:
‘Sorry, dragging images into the editor is blocked as it will cause your webpages to load slowly, please use the “Add Media” button!’.
If you manage multiple WordPress sites this plugin will save you time checking if your clients are unwittingly crippling their page downloads.
A PixelTiger plugin.
Developer Notes
I am aware that using setInterval to detect a freshly dropped image is not ideal from a theoretical standpoint as most of the time it’s unnecessary and it could impact TinyMCE performance, albeit by a tiny amount. If you check the TinyMCE forums you will find another suggested method: Disable drag/drop facility (last post by Arvind, 2012-07-09) which involves modifying tiny_mce.js to detect the DOMNodeInserted event then deleting the new image node. While this seems sound, if you try to locate the ‘_addEvents function section’ mentioned you’ll find it’s not in tiny_mce.js version 3.5.8-wp. I also searched the TinyMCE documentation for a way to bind this event in a plugin, but no joy there either.
So if you’re a javascript genius feel free to make this plugin redundant with a DOM checking one. Until that time arrives I hope people find this useful.

延伸相關外掛

文章
Filter
Mastodon