既然定位為記事軟件沛申,不可或缺的就是富文本編輯器祝迂,遂查閱官網(wǎng)API,看到了editor
editor
基礎(chǔ)庫 2.7.0 開始支持缺狠,低版本需做兼容處理问慎。
富文本編輯器,可以對(duì)圖片挤茄、文字進(jìn)行編輯如叼。編輯器導(dǎo)出內(nèi)容支持帶標(biāo)簽的?html和純文本的?text,編輯器內(nèi)部采用?delta?格式進(jìn)行存儲(chǔ)穷劈。通過setContents接口設(shè)置內(nèi)容時(shí)笼恰,解析插入的?html?可能會(huì)由于一些非法標(biāo)簽導(dǎo)致解析錯(cuò)誤,建議開發(fā)者在小程序內(nèi)使用時(shí)通過 delta 進(jìn)行插入歇终。富文本組件內(nèi)部引入了一些基本的樣式使得內(nèi)容可以正確的展示社证,開發(fā)時(shí)可以進(jìn)行覆蓋。需要注意的是评凝,在其它組件或環(huán)境中使用富文本組件導(dǎo)出的html時(shí)追葡,需要額外引入?這段樣式?,并維護(hù)<ql-container><ql-editor></ql-editor></ql-container>的結(jié)構(gòu)奕短。圖片控件僅初始化時(shí)設(shè)置有效
正好符合要求
拿來主義:
首頁添加
<navigator url="/pages/editor/editor?title=新增筆記">
<button class="cu-btn cuIcon-add bg-green shadow"></button> 筆記
</navigator>
直接跳轉(zhuǎn)到添加頁面宜肉,可插入圖片可設(shè)置字號(hào),很是滿足!
再頭疼的就是矢量圖標(biāo)了翎碑,包含設(shè)置字體大小谬返,加粗以及,列表矢量圖
在網(wǎng)上
https://www.iconfont.cn/ 任意找矢量圖 看中哪個(gè)選哪個(gè)日杈,然后添加入庫遣铝,下載壓縮包解壓 得到有一個(gè)CSS 文件,copy到小程序wxss文件即可达椰,
最后不要忘了在app.wxss引用哦
@import "components/iconfront.wxss";
這樣我們就可以直接使用了
最終成果哦