开源一个无后端也无前端彻底无服务的网页版记事本

2023-06-01 01:12:48 +08:00
 meeop

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+

复制到浏览器即可使用，可加书签，可分享，不需要网络，全平台可用

有时候需要有个地方临时复制粘贴一些东西，这时候可以用记事本，但是记事本或者其他文本编辑软件关闭时一般需要确认是否保存，且这些临时内容会和工作内容混合

还有个问题是记事本页面不够大，ui 也略复杂一点

这个网页版记事本就能支持这种场景，原则上不支持保存，随用随关，铺满全屏

而且我觉得最有意思的点是，这其实是一个彻底开源极端易于分享的软件形式，软件所有内容都塞到 url 数据里，所见即所得，无需安装，适配全平台，用户还能随时修改逻辑，无需网络，没有服务器成本

缺点是软件大小有限制 以及软件作者可能不太好赚钱

17289 次点击
所在节点    分享创造
150 条回复
mokevip
2023-06-01 13:06:50 +08:00
翻译一下
data:text/html;text,<html contenteditable>edit me</html>
Tsuj100
2023-06-01 13:54:24 +08:00
最简单的才是最好用的
hs0000t
2023-06-01 14:03:55 +08:00
最简化版：data:text/html;,<html contenteditable>
wangofjian
2023-06-01 14:04:16 +08:00
临时记录方便了
storyxc
2023-06-01 14:12:54 +08:00
interesting
kiritoxf
2023-06-01 14:24:34 +08:00
添加了可以切换显示 /隐藏 HTML/CSS/JavaScript/Output 的功能

data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style> textarea, iframe { width: 100%; height: 50%; background-color: rgb(245, 245, 245); } body { margin: 0; background-color: rgb(245, 245, 245); } textarea, iframe { width: 33.3%; height: 100%; flex: 1; font-size: 18; resize: none; } textarea:focus { background-color: white; } .menu { text-align: center; overflow: hidden; width: 100%; padding: 5px 0; } .panels { display: flex; justify-content: center; height: calc(100% - 40px); }</style><script> function switchDisplay(id) { var dom = document.getElementById(id); if (!dom) return; if (dom.style.display !== '') { dom.style.display = ''; return; } if (dom.style.display === '') { dom.style.display = 'none'; return; } }</script><div class="menu"><button onclick="switchDisplay('h')">HTML</button><button onclick="switchDisplay('c')">CSS</button><button onclick="switchDisplay('j')">JavaScript</button><button onclick="switchDisplay('i')">Output</button></div><div class="panels"><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i></div>
dongdongdong
2023-06-01 14:26:11 +08:00
interesting
wydinhk
2023-06-01 14:29:25 +08:00
@weijancc 加入左右边距、更换系统字体

data:text/html,<body contenteditable style=line-height:1.5;margin-left:20%;margin-right:20%;font-family:system-ui>
sss15
2023-06-01 14:36:48 +08:00
@Liuman #32 你这个不错，已经用上了，收藏了
romisanic
2023-06-01 14:38:00 +08:00
能不能搞一个 json 编辑器，可以上下或者两边对比的那种
kile
2023-06-01 14:41:58 +08:00
好活好活,举一反三创意满满,收藏了
BUHeF254Lpd1MH06
2023-06-01 14:49:35 +08:00
双屏对照版
data:text/html;text,<html><body style="display:flex"><div contenteditable style="flex:1;padding:5px"></div><div contenteditable style="flex:1;padding:5px"></div></body></html>
itechify
2023-06-01 15:20:44 +08:00
去年站内有人做过左右分屏，用于翻译的
zhouyg
2023-06-01 15:35:25 +08:00
好活有点意思，相当于直接分享一个 html 了
ZeroDu
2023-06-01 15:37:15 +08:00
@zhcode #12 666 ，确实还可以有快捷键，字体加粗斜体，下划线
aduangduang
2023-06-01 15:51:09 +08:00
一键清理浏览器垃圾

data:text/html;charset=utf-8,<script>while(1){Math.random()*Math.random()/Math.random()}alert('清理完成');</script>
taogen
2023-06-01 15:58:16 +08:00
有没有大佬整一个 Markdown 编辑器？
Jonz
2023-06-01 16:03:33 +08:00
@israinbow 宝藏项目，star 了
gggyyybbb
2023-06-01 16:04:24 +08:00
好活！超级有意思
AV1
2023-06-01 16:16:14 +08:00
视频播放器

data:text/html;base64,PCFET0NUWVBFIGh0bWw+DQo8aW5wdXQgdHlwZT0iZmlsZSIgaWQ9ImlucHV0IiBhY2NlcHQ9InZpZGVvLyoiPg0KPGJyPg0KPHZpZGVvIHNyYz0iIiBpZD0idmlkZW8iIGNvbnRyb2xzIGF1dG9wbGF5PjwvdmlkZW8+DQo8c2NyaXB0Pg0KICBpbnB1dC5vbmNoYW5nZSA9ICgpID0+IHsNCiAgICBjb25zdCBmaWxlID0gaW5wdXQuZmlsZXM/LlswXTsNCiAgICBpZiAoZmlsZSkgew0KICAgICAgdmlkZW8uc3JjID0gVVJMLmNyZWF0ZU9iamVjdFVSTChmaWxlKTsNCiAgICB9DQogIH07DQo8L3NjcmlwdD4=

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/944717

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX