你知道嗎？瀏覽器還可以當成文本編輯器用

引言

平時有一些少量的東西需要記錄，但是又不想打開word這樣「重」的軟體，又不想用單調的記事本？本文將介紹一種方法來讓你的瀏覽器變成你的編輯器。

JavaScript

首先先介紹一下這次的主角：JavaScript。瀏覽器里的JavaScript腳本有一個叫DOM的模塊，可以來操作網頁里html的元素。這次我們就是利用裡面的一個屬性來讓瀏覽器變成你的編輯器：contentEditable屬性。

-當這個屬性的值為true時，網頁的內容就可以任意編輯，比如插入刪除文字，甚至可以粘貼網頁上的圖片。（經小編試驗，甚至可以將一個網頁的導航欄整個複製到另一個網頁，看下面這張圖片，是不是很神奇~）

圖片元素來源：新標籤頁+厚朴導航

-當這個屬性的值為false時，網頁的內容就是平時我們看到的內容

這意味著，如果我們有一個空白的網頁，然後把contentEdiable屬性設置為true，那麼我們就可以在裡面插入字體，當成編輯器用。

在瀏覽器的地址欄輸入一下代碼，回車便可以得到一個瀏覽器化身而成的文本編輯器：

data:text/html,

在瀏覽器的網址中輸入上述內容

CSS

到這裡你可能會想到，把空白的網頁當成編輯器跟用記事本有什麼差別？

嗯？看到我這個標題是不是想到了什麼？

沒錯！就是CSS樣式。這個編輯器其實是一個另類的網頁，這意味著它支持CSS樣式。只要你會一點CSS語法，就可以打造出一個不一樣的編輯器。（比如更改背景圖片，更改字體顏色大小等等。。。）

具體大家可以去摸索摸索，小編在這裡就不再演示了。

實踐

除了在地址欄輸入

data:text/html,

之外，還可以通過開發者工具使任何網站變成可編輯的網站。

1） 首先打開開發者工具（F12或者滑鼠右鍵—檢查）

2） 找到console標籤頁

4） 回車，然后里面的內容變成可編輯

結語

其實這個方法除了讓瀏覽器變成編輯器之外，還可以實現很多有趣的功能。有興趣的讀者可以去嘗試一下。

END

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！