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

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

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+

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

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

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

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

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

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

16992 次点击
所在节点    分享创造
150 条回复
handblankt
2023-06-01 10:07:58 +08:00
自动保存，加密，分享？
meeop
2023-06-01 10:08:47 +08:00
@molvqingtai 我都不知道还能这么干，这不比网上那些在线网页编辑器轻便多了
Maboroshii
2023-06-01 10:13:04 +08:00
真佩服你们这种天才！ 收藏了
handblankt
2023-06-01 10:19:29 +08:00
// 自动保存
setInterval(function() {
localStorage.setItem('note', document.getElementById('note').value);
}, 5000); // 每 5 秒自动保存一次

// 云同步
function syncToCloud() {
var note = document.getElementById('note').value;
// 将 note 同步到云端的代码
}
huiyadanli
2023-06-01 10:21:37 +08:00
再加功能然后变成小书签🤣
israinbow
2023-06-01 10:22:52 +08:00
https://github.com/zserge/awfice

🤣用活浏览器
meeop
2023-06-01 10:33:20 +08:00
@israinbow 厉害,这个项目都快 2k start 了
meeop
2023-06-01 10:34:05 +08:00
分享 https://github.com/zserge/awfice 里的几个代码

网页版本画图
data:text/html,<canvas id=v><script>d=document,d.body.style.margin=0,P="onpointer",c=v.getContext`2d`,v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,f=0,d[P+"down"]=e=>{f=e.pointerId+1;e.preventDefault();c.beginPath();c.moveTo(e.x,e.y)};d[P+"move"]=e=>{f==e.pointerId+1&&c.lineTo(e.x,e.y);c.stroke()},d[P+"up"]=_=>f=0</script></canvas>
meeop
2023-06-01 10:35:15 +08:00
没啥用的计算器

data:text/html,<table style="text-align: center;width:80vw;margin: 0 auto;"><tbody><tr><td colspan="4"><textarea></textarea></td></tr></tbody><script>let d=document;let tbl=d.querySelector('tbody');let z=d.querySelector('textarea');let oc=(x)=>z.value+=x;let cl=()=>z.value='';let re=()=>{try{z.value=eval(z.value);}catch(error){cl();}};[[1,2,3,'+'],[4,5,6,'-'],[7,8,9,'*'],['C',0,'=','/']].forEach((a)=>{let r=d.createElement('tr');r.style.lineHeight='64px';tbl.appendChild(r);a.forEach((b)=>{let tb=d.createElement('tb');tb.innerText=b;tb.style.padding='16px';tb.style.border='1px solid';r.appendChild(tb);tb.onclick=b==='='?re:b===%27C%27?cl:()=%3Eoc(b);})})%3C/script%3E%3C/table%3E
weijancc
2023-06-01 10:46:12 +08:00
很有意思, 建议加点边距, 在左上角视角不太好
Vegetable
2023-06-01 10:52:35 +08:00
现在编程领域，好像很少感受到“用更少的代码去实现好玩的功能”这种文化了。
iMusic
2023-06-01 10:54:03 +08:00
@molvqingtai 妙啊
xinh
2023-06-01 11:13:44 +08:00
这个挺好的，临时记录点东西，都玩出花了
codehz
2023-06-01 11:16:43 +08:00
data:text/html;charset=utf-8,<style>html{height:100%;display:flex;color-scheme:dark light}body{flex:1;flex-direction:column;font-family:system-ui}#t{position:sticky;padding:8px;inset: 0 0 auto;gap:4px}#t,button,body{display:flex}#e{flex:1;padding:8px;font-size:150%}</style><script>r=()=>f?.text().then(x=>f.type='text/html'?e.innerHTML=x:e.innerText=x)</script><body><div id=t><button onclick="e.innerHTML=''">🚮<button onclick="o.showPicker()">📂<button onclick="a.href=`data:text/${p.checked?'plain':'html'};charset=utf-8,${encodeURIComponent (p.checked?e.innerText:e.innerHTML)}`;a.click()">💾</button><input id=o hidden type=file onchange="f=o.files[0];r()"><label><input type=checkbox id=p onchange="e.contentEditable=p.checked?'plaintext-only':'true'">plaintext</label><a hidden id=a download=draft></div><div id=e contenteditable ondrop="f=event.dataTransfer.files[0];r();return false">
支持保存 html 到本地（点💾按钮），从本地加载（点📂或者直接拖文件进去，支持 html 和 text ），支持暗色模式自动切换，支持选择纯文本编辑模式（此时也会保存为 txt 文件）
xjpicism
2023-06-01 11:21:04 +08:00
要是支持发文件的话 直接发单个 html 文件更简洁

data url 大部分聊天工具应该都不支持点击打开
meeop
2023-06-01 11:24:30 +08:00
@codehz 我贴到浏览器好像用不了,应该是代码里有特殊字符导致的,我用 base64 编码了下
data:text/html;base64,PHN0eWxlPmh0bWx7aGVpZ2h0OjEwMCU7ZGlzcGxheTpmbGV4O2NvbG9yLXNjaGVtZTpkYXJrIGxpZ2h0fWJvZHl7ZmxleDoxO2ZsZXgtZGlyZWN0aW9uOmNvbHVtbjtmb250LWZhbWlseTpzeXN0ZW0tdWl9I3R7cG9zaXRpb246c3RpY2t5O3BhZGRpbmc6OHB4O2luc2V0OiAwIDAgYXV0bztnYXA6NHB4fSN0LGJ1dHRvbixib2R5e2Rpc3BsYXk6ZmxleH0jZXtmbGV4OjE7cGFkZGluZzo4cHg7Zm9udC1zaXplOjE1MCV9PC9zdHlsZT48c2NyaXB0PnI9KCk9PmY/LnRleHQoKS50aGVuKHg9PmYudHlwZT0ndGV4dC9odG1sJz9lLmlubmVySFRNTD14OmUuaW5uZXJUZXh0PXgpPC9zY3JpcHQ+PGJvZHk+PGRpdiBpZD10PjxidXR0b24gb25jbGljaz0iZS5pbm5lckhUTUw9JyciPmRlbDxidXR0b24gb25jbGljaz0iby5zaG93UGlja2VyKCkiPm9wZW48YnV0dG9uIG9uY2xpY2s9ImEuaHJlZj1gZGF0YTp0ZXh0LyR7cC5jaGVja2VkPydwbGFpbic6J2h0bWwnfTtjaGFyc2V0PXV0Zi04LCR7ZW5jb2RlVVJJQ29tcG9uZW50IChwLmNoZWNrZWQ/ZS5pbm5lclRleHQ6ZS5pbm5lckhUTUwpfWA7YS5jbGljaygpIj5zYXZlPC9idXR0b24+PGlucHV0IGlkPW8gaGlkZGVuIHR5cGU9ZmlsZSBvbmNoYW5nZT0iZj1vLmZpbGVzWzBdO3IoKSI+PGxhYmVsPjxpbnB1dCB0eXBlPWNoZWNrYm94IGlkPXAgb25jaGFuZ2U9ImUuY29udGVudEVkaXRhYmxlPXAuY2hlY2tlZD8ncGxhaW50ZXh0LW9ubHknOid0cnVlJyI+cGxhaW50ZXh0PC9sYWJlbD48YSBoaWRkZW4gaWQ9YSBkb3dubG9hZD1kcmFmdD48L2Rpdj48ZGl2IGlkPWUgY29udGVudGVkaXRhYmxlIG9uZHJvcD0iZj1ldmVudC5kYXRhVHJhbnNmZXIuZmlsZXNbMF07cigpO3JldHVybiBmYWxzZSI+
codehz
2023-06-01 11:25:58 +08:00
@meeop 被当作搜索了吗？我这边是可以用的(Arc 浏览器，手动选择按 url 打开)，此外 emoji 的问题可以通过 text/html;charset=utf-8,来解决
iblessyou
2023-06-01 11:41:23 +08:00
@codehz 你最先那个我删了 style 部分就可以了
cleardevstudio
2023-06-01 12:24:24 +08:00
好久没见过这么好的活了，赞
kkocdko
2023-06-01 12:59:29 +08:00
我记得 GitHub 上有个这种项目，还收集了一些 canvas 画画之类的功能。可惜当时没 star

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

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

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

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

© 2021 V2EX