你知道吗？浏览器还可以当成文本编辑器用

引言

平时有一些少量的东西需要记录，但是又不想打开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