Skip to content

Instantly share code, notes, and snippets.

@condorheroblog

condorheroblog/browser-text-edit.md

Last active October 21, 2022 02:14
Show Gist options
  • Save condorheroblog/689e64a96a4ff6a431d233c960e1f661 to your computer and use it in GitHub Desktop.
Save condorheroblog/689e64a96a4ff6a431d233c960e1f661 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
browser-text-edit.md

一行代码让浏览器变成记事本🪄

变成记事本

演示：FMVqDX0XsAQ_J3J

浏览器导航栏输入代码：

data:text/html,<html contenteditable />

原理

这里用到了 Data_URIs 的知识。通过 URL 加载网页我们再熟悉不过了，通过 URL 加载 base64 文件也有所了解，通过 URL 加载别的文件可能就知之甚少了，可以通过 data-uris-explained 来学习。

美化记事本

点击查看美化代码 
data:text/html;charset=utf-8,<title>Writability</title><body OnLoad='document.body.focus();'  contenteditable style="font-size:21px;line-height:1.6;font-family:'Chaparral Pro',Georgia;max-width:21em;margin:0 auto;padding:3rem;background-color:rgb(233,233,225);color:rgb(68,68,68);" spellcheck="false"></body>

效果预览：

笔记本预览图

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment