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

引言

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

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180731B1L0TS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券