【基于 Github API 的图床 Chrome 插件开发全纪录】作者：Jrain

首页发布

【基于 Github API 的图床 Chrome 插件开发全纪录】，作者：Jrain，链接：https://t.cn/EoYmVRc
导读
Github 提供了一套完善的 API 以供操作，几乎涵盖了开发一个完整 Github 客户端的所有功能。API 分为 REST 风格的 v3 版本和 GraphQL 风格的 v4 版本。为了使用方便，我选择的是 v3 版本。具体的 API 细节可以在官方文档查看。
要制作一个图床应用，我们只需要用到上传文件的 API 即可。但是在调用这个 API 之前，首选需要用户对应用进行授权，也就是所谓的登录操作。

来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【Kuuga——转化任何 Web 页面为桌面应用的跨平台工具】，作者：Jrain，链接：https://t.cn/ExCCkyM
导读
Kuuga 是一个基于 Electron + VueJS 构建的跨平台桌面应用，能够转化任何 Web 页面为桌面应用。
Kuuga 这个名称来源于《假面骑士古迦》。古迦是一个为了保护人们笑容而选择和恶魔战斗的英雄，他能够根据战斗场合的不同而切换不同的战斗模式——而这款工具也从古迦中获得了灵感，像古迦的战斗一样，它能够把不同的 Web 页面转化成对应的桌面应用，适应不同的使用场合。

来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【Web聊天工具的富文本输入框】，作者：Jrain，链接：https://t.cn/EILzgFe
导读
最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。demo 见图1

输入框富文本化
传统的输入框都是使用

来制作的，它的优势是非常简单，但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片（富文本化），我们可以采用设置了 contenteditable="true" 属性的 <div> 来实现这里面的功能。<br>简单创建一个 index.html 文件，然后写入如下内容：<br><div class="editor" contenteditable="true"><br>  <img src="https://t.cn/EILzgFD" alt=""><br></div><br>打开浏览器，就能看到一个默认已经带了一张图片的输入框<br><br>来源：掘金<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。<br><img style="max-width:90%; margin-top:10px;" referrerPolicy="no-referrer" referrerPolicy="no-referrer" src="https://wx2.sinaimg.cn/large/005SiNxyly1g0oc4mdsdmg30ei06e1kz.gif"/><br></div>                    <script>
                        function setIframeHeight(iframe) {
                            if (iframe) {
                                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                                if (iframeWin.document.body) {
                                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                                }
                            }
                        };