需要 TXT 記事本軟體?開瀏覽器分頁充當純文字編輯器

browser txt-01

今天在 Google+ 上看到有朋友分享了一則技巧:「在網址列輸入特定指令後,可以在新分頁得到一個臨時用的文字編輯器,大部分瀏覽器皆適用。這個原理其實在 CSS 裡嵌入 Base64 經常用到。」

非常簡單,卻很實用。我自己實際電腦工作情況中確實會臨時需要使用 TXT 記事本,目的不是要保存內容,而是有時候用來暫存剪貼資料,所以這些資料也不需要儲存,就只是要有一個純文字編輯器管理過渡文字。而原來你只要在任何「新」瀏覽器中,例如 FirefoxGoogle Chrome 的網址列輸入:

data:text/html, <html contenteditable>

就能打開一個可以在上面輸入、複製、貼上文字的空白新分頁。把這個網頁儲存到你的書籤裡,那麼就能隨時利用這個瀏覽器內建空白記事本,而且不只電腦可以用,書籤同步到手機後,一樣可以在行動裝置的瀏覽器上使用這個純文字記事本功能。值得大家存下這個網址,以備不時之需。

留言

  1. 記不起來@@ 直接加到我的最愛列 呵呵

    回覆刪除
  2. 這個一定要加到書籤列的^^

    回覆刪除
  3. writebox還是比較方便 個人認為。

    回覆刪除
  4. This uses a technique called data url. It directly puts the content into the URL. The URL's size will increase when the content increases and browsers have a length limit on these urls.

    回覆刪除
  5. 我嘗試把整頁維基百科文章抄下來︰
    https://plus.google.com/photos/118144101338204547353/albums/5839253446916718929
    結果能保存整篇文章,而且圖片、格式也一一保留。很大可能文字長度是沒有限制的,而且這亦不是單純的純文字編輯器了。

    回覆刪除
  6. 是的,後來更多實測後發現也可以剪貼圖片上去XD

    回覆刪除
  7. 我比較喜歡 javascript:document.write("<textarea style='height:40%;width:80%;margin:auto'></textarea>");
    通常,我個人要 copy & paste 的內容最好去除格式,所以textarea這種不保存格式型態的

    若要用data url 則是 data:text/html, <textarea style='height:40%;width:80%;margin:auto'></textarea>
    或是 data:text/html;base64,IDxodG1sID48Ym9keT48dGV4dGFyZWEgc3R5bGU9J2hlaWdodDo0MCU7d2lkdGg6ODAlO21hcmdpbjphdXRvJz48L3RleHRhcmVhPjwvYm9keT48L2h0bWw+

    回覆刪除
  8. @Kenneth So
    這是用 html 5 的屬性將整個空白頁面改為可更改
    所以可以貼各種網頁上可以出現的東西

    回覆刪除
  9. 請問可以設定分頁的標題嗎??

    感覺蠻好用的,僅需剪貼時就不用特地去開記事本...

    回覆刪除
  10. 這邊還有程式碼編輯器
    https://gist.github.com/4666256

    firefox和Chrome都適用

    data:text/html, %3Cstyle%20type%3D%22text%2Fcss%22%3E%23e%7Bposition%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B%7D%3C%2Fstyle%3E%3Cdiv%20id%3D%22e%22%3E%3C%2Fdiv%3E%3Cscript%20src%3D%22http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cscript%3Evar%20e%3Dace.edit(%22e%22)%3Be.setTheme(%22ace%2Ftheme%2Fmonokai%22)%3Be.getSession().setMode(%22ace%2Fmode%2Fruby%22)%3B%3C%2Fscript%3E

    回覆刪除
  11. 程式碼編輯器也太強大了XD

    回覆刪除
  12. Chrome有個套件 chrome notepad
    就像上面那樣 還有同步功能XD

    回覆刪除
  13. Chrome有一个叫做Quick Note的也是不错吧~
    https://chrome.google.com/webstore/detail/quick-note/mijlebbfndhelmdpmllgcfadlkankhok

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

Google Maps 我的地圖完全教學!規劃自助旅行攻略

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱