2

Memos页面添加编辑框

 10 months ago
source link: https://nuoea.com/add-memos-editor/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Memos页面添加编辑框

折腾 8小时前 222 字
1688222314.jpg

最开始是看到 @林木木 发的一条哔哔。说是想要在Memos页面内嵌入哔哔单页,从而可以实现在一个页面内发布哔哔以及浏览哔哔。寻思这样一来,体验确实是可以好很多,不需要切来切去,更有沉浸感。

<div id="memos" ></div>
.load-memos-editor{position:fixed;right:1rem;bottom:1rem;background-color:#ebeced;}
.memos-editor-content{display:flex}
.memos-editor-content .memos-editor-inputer{overflow-x:hidden;overflow-y:clip;padding:0;width:100%;max-height:160px;outline:2px solid transparent;outline-offset:2px;background-color:transparent;white-space:pre-wrap;line-height:2rem;resize:none;overflow-wrap:anywhere;word-break:normal}
.memos-editor-tools{display:flex;flex-direction:column}
.memos-editor-tools .action-btn{padding:.25rem;line-height:1}
.memos-editor-tools .memos-tag-list{display:flex;line-height:2;flex-wrap:wrap;align-items:center}
.memos-editor-tools .memos-tag{position:relative}
.memos-editor-tools .memos-tag a{flex:1}
.memos-editor-footer{line-height:1}
.memos-editor-footer,.memos-editor-option{display:flex;align-items:center}
var memosData = {
    dom:'#memos',
	}

grid.css

iconfont.css

  • Javascript

memos-editor.js

  • 消息提醒弹窗
https://github.com/TheWindRises-2/coco-message
  • Animate.css
https://animate.style/
  • 填入 Memos Open API ,格式如下:
https://memos.nuoea.com/api/memo?openId=<Memos Open API>
  • 开始哔哔吧

围观地址:https://nuoea.com/memos

1688138493.jpg

Memos 单页及浏览器扩展::木木木木木


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK