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

前言介紹

  • 這款 WordPress 外掛「TinyMCE remove-base-64-image」是 2013-03-21 上架。
  • 目前有 10 個安裝啟用數。
  • 上一次更新是 2013-07-03,距離現在已有 4323 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
  • 外掛最低要求 WordPress 3.5.1 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

lingojon |

外掛標籤

image | base64 | Firefox | tinyMCE |

內容簡介

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 檢查的外掛,取代這個外掛。在那之前,我希望人們能夠覺得這個外掛很有用。

原文外掛簡介

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.

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「TinyMCE remove-base-64-image」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


最新版本

延伸相關外掛(你可能也想知道)

  • PushAlert – Web Push Notifications for WordPress and WooCommerce 》PushAlert WordPress 網站推播通知外掛程式,可自動整合,並允許使用者訂閱推播通知。這還添加了一個易於使用的介面,就在編輯器旁邊,讓您在發布文章時自動...。
  • FirePHP / Firebug PHP Integration 》加入 FirePHP 整合,php 函數 fb(…) 等等。, 更多使用資訊請參閱 http://www.firephp.org。, 可簡單地與 Mozilla Firefox 的 FireBug 擴充功能 FirePHP...。
  • Browser Blocker 》Browser Blocker 外掛讓您有能力控制哪些瀏覽器(版本)可以訪問您的網站內容,哪些不能。對於您封鎖的瀏覽器(版本),用戶可以控制其客戶端收到的激活畫面...。
  • OpenSearch 》這個WordPress外掛可根據OpenSearch規格,版本1.1,為您的網站添加OpenSearch發現和查詢功能。, 啟用此外掛後,您的WordPress網站將提供一個標準化的搜索界面...。
  • Relative Links Fix 》WordPress博客作者有時會從WordPress生成的主頁面複製標題並將其粘貼到文章編輯窗口中。在Firefox中,這會導致絕對URL轉換為相對URL。例如,從http://khaotic...。
  • WorldShaking Web Push Notifications 》這是一個為 WordPress 博客和網站提供完整推送通知解決方案的外掛。支援 Firefox、Chrome 和 Safari 瀏覽器。。
  • Foxload Firefox Download 》這個外掛可以在你的 WordPress 網誌側邊欄提供不同格式和顏色的 Firefox 下載按鈕 給你的訪客使用。, 外掛提供不同的橫幅格式和顏色選擇。此外掛會利用 WordP...。
  • Firefox OS Bookmark 》使用此外掛程式,可以建立 manifest.webapp 檔案,將您的網站安裝為可在 Firefox OS / Firefox / Firefox for Android 上運行的主機應用程式!, Firefox OS ...。
  • DigitalPUSH notifications 》此外掛可以讓您的訪客訂閱推送通知,並在您發布新文章時自動通知所有已訂閱的使用者。, 訂閱過程是100%自動化,已訂閱的用戶將保存在您的DigitalPUSH帳戶中。...。
  • Cache Manifest for WordPress Themes 》這款 WordPress 外掛是一種簡單的方法,可以為 WordPress 主題生成 HTML5 快取清單檔案。啟用外掛後,它將在您目前的博客主題目錄中建立一個快取清單檔案。, ...。
  • WP-Microsummary Comments Track 》透過 Firefox 2+ 的 Microsummaries (http://wiki.mozilla.org/Microsummaries),這個外掛僅顯示你在 WordPress 網誌上的, * 公開, * 等待批准, * 垃圾郵件, ...。
  • WP LibreJS 》WP LibreJS 模組提供與 GNU LibreJS 瀏覽器插件的相容性。, 它向頁面添加標籤,指示所有 JavaScript 均為 GPL v3+。它只會在管理員使用者載入 JavaScript 檔...。
  • Vilf.io – rozesílání webových push notifikací 》Vilf.io – your secret weapon for customer attention, , Easy integration with WooCommerce, Compatible with any WP template, , Web push notifications...。
  • Pushdy – Web Push Notifications 》Pushdy 是一種增加使用者參與度的簡單方式。使用 Pushdy 發送定向的推送通知,讓使用者持續回訪。安裝只需幾分鐘。, 設定完成後,當您發布新文章時,訪客可以...。
  • Foxy Board 》Foxy Board Firefox App Widget 允許您通過極簡和易於使用的 HTML 小工具輕鬆添加 Firefox App 的詳細信息到博客文章中。, 要將小工具添加到您的文章中,請使...。

文章
Filter
Apply Filters
Mastodon